[React] Mock Server 세팅 (MSW)

이전에 나름대로 Mock Server를 만든 적이 있었다. 사실은 json을 대강 만들고 json-server를 사용해서 get 요청만 처리해주는 역할로다가 사용했다. API 개발을 백엔드 개발자에게 일일히 요청하지 않아도 되어 편리했다. 하지만 post 요청을 처리하지 못한다는 문제가 있었다.

 

 mock server가 필요한 이유 중 하나는 서버 컨디션에 상관없이 프론트엔드 개발이 가능한 점이다. 현재 서버개발자가 서버 구조를 바꾸느라 잠시 서버를 꺼놓았는데, 그로 인해 작업이 스탑됐다. 따라서 mock server를 만들어 개발을 진행하고자 한다. 또, 회원가입, 로그인 요청에 대해서도 향후 테스트코드를 돌릴때도 유용하다. 예시를 들자면 회원가입 UI가 정상적으로 동작하는지 알아보려고 하는 상황이다. 실제 서버에서는 회원가입을 할때 중복아이디를 막아놓았는데, 손으로 하나씩 새로운 아이디를 적어가며 회원가입을 했다. 하지만 mock server를 사용하면 테스트코드를 짤 때 편리해지고, DB에 부하도 주지 않는다. 따라서 Mock Server를 MSW로 만들어보도록 한다.

 

 

npm install msw --save-dev

로 설치해준다. (프로젝트 루트 폴더에)

 

npx msw init public/ --save

로 public 폴더에 서비스워커를 만들어준다. mockServiceWorker.js가 생성될 것, 향후 프로젝트를 serve할때 이 파일은 빼 놓아야 한다.

 

 

src/mocks/handlers/userdata.ts

import { rest } from "msw";

export const getUserDataHandler = rest.get(
  "/api/project/my",
  (req, res, ctx) => {
    return res(
      ctx.json({
                data : "example"
       })
    );
  }
);

를 하나 만들어주자. 이 친구는 api/project/my로 가는 get 요청을 가로채서 저 응답을 돌려줄 것이다.

 

/src/mocks/handlers/index.ts

import { getUserDataHandler } from "./userData";

export const handlers = [...Object.values(getUserDataHandler)];

를 통해서 핸들러들을 합쳐준다. 

 

/src/mocks/browser.ts

import { setupWorker, SetupWorkerApi } from "msw";
import { handlers } from "./handlers";

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

파일을 생성하여 워커를 세팅한다.

 

/src/index.tsx

...
if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser");
  worker.start();
}
...

 

를 통해서 index.tsx에 생성한 mock worker를 불러온다. 그 다음 npm start를 하고, 콘솔을 켜서 확인해본다.

 

 

웹 콘솔에 저렇게 나오는 걸 확인할 수 있다.

 

이때 devtools>application>serciveWorker를 확인해 보면 서비스워커의 동작을 볼 수 있다.

와! 돌아가고 있구나! 확인할 수 있다.

다만 다른 래퍼런스에서 bypass for network를 누르면 msw 비활성화를 할 수 있다고 하는데, 본인의 경우 무한 새로고침이 되고 있다. 현재는 번거롭지만 코드를 지우는 방법으로 비활성화를 하고 있다.

 

ref

https://blog.mathpresso.com/msw로-api-모킹하기-2d8a803c3d5c

https://tech.kakao.com/2021/09/29/mocking-fe/

https://mswjs.io/docs/getting-started/mocks