MSW(Mock Service Worker)
MSW는 Mock Service Worker의 약자로 가짜 API를 생성해주는 도구이다.
이 도구는 백엔드 개발자가 API를 아직 만들지 못 했을 때 DB를 다루지 않고 응답으로 받을 값을 임의로 생성하여 미리 프론트엔드 개발을 할 수 있다.
MSW 설치 및 셋팅하기
1. 라이브러리 설치하기
# npm
npm install -D msw
# or yarn
yarn add -D msw2. Service worker 등록하기
npx msw init public/ --save이 명령어를 사용하면 public 폴더에 셋팅이 된다.
셋팅을 마치면 public 폴더에 mockServiceWorker.js 파일이 생긴다.
이후 src폴더에 mocks 폴더를 생성해준다.
원래 서버의 주소로 요청을 보내는데, 이 요청을 mockServiceWorker가 가로채서 응답을 보내준다.
3. 브라우저 환경과 통합하기
공식문서에서는 브라우저 환경 이외에도 추가적으로 node환경과 react-native를 지원한다.
mocks/browser.ts를 생성한 후 아래와 같이 작성해준다.
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)4. 임의의 서버 생성해주기
Next에서 제공하는 서버에서 msw를 자연스럽게 사용하는 방식이 아직 적용이 되지 않아, 임시로 노드 서버를 만들어서 사용한다.
msw와 Next의 호환성이 떨어진다.
mocks/http.ts를 생성한 후 아래와 같이 작성하여 express 서버를 생성해준다.
import { createMiddleware } from "@mswjs/http-middleware";
import express from "express";
import cors from "cors";
import { handlers } from "./handlers";
const app = express();
const port = 9090;
app.use(cors({ origin: "http://localhost:3000", optionsSuccessStatus: 200, credentials: true }));
app.use(express.json());
app.use(createMiddleware(...handlers));
app.listen(port, () => console.log(`Mock server is running on port: ${port}`));이후 handlers를 등록을 해주었다면 package.json의 script에 다음 내용을 한줄 추가해준다.
"scripts": {
"dev": "next dev",
"mock": "npx tsx watch ./src/mocks/http.ts"
}이를 사용할땐 반드시 두개의 터미널을 사용하여 하나의 터미널에선 Next를 실행하고, 다른 하나에서는 서버를 실행해준다.
5. msw 실행을 위한 컴포넌트 생성
msw를 사용할 수 있도록 src/app/_component/MSWcomponent.ts 파일을 생성 해준다.
"use client";
import { useEffect } from "react";
export const MSWComponent = () => {
useEffect(() => {
if (typeof window !== "undefined") {
if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
require("@/mocks/browser");
}
}
}, []);
return null;
};6. MSW 컴포넌트로 app/layout.tsx 감싸주기
위 단계를 거쳐 생성된 MSW 컴포넌트로 app/layout.tsx에 import 해준다.
export default function RootLayout({ children }: Readonly<Props>) {
return (
<html lang='ko'>
<body className={inter.className}>
<MSWComponent />
{children}
</body>
</html>
);
}참고
Next + React Query로 SNS 서비스 만들기
Mock Service Worker
MSW로 API Mocking으로 개발환경을 높이고 Next.js RSC환경에서도 MSW 적용하기
