Mock Service Worker(MSW)로 API 목킹하기(feat.React)

 

 

처음으로 백엔드와의 프로젝트를 진행하며 가장 크게 느낀점은...? 데이터가 필요하다...!

막연히 레이아웃을 짜고 틀은 만들었는데 막상 사용할 수 있는 데이터가 없으니 프로젝트 속도가 더뎌지는 기분이 들고 이렇게 있다가 나중에 발등에 불 떨어진듯 진행하게 될것 같은 예감이 들었다.ㅋㅋㅋㅋ

 

멘토링 시간에 질문했더니 멘토님께서 MSW를 추천해주셨다. 

프로젝트 시작부터 알았다면 더 좋았겠지만 나중을 위해서라도 지금 단단히 공부해두려고 한다. 

 

---

 

Getting started

 

Mock Service Worker(MSW)란?

Service Worker를 사용해 네트워크 호출을 가로채고 응답을 보내주는 API Mocking 라이브러리 이다. 즉, 브라우저에서 요청을 받고 서버인 척 응답을 해주는 것이다.  

 

Mock Service Worker 특징

• 백엔드와 동시에 개발을 진행할 수 있다. 
• 실제 백엔드 API와 네트워크 통신을 할 때와 크게 다르지 않아 나중에 백엔드 API로 교체할 때 크게 코드를 수정하지 않아도 된다.
• 테스트 실행 시 실제 네트워크 호출을 하지 않고 효율적으로 사용할 수 있다. 

 

Mock Service Worker 설정하기

설치

npm install msw@latest --save-dev

 

초기설정 

npx msw init public/ --save

MSW를 설치한 후 브라우저에 service worker를 등록해주기 위해 초기설정을 해준다. 

 

명령어를 실핼하면 public 폴더 하위에 mockServiceWorker.js 파일이 자동 생성된다. 

 

디렉터리 구조

 

1) handler 생성

import { HttpResponse, http } from "msw";
import { accommodations } from "./data/accommodations";

export const handlers = [
	http.get("/api/accommodations", () => {
		return HttpResponse.json(accommodations);
	}),
];

• get 뿐만 아니라 post, put 요청도 가능하다. 

 

2) browser 셋업

import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";

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

• Service Worker는 브라우저에만 사용할 수 있으므로 setupWorker함수를 작성해서 handler를 셋업한다. 

 

3) start 해주기

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

async function deferRender() {
	const { worker } = await import("./mocks/browser.ts");
	return worker.start();
}

deferRender().then(() => {
	ReactDOM.createRoot(document.getElementById("root")!).render(
		<React.StrictMode>
			<App />
		</React.StrictMode>,
	);
});

 

4) 네트워크 요청

export async function getAccommodation() {
	try {
		const res = await fetch(`/api/accommodations`);
		const data = await res.json();

		return data.body;
	} catch (err) {
		console.error("Error:", err);
	}
}

 

💡

이렇듯 간단하게 핸들러를 통해 get, post, put 요청을 가로채 가짜 응답을 전달해주는 식으로 데이터를 사용할 수 있다. 

또한 프로젝트에 실제 백엔드 API를 사용할 때는 위에 생성했던 네트워크 요청에 엔드포인트만 변경해서 사용할 수 있었다. 

 

다음에는 꼭 목데이터 구축부터 하자..!^^