Mock Service Worker (MSW 2.0)

기획서가 나온 후 API 개발과 디자인이 나오기까지 프론트 엔드는 사실상 할 수 있는 일이 별로 없다.

심지어 API 개발과 디자인이 원래 지정된 기간을 지키지 못하고 밀리게 되는 일이 때때로 생기는데, 그렇다고 최종 마감 기한도 같이 밀리느냐 하면 그건 또 아니다.

어쨌든 마감은 점점 다가오고 가만히 있을 수는 없으니 프로젝트 구조를 설정한 후 현재 기획서를 보고 페이지를 나누고 UI는 어느 정도 틀만 잡아둔다. 더불어 API가 필요 없는 기능적인 부분 모두 구현하고도 시간이 남는다면 가짜 데이터 및 API를 만들어 요청을 보내볼 수 있는데 이 때 사용할 수 있는 것이 MSW(Mock Service Worker)다.

📌MSW(Mock Service Worker)

MSW는 Service Worker를 사용해 실제 API 요청을 가로채는 모킹 라이브러리이다.

Service Worker를 사용하는 이유는 네트워크 요청을 가로채서 실제 서버에 API 요청을 보내지 않고도 응답을 모킹하여 프론트엔드에서 테스트할 수 있게 하기 위함이다.

따라서 백엔드가 아직 준비가 되지 않았을 때 유용하게 사용할 수 있는 라이브러리이다.

참고로 본 포스팅은 23년도 11월에 업데이트된 MSW 2.0을 바탕으로 한다. (Node.js 18 이전 버전에서는 지원되지 않음)

설치

npm install msw@latest

사용

따로 관리 규칙이 존재하는 것은 아니지만 단일 디렉토리에 Mock을 정의하는 것이 좋다. 나는 현재 진행중인 프로젝트의 src/app/mock 위치에 정의해주었다.

핸들러

이제 요청 핸들러를 관리하는 모듈을 제작해준다. 핸들러는 mock 폴더에 바로 생성해도 좋고, 핸들러의 종류가 다양하다면 handler 디렉토리를 따로 만들어서 관리해주어도 좋다.

선언하는 방식은 다음과 같다.

import { http, HttpResponse } from 'msw';

http.get('요청주소', ({ request }) => {
		...
		return HttpResponse.json(body, { status: 200 });
})

💡 http
http는 HTTP 요청을 가로채기 위한 요청 핸들러를 생성할 때 사용한다.

💡 HttpResponse
HttpResponse는 표준 Response 클래스에서 몇가지 기능들이 추가되어있는 클래스이며 2.0 버전에서는 HttpResponse를 기본으로 사용해야 한다.
HttpReponse에는 body와 options 객체를 전달할 수 있다.

HttpResponse 클래스는 다음과 같다.

class HttpResponse {
  constructor(
    body:
      | Blob
      | ArrayBuffer
      | TypedArray
      | DateView
      | FormData
      | ReadableStream
      | URLSearchParams
      | string
      | null
      | undefined
    options?: {
      status?: number
      statusText?: string
      headers?: HeadersInit
    }
  )
}

 

핸들러 함수가 여러개라면 배열에 넣어준다.

예시로 다음과 같이 handler.ts를 작성해주었다.

import { http, HttpResponse } from 'msw'

const signinInfo = {
    id: 'ddiaezzang',
    password: 'ddiaezzang'
};
const userInfo = {
    id: `ddiaezzang`,
    name: '짱짱'
    apiToken: 'sign-in api token !!!'
};
 
export const handlers = [
    http.post('/test/sign-in', async ({ request }) => {
        const data = await request.json();
        if (data.id === signinInfo.id && data.password === signinInfo.password) {
            return HttpResponse.json(userInfo, { status: 403 });
        } else return HttpResponse.json({ status: 403 });
    }),
    http.get('/test/userInfo', () => {
        return HttpResponse.json(userInfo);
    })
];

서비스 워커 생성

browser.ts에 서비스 워커를 생성한다.

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

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

서비스 워커 활성화

worker.start()를 사용해 App.tsx에서 서비스 워커를 활성화하고 모킹을 시작할 수 있다.

나는 Vite를 사용하였기에 다음과 같이 작성해주었다.

if (import.meta.env.DEV) {
    const enableMocking = async function () {
        const { worker } = await import('./mock/browser');
        return worker.start({
            onUnhandledRequest: 'bypass'
        });
    };
    await enableMocking();
}

실행

프로젝트 실행 시 Console에 다음과 같은 문구가 뜨면 MSW가 성공적으로 활성화되었다는 의미이다.

📌후기

MSW를 사용해 백엔드 작업 이전에 구조를 잡아볼 수도 있지만, 특히 에러케이스 또는 데이터에 따른 처리를 해주어야 할 경우 백엔드에 테스트 데이터 요청 전에 미리 실제 서버로 가는 API 요청을 가로채 사용해볼 수 있다는 이점이 있었다.

또 실제 API 요청 형식을 그대로 사용해 테스트할 수 있어 추후에 코드를 대거 수정해야하는 일도 없었다.

이전에도 MSW를 사용해본 적 있지만, 2.0 버전의 경우 더 쉽고 간단하게 사용할 수 있어서 편리했다. 다음 개인 프로젝트 작업 시에 꼭 다시 활용해보고자 한다.

---

🔖출처 : Mock Service Worker