MSW는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리로, 개발자들이 백앤드 없이도 API 호출을 시뮬레이션 할 수 있게 해줍니다. 이는 테스트 환경에서의 네트워크 요청 관리를 용이하게 하며 Service Worker API를 사용해 실제와 유사한 네트워크 환경을 구현합니다.
npm install msw -D
npx msw init public/ --save
npx msw init public/ --save 명령어를 실행하고 나면 public폴더 내부에 mockServicWorker.js라는 파일이 생기게 됩니다.
이 파일은 실제 서버로 보내는 요청이 있다면 이 mockServicWorker가 요청을 가로채 응답을 주며 마치 실제 서버에게 요청을 보내는 것처럼 보이게 해줍니다.
mockServicWorker의 경우 개발환경용 주소 따로, 실제 환경용 주소 따로 분기처리 할 필요 없이 실제 주소로만 데이터를 보내면 되고 개발 환경에서만 이 mockServicWorker를 활성화 시켜서 사용할 수 있다는 장점이 있습니다.
추가적으로 Next 자체가 내부적으로 구현되는 방식(브라우저, 서버) 때문에 (‣) Next.js 환경에서 MSW를 활용한 서버 측 모킹은 실질적 구현에 어려움이 있어 서버 측 환경 구현을 위해서는 express환경을 추가적으로 세팅을 해주어야 합니다.
npm i --save-dev @mswjs/http-middleware cors express @faker-js/faker
npm i --save-dev @types/express @types/cors
app 하위에 mock폴더를 생성한 후 browser.ts, http.ts, handlers.ts 파일을 생성해줍니다.
브라우저 환경에서의 mock세팅을 위한 파일입니다.