백엔드 서버가 멈췄을 때, 프론트는 MSW로 달린다

프로젝트 도중 잘 동작하던 BE 서버가 응답하지 않는다면?
이번 프로젝트를 진행하며 실제로 겪어본 경험이며 MSW를 도입한 이유입니다.

이런 상황을 대비해 우리에겐 MSW(Mock Service Worker) 라는 든든한 동료가 있습니다. 카카오테크캠퍼스에서 배운 MSW를 활용해 어떻게 서버 의존도를 줄이고, FE 개발을 독립적으로 계속해 나갈 수 있었는지 그 경험을 공유합니다.

MSW, 그게 뭔데?

MSW는 서비스 워커(Service Worker)를 사용해 실제 네트워크 요청을 가로채서, 우리가 미리 정의해둔 가짜(Mock) 응답을 보내주는 라이브러리입니다. 덕분에 백엔드 API가 아직 준비되지 않았거나, 서버가 다운된 비상 상황에서도 마치 실제 서버와 통신하는 것처럼 개발을 이어갈 수 있습니다.

MSW 설치

npm i msw --save-dev

Mock Service Worker 설정

가로챈 요청을 처리할 핸들러(handler)들을 등록하는 '워커'를 설정합니다.

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

// setupWorker에 핸들러 배열을 넘겨주어 워커를 생성합니다.
export const worker = setupWorker(...handlers);

API 응답 시나리오 작성하기

이곳이 바로 가짜 API 서버의 두뇌입니다. 어떤 API 경로로 요청이 왔을 때, 어떤 데이터를 응답으로 내려줄지 시나리오를 작성하는 곳이죠.

// /mock/handlers.ts
import { http, HttpResponse } from 'msw';

// 실제 API의 기본 URL을 가져옵니다.
import { API_BASE_URL } from '../api/apiClient';

export const handlers = [
  // 예시: 랜덤 질문을 가져오는 API 모킹
  http.get(`${API_BASE_URL}/api/questions/random`, ({ request }) => {
    // 요청 URL에서 쿼리 파라미터를 확인할 수도 있습니다.
    const url = new URL(request.url);
    const userId = url.searchParams.get('user_id');

    // 특정 조건에 따라 다른 응답을 보낼 수도 있습니다.
    if (userId === '1') {
      return HttpResponse.json({
        questionId: 123,
        questionType: 'FLOW',
        questionText: '1분 자기소개를 해주세요.',
        jobId: 10,
      });
    }

    // 기본 응답
    return HttpResponse.json({
        questionId: 999,
        questionType: 'GENERAL',
        questionText: '가장 자신있는 기술 스택은 무엇인가요?',
        jobId: 1,
      });
  }),

  // TODO: 로그인, 회원가입 등 필요한 핸들러를 자유롭게 추가해 보세요!
  // http.post(...)
];

핵심은 http.get과 HttpResponse.json 입니다. http.get으로 특정 URL의 GET 요청을 가로채고, HttpResponse.json으로 실제 서버가 내려주는 것과 똑같은 형태의 JSON 데이터를 반환해 줍니다.

애플리케이션에 MSW 적용하기(main.tsx)

// main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';

// MSW 워커를 동적으로 import 합니다.
async function enableMocking() {
  // .env 파일 등에 정의된 환경 변수를 확인해 MSW 활성화 여부를 결정합니다.
  if (import.meta.env.VITE_ENABLE_MSW !== 'true') {
    return;
  }

  const { worker } = await import('./mock/client');
  // .start()를 호출하여 Mock Service Worker를 실행합니다.
  return worker.start();
}

enableMocking().then(() => {
  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <App />
    </StrictMode>
  );
});

Mocking 실행 스크립트 추가 (package.json)

{
	"scripts": {
    "dev": "vite",
    "dev:mock": "cross-env VITE_ENABLE_MSW=true vite",
  },
}

로컬에서 Mocking을 활성화

npm run dev:mock

이제 브라우저를 열고 개발자 도구의 콘솔을 확인해 보세요. [MSW] Mocking enabled. 라는 메시지가 보인다면 성공입니다! 이제 백엔드 서버 상태와 관계없이 자유롭게 FE 개발을 할 수 있습니다.

마치며

MSW는 단순히 서버가 다운됐을 때만 유용한 도구가 아닙니다.

API 명세만 나왔을 때 FE는 곧바로 UI 개발을 시작할 수 있고,

에러 상황이나 엣지 케이스를 테스트하기 위한 데이터를 마음대로 만들 수 있으며,

E2E 테스트를 위한 독립적인 환경을 구축할 때도 빛을 발합니다.

여러분도 MSW를 통해 서버 의존성은 낮추고, 개발 생산성은 높이는 경험을 해보시길 바랍니다!