[DOCS] MSW 적용하기

📝 개요

MSW의 개념 및 사용법에 대해 작성되었습니다.

📍 MSW 란?

MSW는 네트워크 요청을 모의(mock)하여 개발 및 테스트 환경에서 실제 API 요청을 대체할 수 있는 도구입니다.
프론트엔드 개발자는 백엔드 서비스가 준비되지 않아도 개발을 진행할 수 있으며, 테스트 환경에서 안정적인 API 응답을 사용할 수 있습니다.

📍 MSW 적용하기

1단계 : 설치
MSW를 개발 종속성으로 설치합니다.
```
npm install msw@latest --save-dev
```
2단계 : 핸들러 정의
요청을 가로채고 응답을 처리할 핸들러를 정의합니다. 현재 예시는 회원들의 리스트를 가져오는 mock 데이터 입니다.
```
// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';
```

export const handlers = [ http.get('/api/users', () => { return HttpResponse.json([ { id: '123', email: 'lee@abc.co', name: 'kim', role: 'TRAINER', }, { id: '1234', email: 'jay@abc.co', name: 'eun', role: 'TRAINER', }, { id: '12345', email: 'mar@abc.cok', name: 'usa', role: 'TRAINEE', }, ]); }), ];

- 3단계 : 브라우저 통합
> 브라우저에서 Mock Service Worker를 설정합니다.
- 우선 브라우저에 서비스 워커 등록
```typescript
npx msw init public/ --save

// src/mocks/browser.ts
import { setupWorker } from 'msw/browser';

import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

4단계 : 테스트 코드 작성
테스트 코드에서 Mock Service Worker를 사용하여 네트워크 요청을 모의합니다.
```
interface userType {
id: string;
name: string;
email: string;
role: string;
}
```

function App() { const [peopleData, setPeopleData] = useState<userType[]>([]);

useEffect(() => { const fetchData = async () => { try { const res = await axios({ method: 'get', url: '/api/users', }); console.log(res.data); if (res.status === 200) { setPeopleData(res.data); } } catch (error) { console.log(error); } }; fetchData(); }, []);

return ( <> {peopleData.map((item) => (

이름 : {item.name}

이메일 : {item.email}

role : {item.role}

  ))}
</>

); }

![image](https://github.com/TrainingDiary/training-diary-frontend/assets/156156862/f623e743-4b1f-4ab9-9470-e1c05de0a994)
콘솔에 해당 문구가 나오면 정상적으로 적용된 것입니다.

### 📍 트러블슈팅
- Problem
  - 개발 환경에서 Mock Service Worker (MSW)를 설정한 후, 프로젝트에서 사용 중인 이미지 및 폰트와 같은 정적 파일에 대한 요청 시 경고 메시지가 발생합니다.
  ```less
  [MSW] Warning: intercepted a request without a matching request handler:
    • GET /src/assets/icons/bell.svg

Reason
- MSW는 설정된 핸들러와 일치하지 않는 모든 네트워크 요청을 인터셉트하여 경고 메시지를 표시합니다.
- 이미지, 폰트와 같은 정적 파일에 대한 요청이 핸들러로 설정되어 있지 않아 경고 메시지가 발생합니다.
Try to solve
- 정적 파일 요청을 무시하도록 핸들러를 추가하여 경고 메시지를 없애려 시도했습니다.

1) 정적 파일 요청을 무시하는 방법

// src/mocks/browser.ts
import { setupWorker } from 'msw/browser';
import { http, HttpResponse } from 'msw';

import { handlers } from './handlers';

export const worker = setupWorker(
  ...handlers,
  // 정적 파일 요청을 무시
  http.get('*/:staticFile*', () => {
    return new HttpResponse();
  })
);

2) icons 파일 요청을 처리하는 핸들러 추가

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  // 정적 파일 요청을 처리하는 핸들러 추가
 http.get('/src/assets/icons/:file', () => {
    return;
  }),
  http.get('https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/:file', () => {
    return;
  }),
];

1번 정적 파일 요청을 무시하도록 핸들러를 설정했으나, 경고 메시지는 사라져도 이미지 및 폰트 파일을 가져오지 못하여 제대로 페이지가 렌더링 되지 않는 현상이 발생하였고 2번 방법은 아직 MSW의 대한 학습이 부족하여 완벽히 해결 했다고 말씀드리기가 확신이 들지 않아 충분한 학습 후 수정하겠습니다.

📍 ETC

해당 내용은 MSW 공식 홈페이지(https://mswjs.io/docs/getting-started)를 참고한 내용들입니다. 아무래도 가장 자세히 나와있기에 참고를 많이 했습니다.

그리고 요청 드릴게 있는데, 해당 회원 리스트를 보여주는 내용을 간단하게 나마 구현 가능하다는 것을 보여주기 위해서 라도 트레이너의 트레이니 관리 리스트에서 보여주고 싶은데, 현재 branch에서 작성된 내용은 App.tsx에서 보여지는 내용입니다. 아직 트레이니 리스트를 보여주는 화면을 구성하지 않아서 트레이니 리스트 화면을 만들고 그 화면에 리스트를 mock 데이터로 삽입하고 싶은데, 양해 해주신다면 해당 코드는 다음 작업에서 리뷰 부탁 드려도 될지 답변 부탁 드리겠습니다.

TrainingDiary / training-diary-frontend