가짜지만 진짜처럼

지원·2025년 8월 30일

MSW Mock API React faker.js typescript 리팩토링 프론트 개발

데브캠프 3기

목록 보기

16/16

이번 시간에는 기업연계 프로젝트 리팩토링 겸 MSW와 faker.js 활용기를 소개해보고자 한다!

프로젝트가 끝난지는 두 달이 다 되어가는데,, 이 시점에서 또 해당 프로젝트를 리팩토링을 왜 했나..!
바로, 백엔드 서버가 종료되었기 때문이다 😭

열심히 한 프로젝트의 결과물이 백엔드 서버가 닫혔다는 이유만으로 프론트까지 아무것도 보이지 않으니..
프론트라도 살려보고자 혼자서 리팩토링을 해보게 되었다.

사실, 프로젝트를 한창 진행할 때에도 msw와 faker.js를 경험해보지 못해서 약간의 아쉬움이 남았는데, 이 기회에 사용해볼 수 있어서 나름 좋다고 생각했다 ㅎ..ㅎ

그럼 이제 msw와 faker.js가 뭔지, 어떻게 프로젝트에 활용했는지 소개해 보도록 하겠다!

MSW란?

MSW (Mock Service Worker)는 브라우저에서 Service Worker를 통해 네트워크 요청을 가로채 mock 응답을 반환하는 라이브러리다.

프론트 개발을 하다보면 다음과 같은 상황을 자주 마주하게 된다 :

백엔드 API가 아직 완성되지 않아서 호출할 수 없을 때
개발 서버가 자주 닫히거나 접근할 수 없을 때
테스트 환경에서 실제 서버에 요청을 보내면 데이터가 꼬일 때

=> 이런 상황에서 진짜 API가 있다라고 속여주는게 바로 MSW (Mock Service Worker)다

Faker.js란?

Faker.js란 다양한 랜덤 데이터를 쉽게 생성해주는 라이브러리다.

MSW로 응답을 가로챈다고 해도 그 안에 대체로 넣을 데이터가 없으면 무용지물!
Faker.js는 말그대로 가짜 데이터를 생성해주는 라이브러리다

Faker.js는 다음과 같은 기능을 제공한다 :

이름, 주소, 이메일, 날짜, 문장, 심지어 신용카드 번호까지 생성 가능
매번 실행할 때마다 다른값을 만들어줌
하지만, seed 고정으로 실행마다 같은 데이터 확보 가능

MSW + Faker.js 조합 👍🏻

MSW : 네트워크 요청을 "가짜 서버" 로 만들어 줌
Faker.js : 그 서버가 돌려줄 데이터를 다양하고 현실적으로 생성

즉, 백엔드 서버 없이도, 마치 진짜 서버처럼 동작하는 환경을 만들 수 있는 최고의 조합!

어떻게 했냐면요!

1) 패키지 설치

참고로 나는 React를 사용해서 프로젝트를 진행했다!

👉🏻 msw 설치
👉🏻 faker.js 설치

npm i msw
npm i @faker-js/faker

2) MSW 초기화 (필수🔥!)

MSW는 브라우저에서 돌아가는 Service Worker 파일이 필요하다
처음 프로젝트에 세팅할 때는 아래 명령어를 꼭 실행하자!
( 처음 한 번만 실행하면 된다 )

npx msw init public/ --save

실행하면 public/mockServiceWorker.js 파일이 생성되는데,
해당 파일은 절대 수정하지 않고, 깃에 함께 올려줘야 한다!

3) 워커 실행 코드 추가

앱이 실행될 때 MSW 워커를 켜줘야 한다!
나는 main.tsx에서 앱 마운트 전에 다음과 같이 넣어줬다

여기서 잠시 ✋🏻 !
현재 내 코드를 보면 프로덕션 모드에서도 MSW가 동작하도록 작성되어있다.
보통은 개발 모드에서만 쓰는게 맞는데,
나의 경우 백엔드 서버가 중단되어 프론트까지 아예 보이지 않는 상황이었다.
남에게 전혀 보여주기가 불가능한 상황이 되었고.. 😅
프론트라도 보이게 데모 버전을 만들자 싶어서 MSW를 프로덕션에서도 실행했다!

import { worker } from "@/mocks/browser";

function startMSW() {
  // 브라우저 + Service Worker 지원 환경에서만
  if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
    return Promise.resolve();
  }
  return worker.start({
    serviceWorker: { url: "/mockServiceWorker.js" },
    onUnhandledRequest: "bypass",
  });
}

//Top-level await 없이 순서 보장: MSW 시작 후 무조건 렌더
startMSW().catch(console.error).finally(renderApp);

왜 이렇게 했나!

앱 마운트 전에 워커를 가동해야 첫 렌더 시점의 API 요청이 경쟁 없이 MSW에 걸린다.
bypass 덕분에 등록하지 않은 요청은 실제 네트워크로 흘러가 데모 중 의도치 않은 장애를 줄인다.
serviceWorker: { url: "/mockServiceWorker.js" }는 루트 스코프로 워커를 등록해 앱 전반의 요청을 안정적으로 포착한다.

4) Faker.js로 가짜 데이터 생성

아래는 내가 프로젝트에 실제 작성한 코드의 일부이다.

// src/mocks/data/donor.ts
import { fakerKO as faker } from "@faker-js/faker";

faker.seed(42); // 항상 같은 결과를 주도록 시드 고정

export const makeDonor = () => ({
  donateSeq: faker.number.int({ min: 1, max: 100000 }),
  donorName: faker.person.fullName(),
  donateAge: faker.number.int({ min: 1, max: 100 }),
  donateDate: faker.date.past().toISOString().slice(0, 10), 
});

faker로 기증자 데이터 하나를 만드는 함수이다.

seed를 사용해서 매번 같은 데이터가 나오도록 고정해뒀다
이름, 나이, 날짜 등을 faker에서 바로 뽑아올 수 있다

faker.js의 자세한 사용 방법은 아래 사이트를 따라가면 알 수 있다!
여러가지를 제공하고 있으니 본인에게 맞는 데이터 생성기를 찾아서 사용하면 좋을 것 같다

👉 Faker : https://fakerjs.dev/
👉 npm : https://www.npmjs.com/package/@faker-js/faker

5) MSW 핸들러 작성

// src/mocks/handlers.ts
import { http, HttpResponse } from "msw";
import { donorListResponse } from "@/mocks/data/Memorial";

export const handlers = [
  http.get("*/remembrance/search", ({ request }) => {
    const url = new URL(request.url);
    const size = Number(url.searchParams.get("size") ?? "30");
    const cursorSeq = url.searchParams.get("cursor");
    const cursorDate = url.searchParams.get("date");

    const body = donorListResponse({
      size,
      cursorSeq: cursorSeq ? Number(cursorSeq) : undefined,
      cursorDate: cursorDate ?? undefined,
    });

    return HttpResponse.json(body, { status: 200 });
  }),
];

MSW에서 핸들러는 특정 요청을 가로채서, 우리가 만든 가짜 데이터를 응답으로 내려주는 것이다

핸들러 작성 방식은 다음과 같다 :

http.get("URL", callback) 형태로 요청을 잡는다.
request.url에서 쿼리 파라미터(size, cursor)를 읽는다.
faker.js로 만든 데이터 생성 함수(donorListResponse)를 호출해 응답 데이터를 만든다.
HttpResponse.json(body, {status: 200})로 반환한다.

6) 브라우저 워커 연결

import { setupWorker } from "msw/browser";
import { handlers } from "@/mocks/handlers";

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

setupWorker(...handlers) 로 우리가 작성한 모든 핸들러를 브라우저 서비스워커에 등록한다.
worekr객체를 실행(worker.start())하면 브라우저에서 네트워크 요청을 가로채기 시작한다.
- 보통 main에서 앱 시작 부분에서 worker.start()를 호출해, 앱이 렌더링되기 전에 워커가 먼저 준비되도록 한다.