MSW 모킹 흐름을 활용한 React 프로젝트 개선 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *대상:** React 프론트엔드 개발자, API 테스트 및 UI 개발에 관심 있는 개발자
• *난이도:** 중급 (React 기초와 API 호출 경험 필요)

핵심 요약

• MSW(mock service worker)는 브라우저 서비스 워커 수준에서 네트워크 요청을 가로채는 방식으로, 실제 API 없이도 테스트 및 개발이 가능함
• Mock 데이터를 브라우저와 테스트 환경 모두에서 공유하여 UI 개발과 테스트 일관성 유지
• 에러 상태 시뮬레이션(타임아웃, 500 에러 등)을 통해 안정적인 UI 개발 가능
• 설치 및 설정 단계 포함: npm i msw, handlers.js 정의, setupWorker 서비스 워커 등록

섹션별 세부 요약

1. **MSW의 필요성**

• 백엔드 준비 미비, CORS 문제, 타이트한 일정 등으로 인한 프론트엔드 개발 차단 문제 해결
• 실제 API와 동일한 환경에서 모킹 데이터를 사용하여 테스트 가능
• 에러 시뮬레이션(타임아웃, 500 에러)을 통해 UI의 예외 처리 검증 가능

2. **MSW 흐름 설명**

• 브라우저 → PrivacyPolicy.jsx 컴포넌트에서 /v1/privacy-policy 요청
• MSW 서비스 워커 → 요청을 가로채고 handlers.js에서 정의된 모킹 핸들러 확인
• handlers.js → 모킹된 응답을 실제 서버 응답처럼 브라우저에 전달

3. **설정 단계**

• 패키지 설치: npm i msw
• 모킹 핸들러 정의: mocks/handlers.js 파일에서 http.get() 및 HttpResponse 사용
• 서비스 워커 설정: mocks/browser.js 파일에서 setupWorker 등록
• 환경 변수 설정: .env 파일에 VITE_ENABLE_MOCKING=true 추가
• main.jsx 수정: enableMocking() 함수를 통해 서비스 워커 시작

4. **테스트 환경 설정**

• 테스트 환경용 파일: mocks/node.js에서 setupServer 사용
• 테스트 시 모킹 적용을 위해 server 인스턴스 생성

결론

• MSW는 실제 API 의존 없이 UI 개발 및 테스트를 가능하게 함
• handlers.js 파일 정의와 VITE_ENABLE_MOCKING 환경 변수 설정은 필수
• 에러 상태 시뮬레이션(ctx.delay(), 500 에러 등)을 통해 UI의 로드 상태 및 오류 처리 검증이 가능함