프론트엔드 개발 생산성을 높이는 Mock Service Worker (MSW) 활용 가이드

Mock Service Worker (MSW) 활용 가이드

핵심 기술

Mock Service Worker (MSW)는 프레임워크에 구애받지 않는 강력한 라이브러리로, 실제 백엔드 없이도 완벽한 프론트엔드 코드를 작성하고 테스트할 수 있도록 지원합니다. 서비스 워커를 통해 네트워크 레벨에서 HTTP 요청을 가로채고 모킹 응답을 반환하여 개발 생산성을 크게 향상시킵니다.

기술적 세부사항

• 목적: 백엔드 개발 완료 전, API 계약만 정의된 상태에서 프론트엔드 개발 또는 테스트 시, 백엔드 팀의 구현 지연 시, 또는 특정 테스트 시나리오를 위해 백엔드 데이터 제어가 필요할 때 유용합니다.
• 기본 원리: 서비스 워커가 네트워크 요청을 인터셉트하고, 정의된 모킹 핸들러와 일치하면 가짜 응답을 반환하며, 일치하지 않으면 실제 백엔드로 요청을 전달합니다.
• 설치: npm, yarn, bun 등 패키지 매니저를 사용하거나 HTML <script> 태그를 통해 설치할 수 있습니다.
  bash npm install msw --save-dev
• 서비스 워커 스크립트 생성: npx msw init <public_folder>/ --save 명령어로 서비스 워커 스크립트를 생성합니다.
• 설정: src/mocks 디렉터리에 handlers.ts 파일을 생성하여 API 핸들러를 정의하고, src/mocks/browser.ts에서 setupWorker를 이용해 워커를 설정합니다.
• 모킹 활성화: 개발 환경(import.meta.env.DEV)에서 worker.start()를 호출하여 모킹을 활성화합니다.
• API 모킹 예제:
  • GET /films: 영화 목록의 요약 정보를 반환합니다.
  • GET /films/:filmId: 특정 ID의 영화 상세 정보를 반환하거나, ID가 유효하지 않으면 400 에러를, 영화가 없으면 404 에러를 반환합니다.
  • 네트워크 오류 시뮬레이션: HttpResponse.error() 또는 특정 상태 코드와 메시지를 포함한 HttpResponse.json()을 사용합니다.
  • POST /films: 새로운 영화 데이터를 받아 데이터베이스에 저장하고 생성된 영화 정보를 201 상태 코드와 함께 반환합니다.
• 데이터 영속성: 페이지 새로고침이나 네비게이션 시 핸들러의 상태가 유지되지 않으므로, localStorage나 IndexedDB 사용이 권장됩니다.
• 추가 기능: 쿠키(cookies 객체 활용) 읽기, 검색 파라미터(URL 객체 활용) 처리, 실제 요청 프록싱(네트워크 요청 수정 또는 추적) 기능을 지원합니다.

개발 임팩트

MSW를 사용하면 프론트엔드 개발팀은 백엔드 의존성 없이 독립적으로 개발 및 테스트를 진행할 수 있어 개발 주기를 단축하고 병렬 개발을 촉진할 수 있습니다. 또한, 복잡하거나 재현하기 어려운 테스트 시나리오를 손쉽게 구현하고 디버깅할 수 있어 코드 품질을 향상시키는 데 크게 기여합니다.

커뮤니티 반응

• GitHub: 오픈 소스 프로젝트로 활발하게 관리되며, 다양한 기여와 이슈 트래킹이 이루어지고 있습니다.
• 실용성: 개발 커뮤니티에서 백엔드와 분리된 개발 환경 구축 및 테스트 효율성 증대를 위한 필수 도구로 널리 인정받고 있습니다.