MSW Vite+TypeScript에 적용하기

JJY·2025년 1월 24일

MSW React frontend issue typescript vite 프론트엔드

MSW

목록 보기

1/4

MSW

MSW(Mock Service Worker)는 Service Worker를 이용해 서버를 향한 실제 네트워크 요청을 가로채서(intercept) 모의 응답 (Mocked response)를 보내주는 API Mocking 라이브러리

Next로 개발중 MSW를 사용했는데 전 프로젝트 리팩토링 중 개발환경에서 데이터가 필요해서 Vite + Typescript에 사용해보기로 결정하였다.

🌟 MSW 적용하기

라이브러리 설치

npm install msw

설치후에 public 폴더에 mockServiceWorker.js 파일이 자동으로 생긴다는데 안생겨서

npx msw init public/ --save

로 생성해주었다.

🌟 mock 폴더 생성

src 폴더 안에 mocks라는 폴더를 만들고 두 개의 파일을 넣어준다.

1️⃣ browser.ts
worker 인스턴스를 생성하고, 요청 핸들러를 정의하는 파일

// src/mocks/browser.ts
import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";

const worker = setupWorker(...handlers);

export default worker;

2️⃣ handlers.ts
REST API 방식의 HTTP 메서드를 작성해서 API를 모킹하는 파일

가로채기 할 API : "/api/fundings/movies?genre=${genre}"
장르에 따른 영화 목록을 가져오려고 한다.

// src/mocks/handlers.ts

// 업데이트 이후로 rest인스턴스가 http인스턴스로 바뀜

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("/api/movies", ({ request }) => {
  
    // 쿼리스트링 가져오기
    const url = new URL(request.url);
    const id = url.searchParams.get("genre");
    console.log(id);

    // 장르가 1이면
    if (id == "1") {
      return HttpResponse.json({
        movieList: [
          {
            movieId: 1,
            poster: "http://file.koreafilm.or.kr/thm/02/00/04/31/tn_DPK011800.jpg",
          },
          {
            movieId: 2,
            poster: "http://file.koreafilm.or.kr/thm/02/00/04/31/tn_DPK011800.jpg",
          },
          
         // 3부터...356까지

          {
            movieId: 357,
            poster: "http://file.koreafilm.or.kr/thm/02/00/01/39/tn_DPK004235.JPG",
          },
        ],
        totalCnt: 357,
      });
    }
  }),
];

쿼리스트링 전까지 Api 써주고 쿼리스트링 부분이 필요하면
searchParams로 가져오면 된다.
return은 HttpResponse을 사용하면 된다.
get부분에 post, delete, put 등 필요한 요청을 쓰면 된다.

💡path parameter을 쓰는 경우

export const handlers = [
  http.get("/api/movies/:genre", ({ request, params }) => {
    const { genre } = params;
  }

이러면 parameter값도 가져올 수 있다.

🌟 MSW 활성화하기

main.ts에 worker실행하는 코드추가

// main.tsx

import worker from "./mocks/browser";

if (process.env.NODE_ENV === "development") {
  worker.start({
    serviceWorker: { url: "/mockServiceWorker.js" },
    onUnhandledRequest: "bypass",
  });
}