왜 MSW를 사용했는가?

백엔드가 API를 만드는 동안에 프론트엔드에서 API를 간단하게 미리 만들어서 테스트를 해놓으면, 나중에 요청 시, 백엔드 코드의 에러로 간주하여 빠르게 코드를 마무리 할 수 있기 때문에 미리 해놓은 것이다.

작성 코드 및 설명

index.js

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import store from "./kiosk/redux/store";

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

const container = document.getElementById("root");
render(
  <Provider store={store}>
    <App />
  </Provider>,
  container
);

이 파일에서는 React 앱을 렌더링합니다. 앱이 개발 모드(development mode)일 때, Mock Service Worker를 시작합니다. 이렇게 하면 개발 중에는 실제 API 요청이 아니라 Mock Service Worker를 통해 처리된 가짜 API 응답을 받을 수 있습니다.

browser.js

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

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

worker.start()

setupWorker를 통해 Mock Service Worker를 초기화하고, worker.start()를 호출하여 Mock Service Worker를 시작합니다. 여기에서는 서비스 워커를 설정하고, 핸들러를 추가합니다.

server.js

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

export const server = setupServer(...handlers);

서버측 테스트를 위해 setupServer를 사용하여 서버를 설정하고, 동일한 핸들러를 추가합니다. 여기에서는 서버를 설정하고, 핸들러를 추가합니다.

handlers.js

import { rest } from "msw";

export const handlers = [
  rest.get(
    "https://bp.ssaverytime.kr:8080/api/kiosk/home/kiosk-list",
    (req, res, ctx) => {
      return res(
        ctx.status(200),
        ctx.json([
          { id: 1, name: "Location 1" },
          { id: 2, name: "Location 2" },
          { id: 3, name: "Location 3" },
        ])
      );
    }
  ),
  rest.get(
    "https://bp.ssaverytime.kr:8080/api/kiosk/home/brolly/:id",
    (req, res, ctx) => {
      const { id } = req.params;
      let response;

      if (id === "1") {
        response = { brollyCnt: 10, emptyCnt: 5 };
      } else if (id === "2") {
        response = { brollyCnt: 20, emptyCnt: 15 };
      } else if (id === "3") {
        response = { brollyCnt: 30, emptyCnt: 25 };
      } else {
        response = { brollyCnt: 0, emptyCnt: 0 };
      }

      return res(ctx.status(200), ctx.json(response));
    }
  ),
  rest.post(
    "https://bp.ssaverytime.kr:8080/api/brolly/return",
    (req, res, ctx) => {
      const { brollyName, caseId, imgData } = req.body;

      return res(
        ctx.status(200),
        ctx.json({
          success: true,
        })
      );
    }
  ),
  rest.get(
    "https://bp.ssaverytime.kr:8080/api/kiosk/home/kiosk-name",
    (req, res, ctx) => {
      const { id } = req.params;
      console.log(id);
      let kioskName;
      switch (id) {
        case "1":
          kioskName = "Kiosk 1";
          break;
        case "2":
          kioskName = "Kiosk 2";
          break;
        case "3":
          kioskName = "Kiosk 3";
          break;
        default:
          kioskName = "Unknown Kiosk";
          break;
      }

      return res(
        ctx.status(200),
        ctx.json({
          kioskName: kioskName,
          refundMoney: 50000,
          depositeMoney: 100000,
          period: 1,
          price: 5000,
          refundMoney: 95000,
        })
      );
    }
  ),
];

handlers 배열은 여러 개의 API 요청 핸들러를 포함합니다. 각 핸들러는 rest 객체의 메소드(예: rest.get, rest.post)를 사용하여 어떤 요청을 처리할지 정의하고, 처리 함수는 요청에 대한 가짜 응답을 반환합니다. 이 파일에서는 서비스 워커가 어떤 방식으로 요청에 응답할지를 정의하고 있습니다.

이런 방식으로 MSW를 이용하면 백엔드 서버가 완성되지 않았거나 테스트를 위해 특정한 응답을 반환하도록 설정하는 등 다양한 상황에서 유용하게 활용할 수 있습니다.