TRACK1 리팩토링 이야기, MSW로 Mocking하기

MSW란?

msw 는 Mock Service Worker의 줄임말이다.

service worker를 사용하여 네트워크 요청을 가로채 해당 요청에 대한 모킹 할 수 있게 해주는 라이브러리이다.

따라서, MSW로 Mocking을 하면 서버에서 API를 받지 않더라도 프론트엔드단에서 설정을 통해 백앤드 API와 네트워크 통신하는 것과 크게 다르지 않게 작성할 수 있다.

  1. 설치

yarn add msw -D

  1. src/mocks 폴더 안에 handler.ts파일 생성

  2. handler.ts 내부에 api 응답 mocking 코드 작성

  3. 서비스워커 설정을 위한 명령어

npx msw init public/ --save

  1. 브라우저에서 서비스 워커 실행 설정을 위해 src/mocks/browser.ts 파일 생성 후 코드 작성

import { setupWorker } from 'msw';
import { handlers } from './handlers';
​
export const owrker = setupWorker(...handlers);
  1. 서비스 워커 실행 index.ts에서
   if (process.env.NODE_ENV === 'development') {
	// develop 환경에서만 사용
    const { worker } = require('./mocks/browser');
    worker.start();
}

or

import { worker } from "./mocks/browser"; 
if (process.env.NODE_ENV === "development") {
  worker.start();
}

[완료] image