[스노로즈 코드리뷰] Mock Service Worker (MSW)와 API 모킹

발단

신기한 코드리뷰가 요청이 들어왔다. 

MSW와 API 모킹 대체 무엇이고 왜 필요해진걸까?

 

API Mocking에 대하여

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks
and reuse them across any frameworks, tools, and environments.

- mock: 실제 서버/데이터 대신 사용하는 가짜 데이터, 또는 가짜 API

- client-agnosti mocks: 클라이언트 (React, Android, iOS)에 의존하지 않는 mock 데이터/서버

 

브라우저의 service worker로, 네트워크 요청을 가로채서 가짜 응답을 반환하는 라이브러리

결국, 실제 서버 대신 가짜 API 응답을 만들어주는 API Mocking을 해주는 라이브러리이다. 

❓ 필요한 이유

• 백엔드 없이도 프론트 개발 가능
• 서버 상태(에러, 지연 등) 쉽게 재현
• 테스트 안정성 ↑ (외부 API 영향 없음)
• 협업 속도 ↑ (프론트/백 분리 개발 가능)

 

다음은 리뷰한 코드 중 해당 서비스의 목적이 가장 잘 보이는 코드이다.

import { http, HttpResponse } from 'msw';

import type { InquiryWriteRequest } from '@/feature/support/api';

export const inquiryHandlers = [
  http.post('*/v1/inquiries/inquiry', async ({ request }) => {
    const data = await request.json();
    const body = data as InquiryWriteRequest;
    const attachments = body.attachments || [];

    // 첨부파일 개수 초과
    if (attachments.length > 3) {
      return HttpResponse.json(
        {
          isSuccess: false,
          code: 3032,
          message: '첨부파일 첨부 가능 개수를 초과했습니다.',
        },
        { status: 400 }
      );
    }

    // 성공
    return HttpResponse.json({
      isSuccess: true,
      code: 1000,
      message: '요청에 성공하였습니다.',
      result: {
        postId: 1136809,
        attachmentUrlList: [],
      },
    });
  }),
];