[React] MSW(Mock Service Worker) 2.0을 아시나요?

1. 인사

안녕하세요. 이번에는 MSW 2.0에 대해 react에서는 어떻게 적용해야 하는지 알려드리겠습니다.
굳이 MSW 2.0 적용법을 블로그 글로 적은 이유는 2023.10.23에 2.0으로 Update를 했더군요. 현재 글을 쓰는 시점은 2023.11.15 입니다. Update 시점이 글을 쓰는 시점과 별 차이가 없는 만큼 따끈따끈한 정보라는 이유 + 이에 따라 MSW 적용 방식이 약간 바뀜으로써 제가 헤맸기 때문에 정리하기 위해서 글을 쓰게 되었습니다.

---

2. MSW ?

Mock Service Worker의 줄임말로, MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다.

이러한 API Mocking Library를 통해 프론트엔드 개발자는 백엔드 API가 개발되기 전에 프론트 자체에서 가짜 API를 통해 ui를 개발해 볼 수 있겠습니다.
저 또한 현재 프로젝트에서 백엔드 API 개발 진행이 늦춰질 것을 알고서 백에 영향을 최대한 받지않고 개발을 진행하고자 이러한 library를 도입하게 되었습니다.

---

3. MSW 2.0??

현재 진행중인 팀 프로젝트에 MSW를 적용하려고 보니, 최신 버전이 있었고 이는 기존 버전과 차이가 있음을 알게 되었습니다. 이에 따라 공식 문서만을 참고하여 react에 적용하여 보았습니다.(+typescript)

MSW 2.0 설명

---

4. MSW 2.0 적용

4.1 MSW library 설치

npm install msw --save-dev

4.2 MockServiceWorker 생성

npx msw init public/ --save

4.3 Setup

// src/mocks/browser.ts
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers)

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw'
 
export const handlers = [
  http.get('/api/users', ()=>{
    return HttpResponse.json([
      {
        id : 1,
        name : "Ham"
      }
    ])
  })
]

저는 test가 목적이기 때문에 매우 간단하게 1개의 json형식만을 front가 잘 받는지 확인해보도록 하겠습니다.

handler에서 사용되는 http, HttpResponse와 관련된 메소드는 공식문서를 참고하시기 바랍니다.
http standard methods
HttpResponse standard methods

4.4 Conditionally enable mocking

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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') as HTMLElement).render(
    <React.StrictMode>
      <App />
  </React.StrictMode>
  )
})

Typescript를 사용하였으므로 ReactDOM.createRoot(document.getElementById('root') as HTMLElement) 부분에서 as HTMLElement가 붙는 점 참고 바랍니다.
Typescript 미적용 시 as HTMLElement 빼주시면 됩니다.

4.5 Front

    useEffect(()=>{
        fetch("/api/users")
        .then(res=>res.json())
        .then(data=>console.log(data))
    }, [])

fetch를 통해 Mocking API를 잘 받아오는지 console에서 확인해보도록 하겠습니다.

4.6 Confirmation

적용하고 npm start 진행 시,

이처럼 console창에 Mocking enabled가 보이는 것을 확인할 수 있습니다.
만약 뜨지 않는다면 공식문서 참고 및 질문 바랍니다.
코린이라 답변이 힘들수 있다는 점 양해 바랍니다.
MSW 2.0 Getting Started

제가 만든 Mocking API도 잘 받아와지는군요.
해당 글에 대한 피드백은 언제나 환영입니다.
감사합니다.