React - MSW2.0 업데이트 버전

프로젝트를 진행하다가 프론트엔드쪽에서는 컴포넌트가 완성이 됐지만 백엔드에서는 아직 api가 나오지 않아 react msw 기반의 임의에 mock api를 사용해 먼저 api interlocking을 진행하고 있다. 

 

📌 MSW ?

백엔드 없이도 네트워크 요청을 모방하여 테스트하고 개발할 수 있게 해주는 도구다. MSW는 서비스 워커 API를 사용하여 실제 네트워크 요청을 가로채고, 미리 정의된 응답을 반환함으로써, 개발 중이거나 테스트 환경에서 백엔드 서버 없이도 API 호출을 모방할 수 있게 해준다. 이를 통해, API 의존성 없이 프론트엔드 개발과 테스트를 진행할 수 있으며, 네트워크 상태나 오류 처리 등을 쉽게 시뮬레이션 할 수 있다.

 

 

📌MSW 설치 방법 

npm install msw --save-dev
# 또는
yarn add msw --dev

 

 

📌MSW 사용법

1. 서비스 워커 설정: 프로젝트의 public 디렉토리에 서비스 워커 파일을 초기화한다.

npx msw init public/

 

 

2. 요청 핸들러 정의 : API 요청을 가로채고 모방할 응답을 정의합니다. 요청 핸들러는 보통 src/mocks/handlers.js와 같은 파일에 정의한다. 

 

이전 버전

// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  rest.get('/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        username: 'admin',
        email: 'admin@example.com'
      })
    )
  }),
]

 

최신 버전

// src/mocks/handlers.js
import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("https://api.example.com/plants", ({ request }) => {

    const query = new URL(request.url).searchParams;

    const level = query.get("level");
    const type = query.get("type");
    const place = query.get("place");
    const price = query.get("price");

    const plants = [
      {
        id: 0,
        name: "몬스테라",
        level: "Beginner",
        type: "foliage",
        place: "all",
        price: "1_won",
      },
      {
        id: 1,
        name: "커피나무",
        level: "Beginner",
        type: "tree",
        place: "all",
        price: "all",
      },
      {
        id: 2,
        name: "파키라",
        level: "Beginner",
        type: "foliage",
        place: "all",
        price: "all",
      }
    ];


    return HttpResponse.json({
      plants: filteredPlants,
    });
  }),
];

 

‼️ 업데이트 버전은 

rest -> http 

ctx -> HttpResponse 

로 바뀌었다. 

 

3. 서비스 워커와 핸들러 연동: 개발 모드에서 서비스 워커를 활성화하고, 위에서 정의한 요청 핸들러를 등록한다. 

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

// 이 worker는 브라우저 환경에서 사용됩니다.
export const worker = setupWorker(...handlers);

 

4. 마지막으로 애플리케이션의 진입점(예: src/index.js)에서 이를 활성화한다. 

async function enableMocking() {
// 배포할때는 === 로 바꾸기 
  if (process.env.NODE_ENV !== "development") {
    return;
  }

  const { worker } = await import("./mocks/browser");
  return worker.start();
}

enableMocking().then(() => {
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});

 

개발 환경에서 /user 경로로 GET 요청을 하면, MSW가 이를 가로채고 미리 정의된 응답을 반환한다.  이를 통해 실제 백엔드 서버 없이도 API 호출을 테스트하고 개발할 수 있다. 

MSW는 단순한 모킹을 넘어, 네트워크 실패 상황, 지연 응답 등 다양한 네트워크 시나리오를 시뮬레이션할 수 있어, 더 견고한 프론트엔드 애플리케이션 개발에 도움을 준다. 

 

 

참고 자료 

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