성연커밋 : )

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에 등..

Dockerfile 이란? DockerImage를 생성하기 위한 스크립트로, 명령어를 토대로 Dockerfile을 작성한다. 작성 후, 빌드하면 Docker는 Dockerfile에 나열된 명령문을 차례대로 수행하여 DockerImage를 생성해준다. From 베이스 이미지 : 어느 이미지에서 시작할 건지 의미 RUN 새로운 레이어에 명령어를 실행하고, 새로운 이미지 생성 RUN 명령을 실행할 때마다 레이어가 생성되고 캐시된다. WORKDIR 작업 디렉토리를 지정한다 해당 디렉토리 없을 시 새로 생성 EXPOSE Dockerfile의 빌드로 생성된 이미지에서 열어줄 포트를 의미한다. 호스트 머신과 컨테이너의 포트 매핑시에 사용된다. USER 이미지 실행 계정 기본적으로 root에서 실행 COPY / ADD..

docker에 대해서 항상 들어만보지, 제대로 해본적이 없었다. 또한, docker는 백엔드에서만 필요하다고 생각하였다. 하지만, 이번에 docker를 활용하여 배포로 변경을 하기 위해 프론트엔드도 docker에 대해 공부해보면 좋겠다고 생각들었다. Docker란 무엇일까? 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 서버에서 이야기하는 컨테이너는 다양한 프로그램, 실행환경을 컨테이너로 추상화하고 동일한 인터페이스를 제공하여 프로그램의 배포 및 관리를 단순하게 할 수 있다. 쉽게 말해, 가벼운 용량의 가상 컴퓨터이다. Docker의 메인인 컨테이너와 이미지에 대해서 알아보자 컨테이너란? 격리된 공간에서 프로세스가 동작하는 기술이다. 가상화 기술의 하나지만 기존 방식과는 차이가 있다. 기존의 가상화 방식은..

나는 동아리에서 next를 이용하여 프로젝트를 한 경험이 있다. 분명, next로 로그인 관련해서 만들어볼 때 쿠키 값을 이용해본적이 있지만, 해당 프로젝트를 진행할 적에, 내가 정말 많이 부족한 상태였고 첫 프로젝트였기 때문에 다른 개발자분께서 세팅을 많이 해주셨다. 그래서, 이번에 회사에서 React로 이루어진 프로젝트를 Next로 마이그레이션 작업을 진행하면서 다른 팀원 개발자분의 Next 보일러플레이트에 리액트 프로젝트를 라우트별로 페이지화를 먼저 진행하였다. 하지만, 이 부분에서 react에서는 변수로 cookie값을 가지고 오면, 바로 사용할 수 있었다. (코드 참고) 아래 코드의 쿠키는 react-cookie를 이용해도 되고, dom에서 직접 cookie의 값을 가지고오도록 설정해줘도 된다...

회사를 다닌지 어느덧 4개월이다. 그 동안에 수습기간도 있었으며, 정규직으로 전환이 되었다. 직장인이 되기 전, 주변 사람들을 보며 회사를 다니면서 동아리도하고, 외주를 하시는 분들을 봤다. 또한, 나도 인턴으로 회사를 다니면서 회사 끝나고 집와서 동아리에서 진행하던 스터디를 들었던 적이 있었기 때문에, 취업을 했더라도 열심히 살아야지! 생각했었다. 블로그도 쓰고, 개인적으로 프로젝트를 하며 나를 성장하고 싶었다. 하지만, 회사에 들어가고 회사를 적응하고, 취준기간동안 힘들었었기 때문에 공부와는 거리가 멀어졌다. 23년 1분기 기간중에선, 회사에서 진행하는 서비스의 major update날도 있었다. 처음 major update이었고, 아직 입사한지 얼마 되지 않아 잘 해낼 수 있을까?라는 걱정이 있었다..