MSW Setup

[Hira-Yuki]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

API 개발이 진행되는 동안 테스트를 위한 MOCK API Service를 제작하고자합니다. 이는 개발 병목을 최소화하고 빠르게 개발 단계를 진행하기위해 필요합니다.

Describe the solution you'd like A clear and concise description of what you want to happen.

테스트를 위해 코드를 갈아끼우지 않아도 되고 최대한 실제 환경과 비슷한 상태를 유지하고 싶습니다.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

MSW Setup 해서 브라우저에서 API 요청을 가로채 테스트용 모의 응답을 받을 수 있도록 합니다.

Additional context Add any other context or screenshots about the feature request here.

[Hira-Yuki]

MSW(Mock Service Worker)란 ? 서버를 향한 실제 네트워크 요청을 가로채서 모의 응답을 보내주는 브라우저 및 Node.js 용 API 모킹 라이브러리입니다. MSW를 사용하면 직접 Mock Server를 구현하지 않고도 네트워크 수준에서 Mock API를 만들 수 있습니다. 또한 소스코드 수정 없이 Mocking이 필요한 환경에서만 MSW instans를 실행하여 API Mocking을 적용할 수 있습니다. 이러한 기능은 Service Worker를 이용해 HTTP 요청을 가로채는 것으로 실현할 수 있습니다.

Service Worker API

MDN 문서에서는 Service Worker를 다음과 같이 정의합니다.

서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다. 출처: MDN - Service Worker API

서비스 워커는 워커 맥락에서 실행되기 때문에 DOM에 접근할 수 없습니다. JavaScript와는 다른 스레드에서 동작하므로 연산을 가로막지 않습니다(논 블로킹). 서비스 워커는 온전히 비동기적으로 설계됐으며, 그로 인해 동기적 XHR이나 웹 저장소 등의 API를 서비스 워커 내에서 사용할 수 없습니다.

서비스 워커는 보안 상의 이유로 HTTPS에서만 동작합니다. 네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 굉장히 취약하기 때문입니다. 또한 Firefox의 사생활 보호 모드에서 Service Worker API에 접근할 수 없습니다. (IE 미지원)

MSW 작동 방식(브라우저 기준)

• MSW 라이브러리를 설치하면 브라우저에 Service Worker를 등록한다.
• 브라우저에서 이루어지는 네트워크 요청을 Service Worker가 가로챈다.
• 가로챈 요청을 복사헤 클라이언트 사이드에 있는 MSW 라이브러리에 보낸다.
• 등록된 핸들러를 통해 Mocked response을 제공 받는다.
• 제공 받은 Mocked response을 브라우저에게 그대로 전달한다.

[Hira-Yuki]

installation

• msw 라이브러리를 설치합니다.

  yarn add msw --dev

• 서비스 워커에 msw 등록 public/ 폴더에 파일을 추가해야하는데 아래 명령어로 생성할 수 있다.

  npx msw init public/ --save

• src/mocks/browser.ts 파일을 생성해서 worker 설정

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

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

- `src/mocks/handler.ts` 파일을 생성하여 Mocking 데이터 전달
```ts
// src/mocks/handler.ts
import { http, HttpResponse } from 'msw';

const allPosts = new Map();

export const handlers = [
  http.get('/posts', () => {
    // Construct a JSON response with the list of all posts
    // as the response body.
    return HttpResponse.json(Array.from(allPosts.values()));
  }),

  // ...the other request handlers.
];