Next.js MSW 도입, 실전 문제 해결 꿀팁 대방출!
by DD
2년 전
조회수 2
Next.js 환경에서 MSW를 도입하여 API Mocking을 구현하고, 테스트 코드의 중복을 줄임
프록시 설정 및 URL 프리픽스 문제 등 실제 운영 환경에서 발생한 문제 해결
MSW 도입을 위한 핸들러 분리, 개발 환경 설정 등 실용적인 팁 제공
프록시 환경에서의 MSW 설정
Next.js의 프록시 설정으로 인해 MSW가 API 요청을 가로채지 못하는 문제가 발생했다. MockRestClient를 생성하여 환경에 따라 동적으로 API 주소를 변경하도록 구현했다. 따라서, 브라우저와 Node.js 환경 모두에서 MSW를 정상적으로 사용할 수 있게 되었다.
URL 프리픽스 문제 해결
올리브영 모바일 웹의 URL 프리픽스(/m/mtn)로 인해 MSW가 mockServiceWorker.js 파일을 찾지 못하는 문제가 발생했다. Service Worker의 Scope 설정을 변경하여 프리픽스 환경에서도 MSW가 동작하도록 수정했다. 결과적으로, MSW의 유연성을 확보했다.
MSW 효율적인 사용을 위한 팁
_app.tsx 파일에서 MSW 관련 코드를 분리하여 관심사 분리를 구현했다. NODE_ENV를 사용하여 개발 환경에서만 MSW가 실행되도록 설정했다. 또한, 핸들러 파일 분리 및 API 주소 기반의 핸들러 폴더 구조를 통해 코드의 가독성을 높였다.
