MSW에 대해

MSW(Mock Service Working)은 API Mocking 작업을 하기 위한 라이브러리 중 하나이다. 

 

서비스 워커를 통해 호출을 가로채 대신 응답을 하는 방식으로 API Mocking을 도와준다. 

MSW에서 중요한 개념인 서비스 워커부터 간략하게 알아보자.

 

Service Worker

서비스 워커는 이벤트 기반 워커로써 웹 애플리케이션의 메인 쓰레드와 분리된 별도의 백그라운드 스레드에서 실행 시킬 수 있는 기술 중 하나이다. 서비스 워커 덕분에 애플리케이션의 UI Block 없이 연산을 처리할 수 있게 됐다.

이를 기반으로 하여 다양한 사용이 있다. mock API, push 알림, 백그라운드 동기화 등으로 활용할 수 있다. 

아래의 이미지는 서비스 워커가 네트워크와 브라우저 사이에 존재하여 api를 인터셉트하여 대신 응답을 보내주는 이미지이다.

출처: https://fe-developers.kakaoent.com/2022/221208-service-worker/

브라우저에서 실행되지 않기 때문에 서비스 워커는 DOM에 직접 접근할 수 없다. 이 때문에 postMessage를 통해 웹 페이지와 소통이 가능하여 이를 활용한다. 

간단한 예시를 보면, (https://fe-developers.kakaoent.com/2022/221208-service-worker/)

const registerServiceWorker = async () => {
    if ("serviceWorker" in navigator) {
      try {
        const registration = await navigator.serviceWorker.register("./service-worker.js");
        if (registration.installing) {
          console.log("Service worker installing");
        } else if (registration.waiting) {
          console.log("Service worker installed");
        } else if (registration.active) {
          console.log("Service worker active");
        }
      } catch (error) {
        console.error(`Registration failed with ${error}`);
      }
    }
  };

  registerServiceWorker();

 

이는 브라우저에서 서비스 워커를 등록하는 과정이다. 

// service-worker.js
self.addEventListener("fetch", function (event) {
  const { url } = event.request;
  if (url === "https://jsonplaceholder.typicode.com/users/1") {
    event.respondWith(
      new Response(
        JSON.stringify({
          message: "this message is re-written by service-worker",
        })
      )
    );
   }
});

 

이와 같이 서비스 워커에 이벤트를 등록하면, 브라우저에서 fetch를 보내게 되면 service-worker에서 이벤트가 발생되고 intercept를 할 수 있게 된다. 중간에 가로채서 응답을 임의로 만들어 서버까지 요청이 가는 것이 아닌 서비스 워커 단에서 응답을 해버린다. 

 

 

MSW (Mock Service Working)

MSW는 위에서 살펴본 서비스 워커를 활용하여 구현되어 있다. 

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

MSW의 동작 원리는 위의 이미지와 같다. 

MSW의 경우 사실 Service worker만 이해했다면 동작하는 방식에 있어서 큰 무리없이 이해가 될 것이다. 

 

그럼 사용 방법에 대해 살펴보자. 

 

install:

yarn add -D msw

 

service worker 파일 init : 

(public 폴더 하위에 생성하도록 명령)

npx msw init public/ --save

 

해당 스크립트를 실행하게 되면, mockServiceWorker.js 파일이 생성이 된다.

 

 

// index.ts
async function initMSW() {
  if (typeof window === "undefined") {
    const { server } = await import("@src/mocks/server");
    server.listen();
  } else {
    const { worker } = await import("@src/mocks/browser");
    worker.start();
  }
}

export { initMSW };


// server.ts
import { setupServer } from "msw/node";
import { handlers } from "@src/mocks/handler";

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


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

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

// handler.ts
import { http, HttpResponse } from "msw";

export const handlers = [
  // 할일 목록
  http.get("/todos", () => {
    return HttpResponse.json([]);
  }),
];

 

initMSW();

function App() {}

 

위와 같은 구조 및 코드를 작성하면 성공이다. 

 

 

참고:

https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API 

Service Worker API - Web API | MDN

https://fe-developers.kakaoent.com/2022/221208-service-worker/

서비스 워커에 대해 알아보고 Mock Response 만들기 | 카카오엔터테인먼트 FE 기술블로그