이 편에서 만드는 파일

expense-tracker/
├── package.json               ~ (devDependencies 버전 업, msw 추가, msw.workerDirectory 필드)
├── public/
│   └── mockServiceWorker.js   + (npx msw init으로 생성)
└── src/
    ├── main.ts                ~ (MSW 워커 시작 코드 추가)
    ├── mocks/
    │   ├── browser.ts         + (setupWorker)
    │   └── handlers.ts        + (빈 handlers 배열, 15편에서 채움)
    ├── lib/
    │   ├── types/             + (빈 폴더, 03편부터 채움)
    │   └── api/                + (빈 폴더, 04편부터 채움)
    └── schemas/                 + (빈 폴더, 13편부터 채움)

개념 정리

버전을 확정하는 이유

01편에서 확인했듯 지금 expense-tracker는 TypeScript 7.0.0대, Vite 8.0.0대로 시작됐습니다. 이 과목은 조건부 타입·매핑된 타입처럼 컴파일러 동작에 민감한 문법을 다루므로, 실습 중간에 버전이 달라 결과가 다르게 나오는 일을 막기 위해 시작 시점에 패치 버전까지 고정합니다.

MSW(Mock Service Worker)가 하는 일

이번 과목은 실제 백엔드 서버를 만들지 않습니다. 대신 MSW가 브라우저의 서비스 워커로 네트워크 요청을 가로채, 미리 정해둔 목업 응답을 대신 돌려줍니다. 앱 코드 입장에서는 진짜 서버에 fetch를 보내는 것과 동일하게 동작하므로, 15편에서 API 클라이언트를 완성할 때까지 백엔드 없이도 실제 네트워크 흐름을 그대로 연습할 수 있습니다.

MSW는 브라우저용 설정(setupWorker)과 Node.js 테스트용 설정(setupServer)을 따로 제공합니다. 이 과목은 브라우저에서 직접 확인하는 실습이 많으므로 msw/browser의 setupWorker를 씁니다.

미리 만들어두는 빈 폴더

lib/types, lib/api, schemas는 이번 과목 전체에서 채워 나갈 결과물의 뼈대입니다. 폴더만 먼저 만들어 두면 각 편에서 어떤 파일이 어느 폴더에 들어가는지 헷갈리지 않습니다. 지금은 안에 파일을 두지 않고, 03·04·13편에서 순서대로 채웁니다.

실습

node -v

npm install -D typescript@7.0.2 vite@8.3.0 vitest@5.0.1 @vitest/coverage-v8@5.0.1

// expense-tracker/package.json (발췌)
{
  "devDependencies": {
    "@vitest/coverage-v8": "^5.0.1",
    "jsdom": "^25.0.0",
    "typescript": "~7.0.2",
    "vite": "^8.3.0",
    "vitest": "^5.0.1"
  }
}

npm install -D msw@2.15.0
npx msw init public --save

INFO Setting up mocking for the browser environment.
INFO Writing "mockServiceWorker.js"...
INFO Successfully wrote "mockServiceWorker.js"...

// expense-tracker/src/mocks/handlers.ts
export const handlers = []

// expense-tracker/src/mocks/browser.ts
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers.ts'
 
export const worker = setupWorker(...handlers)

// expense-tracker/src/main.ts (맨 위에 추가되는 부분만, 이하 로직은 16편과 동일)
import { worker } from './mocks/browser.ts'
 
if (import.meta.env.DEV) {
  void worker.start({ onUnhandledRequest: 'bypass' })
}

mkdir -p src/lib/types src/lib/api src/schemas

npm run dev

확인

• 브라우저 콘솔에 [MSW] Mocking enabled.가 출력된다.
• 개발자 도구의 애플리케이션 탭에서 등록된 서비스 워커 목록에 mockServiceWorker.js가 보인다.
• npx tsc --version이 Version 7.0.2를 출력한다.
• npm run verify가 여전히 통과한다(핸들러가 비어 있어 기존 기능에는 영향이 없다).

직접 해보기

1. worker.start()의 옵션을 { onUnhandledRequest: 'warn' }으로 바꿔보고, 앱이 시작될 때 콘솔에 어떤 경고가 추가로 뜨는지 확인한 뒤 'bypass'로 되돌립니다.
2. package.json을 열어 msw init --save가 추가한 msw.workerDirectory 필드를 찾아봅니다.

자주 하는 실수

확인 문제

참고 자료

• TypeScript — Announcing TypeScript 7.0 
• Node.js — 최신 v22.x 릴리스 목록 
• MSW(Mock Service Worker) — Docs