[FE] MSW 사용하여 API Mocking 하기

KoSH·2024년 4월 3일

스터디에서 연구실 스터디 홈페이지 만들기 사이드 프로젝트를 진행하던 중 firebase 로 서버가 구현되기 전에 구현하는 데에 제한이 생겨 이 문제를 어떻게 해결할까 하다가 msw 를 알게되어 사용해보았다.

Introduction

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

프론트엔드 개발 과정에서 백엔드와의 협업은 필수이다. 그 과정에서 백엔드에서 API 개발이 늦춰진다면 프론트엔드 개발에도 지장을 미칠 것이다.
그렇게 되면, 프론트엔드 개발 기간이 뒤로 조금씩 밀릴 수도 있고, 개발에 차질이 생길 수도 있다.

이러한 문제를 해결하기 위해 방안을 찾아보다가 MSW 라는 API mocking 라이브러리를 도입해보기로 했다.

프로젝트는 vite 를 통해 react 프로젝트를 구성하였다.

MSW 사용기

설치

yarn add msw@latest --save-dev

우리 프로젝트는 yarn 을 사용하고 있기 때문에 위와같이 msw 를 설치해준다.

handler 작성

// src/mocks/membersHandler.js

import { http, HttpResponse } from 'msw';

const membersHandler = [
	http.get('/members', () => {
		return HttpResponse.json([
			{ name: 'kosh', department: '정보융합학부', roles: ['#Front-End', '#AI'] },
			{ name: 'kosh', department: '정보융합학부', roles: ['#Front-End', '#AI'] },
		]);
	}),
];

export default membersHandler;

여러 블로그들은 참고하던 중 계속 오류가 나서 공식문서를 찾아보았더니 msw 가 새로운 버전으로 업데이트함에 따라 http 와 HttpResponse 를 사용하여 mock API 를 작성하는 것을 확인하였다.

handler.js

//src/mocks/handler.js

import membersHandler from './membersHandler';
import scheduleHandler from './scheduleHandler';

export const handler = [...membersHandler, ...scheduleHandler];

코드를 작성하다보니 API mocking 을 위한 handler 가 많아졌는데 가독성을 위해 handler.js 파일에서 각각의 handler 들을 모아주었다.

browser.js

//src/mocks/browser.js

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

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

setupWorker 를사용하여 정의한 handler 들을 등록해주었다.

enableMocking

async function enableMocking() {
	if (import.meta.env.VITE_NODE_ENV !== 'development') {
		return;
	}

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

enableMocking().then(() => {
	ReactDOM.createRoot(document.getElementById('root')).render(
		<QueryClientProvider client={queryClient}>
			<ReactQueryDevtools initialIsOpen={false} />
			<BrowserRouter basename="/">
				<App />
			</BrowserRouter>
		</QueryClientProvider>,
	);
});