MSW 도입 이유?

로그인 기능을 구현하기 위해서, 로그인이 성공하면 accessToken을 받는 식으로 해서 로그인을 처리해야하는데, 거기에 대한 로직을 연습하는 겸해서 코드를 작성했다.

참고로 node_modules/msw/lib/mockServiceWorker.js를 public 폴더에 넣어둬야함

작성 코드 및 설명

index.ts

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

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

이 파일에서는 개발 환경에서만 MSW를 활성화합니다. 이를 위해 NODE_ENV 환경 변수를 체크하고, 개발 모드에서만 browser.ts 파일에서 MSW worker를 가져와 시작합니다. 그런 다음, 애플리케이션의 root를 가져와 App 컴포넌트를 렌더링합니다.

browser.ts

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

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

worker.start();

이 파일에서는 msw 모듈의 setupWorker 함수를 사용하여 service worker를 설정하고 시작합니다. 이 worker는 모든 네트워크 요청을 가로채고, handlers.ts에서 정의한 방식으로 응답합니다.

server.ts

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

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

server.ts는 msw/node 모듈의 setupServer 함수를 사용하여 서버를 설정합니다. 이는 주로 테스트 환경에서 사용되며, handlers.ts에서 정의한 네트워크 요청 핸들러를 사용합니다.

handlers.ts

import { rest } from "msw";

const USER = 0;
const REPAIR = 1;
const INSPECTOR = 2;
const INSURANCE = 3;

const users = [
  { id: "user1", password: "pass1", userType: USER },
  { id: "user2", password: "pass2", userType: REPAIR },
  { id: "user3", password: "pass3", userType: INSPECTOR },
  { id: "user4", password: "pass4", userType: INSURANCE },
];

interface LoginRequestBody {
  loginid: string;
  loginpassword: string;
}

export const handlers = [
  rest.post("https://carborn.site/api/login", (req, res, ctx) => {
    const { loginid, loginpassword } = req.body as LoginRequestBody;

    const user = users.find(
      (user) => user.id === loginid && user.password === loginpassword
    );

    if (user) {
      const accessToken = "exampleAccessToken";
      const expire = Date.now() + 0.3 * 60 * 1000;

      return res(
        ctx.status(200),
        ctx.json({
          status: 200,
          accessToken: accessToken,
          userType: user.userType,
          expire: expire
        })
      );
    } else {
      return res(
        ctx.status(401),
        ctx.json({
          status: 401,
          error: "Invalid credentials",
        })
      );
    }
  }),
  rest.get("https://carborn.site/api/logout", (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ status: 200})
    )
  })
];

handlers.ts 파일은 네트워크 요청에 대한 응답을 정의합니다. 여기서는 두 가지 요청, 즉 로그인과 로그아웃에 대한 핸들러가 정의되어 있습니다.

로그인 요청은 사용자 ID와 비밀번호를 받아 users 배열에서 해당하는 사용자를 찾습니다. 사용자를 찾으면 액세스 토큰과 만료 시간을 반환하며, 그렇지 않으면 401 에러를 반환합니다.

로그아웃 요청은 항상 200 상태와 함께 성공 메시지를 반환합니다.

이렇게 설정하면, 실제 백엔드 없이도 프론트엔드에서 API 요청에 대한 로직을 개발하고 테스트할 수 있습니다.