프론트엔드
Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기
두줄요약
Next.js 전환 과정에서 단위 테스트와 API Mocking의 중복·관리 문제를 해결하기 위해 MSW 도입을 검토했습니다. 브라우저와 SSR 환경의 URL 차이를 보정하는 클라이언트를 만들어 프록시 이슈에 대응했습니다.
문제 상황
- Next.js 전환과 함께 단위 테스트용 네트워크 Mocking 필요성 증가
- 기존 axios mock 방식의 중복 코드, 유지보수 부담, 데이터 모의 작업 피로감
- 개발 일정 지연과 Mock API 주소 관리, 빌드 사이즈 증가 문제
원인 분석
- 테스트마다 개별 Mock 코드를 작성해 중복과 산재 발생
- 백엔드 API 대기 시간으로 프론트엔드와 QA 일정 병목 발생
- Next.js rewrites 프록시와 SSR 환경 차이로 Mock URL 불일치 발생
해결 방법
- 브라우저와 노드 환경 모두에서 요청을 가로채는 MSW 도입 검토
- Postman Mock Server, Nock 등과 비교해 운영성과 공유성 측면에서 선택
- 환경별 URL을 정규화하는 MockRestClient를 만들어 프록시 이슈 대응