잡다하다

개요 로컬과 개발서버에서 통신하는 백엔드 서버의 URL이 다름에 따라 환경설정 파일을 분리하는 작업을 env-cmd 라이브러리를 사용하여 해보았다. 설치 아래 명령어로 env-cmd를 설치한다. npm install env-cmd 사용 사용법은 간단하다. package.json에서 scripts를 설정에 따라 분리한다. "scripts": { "dev": "env-cmd -f .env.local next dev", "build": "next build", "build:dev": "env-cmd -f .env.dev next build", "start": "next start", "start:dev": "env-cmd -f .env.dev next start", "lint": "next lint" },..

개요 개발이 완료된 프로젝트를 AWS에서 배포를 하기 위해 찾아보던 중 pm2 라이브러리를 활용해서 서비스를 배포하는 방법에 대해 알게 되었고 이를 기록해보았다. 설치 아래 명령어로 pm2를 설치한다. npm install pm2 실행 프로젝트를 build하고, 압축하여 서버에 올린 후 배포하는 시나리오이다. 방장의 프로젝트는 local서버에서 통신하는 백엔드 서버 URL과, AWS 개발서버에서 통신하는 백엔드 서버 URL이 다르기 때문에 .env.local / .env.dev로 구분되어 있고, build 명령어도 package.json으로 분리해두었다. 자세한 설명은 env-cmd 라이브러리 활용에 대한 글을 참고하자. [NEXT.JS] env-cmd로 설정파일 분리하기 개요 로컬과 개발서버에서 ..

개요 프론트엔드 개발자라면 서버와의 API 요청을 개발할 때, 백엔드 개발자가 API개발이 완료되지 않은 시점에 테스트가 필요할 수 있다. 이에 따라 실제 API 통신 대신 정해진 규격에 맞는 가짜 데이터를 통해 API 개발을 쉽게 할 수 있는 MSW라는 라이브러리를 사용해봤다. 설치 터미널에서 아래 명령어를 통해 쉽게 설치할 수 있다. npm install msw 사용법 NEXT.JS 프로젝트 src 폴더 하위에 mocks 폴더를 생성한다. 폴더에는 3개의 파일을 생성한다. browser.ts 브라우저 환경 설정 파일 import { setupWorker } from 'msw/browser'; import { handler } from './handler'; export const worker = se..