올리브영 테크블로그Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기
올리브영이 Next.js 프로젝트에 MSW(Mock Service Worker)를 도입해 테스트 코드 중복 제거, 백엔드 API 대기시간 단축, Mock API 주소 실수 배포 방지
AI 요약
Context
Spring MVC에서 Next.js로 마이그레이션하면서 프론트엔드 단위 테스트 도입 시 axios.get.mockImplementation 방식으로 각 테스트마다 중복된 Mock API 코드를 작성하게 됨. 백엔드 API 개발 완료까지 프론트엔드 대기 시간 발생으로 프로젝트 일정 지연 문제 발생. Next.js 노드 서버 기반 Mock API 운영 시 Mock API 주소를 바꾸지 않고 배포하는 휴먼 에러와 빌드 파일에 Mock API 코드 포함으로 인한 번들 사이즈 증가.
Technical Solution
- Service Worker를 활용한 HTTP 요청 가로채기: 브라우저에서 실제 네트워크 요청을 가로채 Mocking된 응답 반환
- 테스트/개발 환경에서만 MSW 활성화: 번들 빌드 시 MSW 코드 자동 제외, 프로덕션 환경 영향 없음
- 핸들러 파일 분리 관리: setupServer/setupWorker 코어 파일과 별도로 API별 핸들러 작성, 코어 파일 복잡도 감소
- API 주소 기반 폴더 구조: /localhost/test/verification 형태로 Mock 핸들러 조직화해 탐색 용이성 개선
- 모든 핸들러를 handlers.ts에 통합: 개별 핸들러 배열을 하나의 파일에서 관리해 setupServer/setupWorker 변경 최소화
Key Takeaway
Next.js 기반 프론트엔드 프로젝트에서 MSW를 도입하면 테스트 코드 중복을 제거하고 백엔드 개발 대기 시간을 병렬화할 수 있으며, 환경별 조건부 MSW 적용으로 프로덕션 빌드 사이즈 증가 없이 Mock API 운영 휴먼 에러를 근본적으로 차단할 수 있다.
실천 포인트
Next.js로 프론트엔드를 개발하는 팀에서 각 테스트마다 axios.get.mockImplementation으로 중복되는 코드를 작성하고 있다면, MSW를 도입해 Service Worker로 실제 HTTP 요청을 가로채고 백엔드 API 개발을 기다리지 않고 병렬로 개발할 수 있다. 추가로 환경 변수로 테스트/개발 환경에서만 MSW를 활성화하고 프로덕션 빌드에 Mock API 코드가 포함되지 않도록 구성하면 배포 휴먼 에러와 번들 사이즈 증가 문제를 동시에 해결할 수 있다.