MSW(Mock Service Worker) 세팅 방법

백엔드 API가 준비되기 전에 프론트엔드 개발을 진행하기 위해 MSW를 세팅하는 과정이다. MSW v2 API 기준이다.

1. 설치

npm i -D msw

2. 폴더 구조

src/
└─ mocks/
   ├─ browser.ts
   └─ handler.ts

3. browser.ts

import { setupWorker } from 'msw/browser';
import { handlers } from './handler';

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

4. handler.ts

가로챌 요청 URL과 돌려줄 응답을 정의한다.

import { http, HttpResponse } from 'msw';

export const handlers = [
  http.post('MY_URL', async () => {
    return HttpResponse.json({
      code: 0,
      message: '성공',
      data: {
        fail: 0,
        total: 1,
        success: 1,
        records: [
          {
            sectionId: generateRandomId(),
            tel: generateRandomPhoneNumber(),
            userNm: generateRandomUserName(),
            result: 'Success',
            id: generateRandomId(),
          },
        ],
      },
    });
  }),
];

5. worker 스크립트 생성

public/에 mockServiceWorker.js를 만든다.

npx msw init public/

6. service worker 등록

개발 환경에서만 worker를 시작하고, 시작이 끝난 뒤 앱을 마운트한다.

Vue:

// main.ts
async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') return;

  const { worker } = await import('./mocks/browser');
  return worker.start();
}

const app = createApp(App);

enableMocking().then(() => {
  // app.use(...)
  app.mount('#app');
});

React:

// main.tsx
async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') return;

  const { worker } = await import('./mocks/browser');
  return worker.start();
}

enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
});