TIL - MSW 활용하기

정길웅·2024년 3월 5일

TIL

목록 보기

6/9

최근 업무에 진전이 없었다. 저번주에 끝냈어야 할 백엔드 api 명세서가 오늘까지도 전달이 되지 않았기 때문이다. 어케하지..어케하지...하며 발만 동동 구르고 있을 때 next.js 수업에서 MSW를 소개해주었다.

섹션3 제목부터 딱 내가 원하던 영역이었다. 색션 1, 2 를 스킵하고 바로 색션3으로 건너뛰었다.

MSW란?

MSW는 Mock Service Worker의 줄임말로 브라우저와 Node.js 환경에서 목업 api를 만들어주는 라이브러리다. MSW를 활용하면 브라우저로부터 나가는 요청이나 들어오는 응답을 중간에서 감시하거나 변조할 수 있고 일부러 에러를 만들어 내기도 쉬워 에러 발생 시 처리를 유연하게 만들 수 있다.

MSW 설치

우선 필자는 리액트 환경에서 진행했음을 미리 알린다.

npm i -D msw
npx msw init public/ --save

일단 노드에서 msw를 설치하고 public 폴더에 msw init 파일을 만든다. 이후 mocks폴더를 생성하여 browser.ts와 handlers.ts파일을 각각 생성해준다. 각 파일의 생김새는 다음과 같다.

// 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'
import { marketDummyData, marketDummyData2, productDummyData } from './data'

export const handlers = [
  /** 예시 */
  http.get('/hello', ()=> {
	return HttpResponse.text("hello world!!!")
  }),
]

// src/index.tsx
/** 여러 파일들을 import 한 후 */
async function enableMocking() {
  const { worker } = await import('./mocks/browser')
  return worker.start()
}

enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <React.StrictMode>
    	<App />
    </React.StrictMode>
  )
})

이제 Mocking enabled가 나오기를 기다리고 있는데 그 대신 오류가 발생했다.

오류 발생

이 에러가 어떤 문제인가 하고 조사를 해 보니 graphql 의 문제라고 한다. MSW는 기본적으로 graphql에 의존적이기 때문에 버전을 16.7.1로 고정시켜야한다고 했다. 스택오버플로우에서 시키는 대로 작업을 거쳤다.

//package.json
{
  "overrides": {
    "graphql": "16.7.1"
  }
}

THUNDER CLIENT와의 연계?

나는 api를 활용할 때 주로 VSC의 애드온인 THUNDER CLIENT를 주로 사용하는 편이다. 포스트맨보다 훨씬 빠르고 직관적이기 때문이다. 그런데 MSW와의 연계는 되지 않는 것 같다. 브라우저 환경에서 동작하는 API도 THUNDER CLIENT에서는 애꿎은 에러만 나올 뿐이었다.

이 부분은 검색해도 나오지 않아 다음에 확인하기로 했다.