MSW란? (Mock Service Worker)

📌MSW (Mock Service Worker)

개발 중 API 요청을 모킹하기 위한 라이브러리로, 브라우저의 Service Worker를 활용하여 실제 네트워크 요청을 가로채고 시뮬레이션된 응답을 제공합니다.

 

백엔드 API가 제공되기 이전에 모킹을 통해 실제 서버 없이 API 요청과 응답을 시뮬레이션하여 프론트엔드 개발과 테스트를 가능하게 합니다.

 

+ Service Worker란?

웹 애플리케이션에서 브라우저와 네트워크 사이에 위치하는 백그라운드 스크립트입니다. 주로 네트워크 요청을 가로채서 캐싱을 관리하거나, 오프라인 기능을 제공하기 위해 사용됩니다.

---

📌주요 장점

1. 네트워크 수준의 모킹: MSW는 Service Worker를 사용하여 실제 네트워크 요청을 가로채고 모킹하기 때문에, UI와의 상호작용을 실제처럼 테스트할 수 있습니다. 이는 개발 중 API 응답을 쉽게 시뮬레이션하고, 프론트엔드와 백엔드의 연결이 없는 상태에서도 작업할 수 있게 합니다.
2. 테스트 환경 통일성: MSW를 사용하면 다양한 테스트 환경에서도 일관된 API 응답을 제공할 수 있습니다. 로컬 개발, CI/CD 파이프라인 등에서 동일한 방식으로 테스트할 수 있어 신뢰성이 높아집니다.
3. 유연한 요청 핸들링: MSW는 RESTful 및 GraphQL API 요청을 쉽게 모킹할 수 있으며, 복잡한 응답 구조와 다양한 시나리오를 쉽게 설정할 수 있습니다. 필요에 따라 다양한 상태(예: 에러, 로딩 등)를 처리하기 용이합니다.
4. 실제 환경에 가까운 개발: MSW를 사용하면 실제 API와의 통신 방식을 유지하면서도, 에러 응답이나 지연 응답 같은 다양한 상황을 시뮬레이션할 수 있어 실제 환경에서의 작동을 더 잘 이해할 수 있습니다.
5. 디버깅 용이성: API 요청과 응답을 쉽게 시각화할 수 있는 개발자 도구를 제공하여, 요청이 어떻게 처리되는지 이해하고 문제를 디버깅하는 데 도움이 됩니다.
6. 코드 간결성: 조건문으로 API를 모킹하는 것보다, MSW를 사용하면 모킹 설정이 더 간결하고 명확하게 작성될 수 있습니다. 이는 코드 유지보수성을 높이는 데 기여합니다.

저는 기존에 보통 스크립트 실행 조건문으로 모킹을 수행했었는데, MSW를 사용해면서 장점을 체감했습니다.

---

 

📌React에서의 실제 사용법

1. 먼저 msw 라이브러리를 설치합니다.

yarn add -D msw
npm install msw

 

2. 요청을 가로챌 API들을 handlers.ts 파일에 정의합니다. 아래는 프로젝트에서 사용한 예시 코드입니다.

// mock/handlers.ts
import { rest } from 'msw';

import { generatePostDetail, generatePostList } from '$shared/utils';

export const handlers = [
  // 게시글 리스트 api mocking
  rest.get('/post', (req, res, ctx) => {
    const size = req.url.searchParams.get('size');
    return res(
      ctx.status(200),
      ctx.json({
        totalCount: Number(size ?? 0),
        postList: generatePostList(Number(size ?? 0)),
      })
    );
  }),

  // 게시글 상세보기 api mocking
  rest.get('/post/:postId', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(generatePostDetail()));
  }),
];

 

3. 서비스 워커를 설정합니다.

 

먼저, 아래 명령어를 통해 서비스 워커 파일을 생성합니다.

npx msw init public/ --save

 

그 후,  프로젝트 진입 파일에서 서비스 워커를 등록합니다.

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

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

 

4. 개발환경에서만 서비스 워커를 실행합니다.

// main.tsx

...

if (process.env.NODE_ENV === 'development') {
  await (async () => {
    const { worker } = await import('./mocks/browser');
    worker.start();
  })();
}

...