Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기

올리브영 커머스 서비스 개발팀은 Next.js 기반의 모던 아키텍처로 전환하며 단위 테스트를 강화하는 과정에서 여러 기술적 난관에 직면했습니다.

기존에는 axios-mock-adapter나 nock을 사용하거나, Next.js 노드 서버를 이용해 직접 Mock API를 구축했습니다. 하지만 이 방식은 다음과 같은 문제를 야기했습니다.

• 코드 중복 및 유지보수 어려움: 유사한 API 모의 코드가 여러 파일에 산재하여 테스트 작성이 번거로워짐
• 개발 병목 현상: 백엔드 API 개발 완료 전까지 프론트엔드 개발이 대기 상태에 머무는 유휴 시간 발생
• 운영 및 빌드 이슈: Mock API 주소를 실제 서버 주소로 변경하는 과정에서의 휴먼 에러, 그리고 빌드 시 Mock 데이터가 포함되어 빌드 사이즈가 커지는 문제

이러한 문제를 해결하기 위해 Postman Mock Server 등 다양한 오픈소스 라이브러리를 리서칭하며 최적의 대안을 모색했습니다.