Next 7장 - msw 사용해보기

Next.js

msw

• mock data를 사용하기 위해 msw를 설치한다.
• Mock Service Worker 라이브러리로, 백엔드 API인척 하는 가짜 데이터를 응답해주는 라이브러리다.
• 백엔드 API 개발과 프론트엔드 개발이 동시에 진행되는 경우 임시로 사용하기 위한 가짜 데이터로 활용하기 쉽다.
• 모킹이 네트워크에서 일어나기 때문에 API 통신과 크게 다르지 않아 실제 API로 대체하는 것이 쉽다.
• 그렇기 때문에 서버 구축에 앞서 msw 사용을 선택했다.

설치

• npm i -D msw로 설치한다.
• msw를 설치하려 하는데 typescript와 버전 충돌이 일어났다.
• typescript 5.1 버전을 설치해놨었는데 5.0버전으로 낮추고 진행하였다.

요청 핸들러 작성

• 요청이 들어왔을 때 임의의 응답을 해주는 handler를 작성한다.
• mocks 디렉토리를 만들고 그 안에 handler.tsx 파일을 생성한다.
• msw 모듈의 rest 객체를 사용하여 Express와 유사한 방식으로 구현할 수 있다.

// mocks/handler.tsx
import { rest } from "msw";

const post = [{ userId: 1, name: "choi", content: "content" }];

export const handler = [
  rest.get("/dummy", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(post));
  }),
];

서비스 워커 생성

• npx msw init public/ --save 설치를 통해 CLI에서 요청에 대한 응답을 볼 수 있다.
• 임의로 보여줄 서버를 작동시키기 위한 코드를 작성하고, 그 안에 API를 위해 작성한 hadnler를 추가한다.

// mocks/server.tsx

import { setupServer } from "msw/node";
import { handler } from "./handlers";

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

진입 시점 지정

• 개발 환경에서만 msw가 작동될 수 있도록, 환경 변수를 체크하여 선택적으로 서비스가 구동되게 해준다.

// _app.tsx
import { worker } from "@/mocks/server";

if (process.env.NODE_ENV === "development") {
  worker.listen();
}

export default function App() {}

완료