vite 기반의 React 프로젝트에서 msw 를 이용하여 모킹 서비스 만들기

우선 모킹 서비스를 이용하는 경우는 프론트엔드가 백엔드의 api 가 개발될 때 까지 계속 기다려야하는 문제들이 발생하였고 프론트엔드가 먼저 백엔드의 api 를 설계 또는 개발하여 선작업을 할 수 있도록 합니다.

 

vite 기반의 React 프로젝트이며, msw(mock service worker) 를 적용하여 모킹 서비스를 만드는 과정을 단계별로 설명하겠습니다.

시작

1. msw 설치

npm install msw --save-dev

 

2. msw 서비스 워커 생성하기

npx msw init public/ --save

 

3. browser mock 생성하기

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

export const worker = setupWorker(...handlers)

 

4. 모킹 핸들러 생성하기

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

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json({
      id: '1',
      firstName: 'lee',
      lastName: 'joo'
    })
  })
]

 

5. 개발 환경에서 msw 활성화

아래 셋팅시 msw 에서 의도하지 않는 요청이 가로채지는 경우가 발생합니다.

onUnhandledRequest 를 사용해서 특정 요청에 경로만 처리하도록 설정하여야 합니다.

우리는 /api/ 가 없는 모든 요청은 가로채서 없애버립니다!

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'

import router from '@/router.jsx'

async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }

  const { worker } = await import('./mocks/browser.js')

  return worker.start({
    onUnhandledRequest: (request, print) => {
      if (!request.url.includes('/api/')) {
        console.log('/api/ 가 포함되지 않은 요청 url', request.url)
        return
      }

      // 그 외의 처리되지 않은 요청에 대해서는 경고 출력
      print.warning()
    }
  })
}

// js 용
enableMocking().then(() => {
  const rootElement = document.getElementById('root')
  if (rootElement) {
    ReactDOM.createRoot(rootElement).render(
      <React.StrictMode>
        <RouterProvider router={router} />
      </React.StrictMode>
    )
  }
})

// ts 용
enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>
  )
})

 

이제 개발버전에서 서버를 실행해서 api 를 호출해봅시다.

또한, 제대로 설정되었다면 아래와 같이 애플리케이션에 Service workers 에 등록된 상태를 볼 수 있습니다.!