MSW 도입 배경과 과정

올리브영 프론트엔드팀은 Spring MVC에서 Next.js로 전환 중이며, 이 과정에서 단위 테스트를 강화하고자 MSW(Mock Service Worker)를 고려하게 되었습니다. 특히 API 모의 처리의 필요성과 함께 불필요한 코드 중복, 개발 일정 문제 등이 발생했습니다.

주요 고민 사항

• 코드 중복 증가: 테스트 코드 작성 시 Axios 모킹으로 인해 중복 코드가 발생했습니다.
• 개발 일정 지연: 백엔드 개발 지연으로 인해 프론트엔드 연동이 어려워지는 문제가 있었습니다.
• Mock 데이터 관리: 매번 Mock API를 만들고 관리하는 것이 번거로웠습니다.

이러한 문제를 해결하기 위해 MSW를 도입하였으며, MSW는 실제 HTTP 요청을 브라우저에서 가로채어 모의 응답을 반환하는 기능을 제공합니다.

MSW 도입 과정

MSW를 프로젝트에 적용하기 위해 패키지를 설치하고, 서비스 워커 파일을 생성하여 핸들러를 설정했습니다. 하지만, 프록시 설정으로 인해 API 주소가 올바르지 않는 등 여러 시행착오를 겪었습니다. 최종적으로 MSW의 도입으로 테스트 환경이 개선되고, 유연하게 Mock API를 사용할 수 있게 되었습니다.