개발일기

border에 gradinet를 주려고 했다.border에 linear-gradinet를 이용하여 주었지만, 작동하지 않았다. 인터넷을 검색하여 해결 방법들을 찾아보았다. 나는 border-radius를 같이 줄 것이기 때문에, background-image를 이용하여 border를 gradinet를 줄 수 있었다.position: relative; border: 1px solid transparent; border-radius: 16px; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, red 0%, orange 100%); background-origin: border-box; background-clip: conten..

next 13이 업데이트되면서 대규모 업데이트가 되었다 next.js의 13 업데이트 내용이 무엇일까 ? Next.js 공식문서에 설명하는 변화점들은 다음과 같다. app/ Directory (beta) Laytous React Server Components Streaming Trubopack (alpha) New next/images (stable) New @next/font (beta) Improved next/link 등이 있다. 이번에는 app 디렉토리에 대해 알아보고자 한다. app/ Directory app Directory 는 현재 베타버전으로, 프로덕션 환경에서는 사용을 권하질 않는다고 공식홈페이지에선 말하고 있습니다. next는 주요 라우팅을 pages 폴더 내에서 하고 있었는데, ap..

React 프로젝트를 진행하다보면 public폴더 내 manifest.json파일을 흔히 볼 수 있다. 프로젝트를 진행하면서 manifest.json에 대해 자세히 파헤쳐본 적이 없었기 때문에 문득 이 파일이 무엇을 하는지 궁금해졌다. manifest.json 웹앱 manifest란 앱에 대한 정보를 담고 있는 json 파일이다. 배경색과, 앱의 이름, 홈스크릲 ㅘ면에 추가할 아이콘 등의 정보를 담는 것이다. 웹앱 매니패스트의 파일명은 manifest.json으로 많이 사용하곤 한다. { "short_name": "React App", "name": "Create React App Sample", "start_url": ".", "display": "standalone", "theme_color": "#..

api를 fetch하는 라이브러리로 axios를 많이 쓰곤 했다. 이 때, 백엔드에서 api의 parameter값으로 두개를 optional로 주곤 했다. 그래서 나는 const fetchData = async (param1?:boolean, param2?:string) => { const res = await axios.get('/api/endpoint', { params: { param1, param2, } }); return res; } 위와 같이 fetchData 함수를 만들었다. fetchData함수를 사용할 때 param1이 필요로하면, param2 없이 fetchData(param1에 해당하는 변수명) 을 주면 되었지만, param1을 전송하지 않고, param2만 주고 싶을 때가 있었다. ..

next 프로젝트를 만들면 next.config.js 파일을 같이 만들곤한다. 이 파일에서 쓰는 설정만 쓰고, 다른 설정에 대해서 잘 모르기 때문에 next.config.js 파일에 대해 자세하게 파헤쳐보고자 한다. nextjs에서 환경설정을 하고, 커스텀한 설정을 할 수 있다. 개발을 하다보면, 개발환경과 배포환경인 프로덕션 환경으로 구분할 수 있따. 배포환경과 개발환경이 다르듯 환경설정을 다르게 한다. 이 부분을 next 사용자라면, next.config.js에서 쉽게 설정할 수 있다. const nextConfig = {} module.exports = nextConfig 또는 const nextConfig = {} export default nextConfig 를 이용하여 설정을 커스텀한 파일을 ..

나는 이때까지 프로젝트를 진행하면서 axios를 이용하여 baseURL만 설정하였다. import axios from 'axios'; const Axios = axios.create({ baseURL: process.env.NEXT_PUBLIC_BASE_URL, }); export default Axios; 위와같이, baseURL만 환경변수를 이용해서 받아왔다. 하지만, 공부를 진행하다보니, axios에서 request,response의 성공 실패에 따라 해당 부분에서 설정할 수 있는 것을 알게되었다. interceptors가 무엇일까? interceptors는 요청하기 직전과, then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. instance request 설정 response..

이전 포스팅들에서 GithubAction을 이용하여 Docker 이미지파일을 ECR에 배포하였다. ECR에 이미지 파일을 배포하였는데, 이후 서버에서 이미지 파일이 잘 켜지는지 확인을 위해서는 EC2 서버에 SSM으로 접근을 하여 해당 명령어를 입력하여 run 시키면 된다. 먼저, ECR에 올라간 도커이미지와, EC2서버가 준비되어 있어야한다. 나는 ssm이 구축된 서버가 있었기 때문에,Command 사용SSM인프라가 구축된 AWS리소스이기 때문에, Command문을 활용하여 배포를 진행해보겠다{ "Command": { "CommandId": "bcdd6bbd-f397-4478-962f-18d1ae5e125c", "DocumentName": "AWS-RunShellScript", "DocumentVers..

InterSection Observer이란? 기본적으로 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 안되는지 구별하는 기능이다. 쉽게 말해, 사용자 화면에 지금 보이는 요소인지 아닌지 구별하는 기능이다. 해당 기능은 비동기적으로 실행되어, scroll 같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 문제 없이 사용이 가능하다. 무한스크롤을 구현하면서 react-query의 useInfiniteQuery를 이용하였고, 해당 부분의 데이터 관찰은 react-intersection-observer api를 이용하였다. 해당 라이브러리를 이용하여 무한스크롤 구현은 해당 블로그에 작성하였으니 참고하면 좋을 것 같다. 자바스크립트 내장함수인 Inters..

이번에는 AWS의 ECR에 도커파일을 이용하여 이미지파일을 배포해보는 작업을 해보았다. 작업 시작 전, 작성된 dockerfile과 aws ecr을 필요로한다. 깃허브 레포지토리에 시크릿 변수를 등록을 먼저 해주어야한다. Setting -> Secrets -> Actions Secrets -> New repository secret 순으로 들어가서 시크릿키를 등록해주자. AWS_ACCESS_KEY_ID // AWS 사용자 Access key AWS_SECRET_ACCESS_KEY // AWS 사용자 Secret Access key ECR_REPOSITORY_NAME // ECR Repository 이름 이제 깃허브 액션 준비는 끝났다. .github/workflows/deploy.yml 파일을 생성해준다..

Docker에 대해 공부를 하면서, ECR에 대한 개념이 나왔다. 쉽게 말해, AWS에서 제공하는 DockerHub이다. ECR이란? (Elastic Container Registry) ECS는? (Elastic Container Service) 아마존에서 제공하는 Docker Image를 관리하는 리포지토리이다. 리포지토리는 S3와 연결되어 저장소를 가지고, AWS에서 IAM의 액세스키와 보안 액세스키 2개를 사용하여 통신하게 된다. image push 및 pull이 자유로운 특징이 있다. Elastic Container Registry가 뜨지 않으면 Elastic Container Service를 들어가면 나온다. Registry 생성하기 레지스트리를 생성하여, ECR URL이 뜨게되고, IAM에 등..