chore: MSW 적용

[jee-woo]

⭐ 개요

MSW(Mock Service Worker)를 도입하여 프론트엔드 개발 단계에서 백엔드 API를 모킹할 수 있는 환경을 구축합니다. 이를 통해 API 개발 의존성을 줄이고 독립적인 UI 테스트를 가능하게 합니다.

📋 작업사항

• MSW 의존성 추가 및 설정
  • package.json에 msw 라이브러리를 추가했습니다.
  • start:msw 스크립트를 추가하여 MSW가 활성화된 상태로 앱을 시작할 수 있도록 했습니다.
  • 기존 proxy 설정을 제거하고 msw의 서비스 워커 디렉토리를 설정했습니다.
• MSW 초기화 로직 구현
  • src/index.js에 REACT_APP_MSW 환경 변수가 'enabled'일 때만 MSW를 활성화하는 enableMocking 함수를 추가했습니다.
  • public 폴더에 MSW 서비스 워커 파일(mockServiceWorker.js)을 추가했습니다.
• API 모킹 핸들러 작성
  • src/mocks/handlers.js에 애플리케이션에서 사용하는 모든 API(멤버, 기록, 영수증 등)에 대한 모의 응답 핸들러를 구현했습니다.
  • src/mocks/browser.js에서 정의된 핸들러들을 사용하여 MSW 워커를 설정했습니다.
• 기타
  • ReactGA 초기화 로직을 임시로 주석 처리했습니다.
  • test.md 파일을 추가했습니다.

😉 참고사항

• 로컬에서 MSW를 활성화하여 개발하려면 npm run start:msw 명령어를 사용해주세요.
• 모든 API 요청은 src/mocks/handlers.js에 정의된 대로 모의 응답을 반환합니다.

💻 스크린샷

Closes #{이슈 번호}

📝 리뷰 의견 (Review Feedback)

전반적으로 MSW(Mock Service Worker) 도입을 통해 프론트엔드 개발 환경이 개선된 것을 확인했습니다. package.json 업데이트, mockServiceWorker.js 추가, src/index.js의 MSW 활성화 로직, 그리고 src/mocks/handlers.js에 정의된 다양한 API 모킹 핸들러들을 통해 API 개발 의존성을 줄이고 독립적인 테스트가 가능해질 것으로 기대됩니다. 잘 작업해주셨습니다!

몇 가지 개선점 및 질문 사항이 있습니다:

• package.json - proxy 설정 제거: 이 변경 사항이 PR 설명에 명확히 언급되어 있는지 확인해주세요. MSW 도입으로 인한 변경이라면 좋습니다.
• package.json - scripts 블록 순서 변경: 기존 프로젝트 컨벤션과 일치하는지 확인해주시면 좋을 것 같습니다.
• src/index.js - ReactGA.initialize 주석 처리: 프로덕션 빌드에서는 어떻게 처리될 예정인가요? MSW 활성화 여부에 따라 조건부로 처리하는 방안도 고려해볼 수 있습니다.
• src/mocks/handlers.js - 모의 응답 데이터: 현재 정적으로 설정되어 있습니다. 다양한 테스트 시나리오(예: 에러 응답, 빈 목록, 다른 사용자 역할)를 위해 좀 더 동적인 데이터나 여러 케이스를 고려해볼 수 있을까요?
• test.md 파일: 새로 추가되었는데, 최종적으로 저장소에 유지될 예정인가요? 임시 파일이라면 PR에서 제거하는 것이 좋습니다.