[feat] MSW를 이용한 분석 차트 페이지 API 통신 구현

[Hjwoon]

🚀 Summary

요구 사항

• 프로젝트 내에서 MSW를 설정하여, 개발 및 테스트 환경에서 실제 서버의 응답을 모방할 수 있도록 해야 함.
• GET, POST, DELETE 등 다양한 HTTP 메소드를 사용하는 API 통신을 가짜 데이터와 함께 시뮬레이션해야 함.
• 가짜 데이터는 현재 프로젝트의 UI 컴포넌트에 적합하게 조정되어야 함.

개발 방법

0. 참고할 블로그

• https://velog.io/@easyhoon119/React%EC%97%90%EC%84%9C-MSW-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

1. MSW 설치 및 설정

   • 프로젝트에 MSW를 설치:

     npm install msw --save-dev
     

   • 서비스 워커 파일을 public 디렉토리에 생성하고, mocks 폴더 내에서 핸들러 정의.

2. 핸들러 정의

   • 요청을 가로채고 응답할 데이터 정의. 예를 들어, 사용자 정보를 요청하는 API 핸들러는 다음과 같이 구성될 수 있음:

     import { rest } from 'msw';
     
     export const handlers = [
       rest.get('/api/users', (req, res, ctx) => {
         return res(
           ctx.status(200),
           ctx.json({
             users: [{ id: 1, name: '홍길동' }, { id: 2, name: '김철수' }]
           })
         );
       }),
       rest.post('/api/users', (req, res, ctx) => {
         const newUser = req.body;
         return res(
           ctx.status(201),
           ctx.json(newUser)
         );
       }),
     ];

3. 서비스 워커 등록

   • 개발 모드에서 서비스 워커를 등록하여 MSW가 네트워크 요청을 가로챌 수 있도록 함:

     if (process.env.NODE_ENV === 'development') {
       const { worker } = require('./mocks/browser');
       worker.start();
     }

4. 테스트 및 검증

   • 개발 서버를 실행하고 네트워크 탭을 통해 MSW가 API 요청을 성공적으로 가로채고 있는지 확인.
   • UI 컴포넌트가 가짜 데이터를 정상적으로 렌더링하는지 테스트.

예상 결과

• 실제 백엔드 서버 없이도 API 요청을 테스트할 수 있음.
• 개발 및 테스트 속도가 향상됨.

---

📝 To Do

• MSW 라이브러리를 프로젝트 설치.
• 서비스 워커 파일을 public 디렉토리에 설정하고, mocks/handlers 파일에 API 경로와 응답 정의.
• 개발 환경에서만 서비스 워커를 활성화하여 MSW가 네트워크 요청을 가로챌 수 있도록 함.
• 가짜 API 응답이 프론트엔드 컴포넌트에 정상적으로 표시되는지 확인.

---

🏞️ images