시작하기

개발자들은 MSW를 다양한 용도로 사용합니다. 테스트에서 API를 모킹하거나, 개발 중 네트워크를 디버깅하거나, 팀 간 작업을 공유하거나, 나가는 트래픽을 모니터링하는 등 다양한 목적이 있습니다. 이 모든 사용 사례에 적합한 단일 튜토리얼을 작성하는 것은 상당히 어렵습니다. 하지만 좋은 소식이 있습니다. MSW를 사용하는 방식은 어디서 어떻게 사용하든 동일한 흐름을 따릅니다.

아래에서는 MSW를 Node.js 애플리케이션에 통합하는 완전한 기본 튜토리얼을 찾을 수 있습니다. 이 튜토리얼은 작업 참조용으로 제공되며, 원하는 통합을 달성하기 위해 아래 각 섹션의 추가 링크를 따라가길 권장합니다.

Step 1: 설치

프로젝트에서 다음 명령어를 실행하여 MSW를 개발 의존성으로 설치하세요:

npm install msw@latest --save-dev

필요한 경우 CDN에서 MSW 설치도 가능합니다.

Step 2: 네트워크 설명하기

다음으로, 요청 핸들러를 사용해 네트워크를 설명합니다 (예: http.get(), graphql.query()). 요청 핸들러는 요청을 가로채고 응답을 처리하는 역할을 합니다. 이 응답은 모의 응답, 실제 응답과 모의 응답의 조합, 또는 네트워크 트래픽을 모니터링만 하고 영향을 주지 않는 경우 아무것도 반환하지 않을 수 있습니다.

이 튜토리얼에서는 GET https://example.com/user 요청에 대한 단일 HTTP 요청 핸들러를 정의하고, 모의 JSON 응답을 반환해 보겠습니다.

// src/mocks/handlers.js
import { http, HttpResponse } from 'msw'
 
export const handlers = [
  // "GET https://example.com/user" 요청을 가로챕니다...
  http.get('https://example.com/user', () => {
    // ...그리고 이 JSON 응답으로 응답합니다.
    return HttpResponse.json({
      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
      firstName: 'John',
      lastName: 'Maverick',
    })
  }),
]

처음에는 전체 네트워크 설명을 담은 단일 handlers.js 모듈로 시작하세요. 시간이 지나면 핸들러 구조를 재구성하거나 런타임에 핸들러를 재정의하는 방법을 배울 수 있습니다.

REST나 GraphQL과 같은 다양한 API를 동일한 handlers 배열에 함께 설명할 수 있습니다. MSW를 사용해 서버 API를 설명하는 방법에 대해 더 알아보세요:

TypeScript를 사용해 요청 핸들러에 주석을 달면 MSW를 최대한 활용할 수 있습니다. 이는 실제 API에서 생성된 타입 정의(OpenAPI 문서나 GraphQL Code Generator 등)가 있을 때 특히 유용합니다.

Step 3: 통합

MSW는 환경 수준에서 적용되기 때문에 어떤 프레임워크, 요청 라이브러리, 그리고 다른 도구들과도 통합할 수 있습니다. 이는 여러분이 브라우저에서 사용할지, Node.js 프로세스에서 사용할지(또는 둘 다)만 결정하면 된다는 의미입니다. 어떤 환경에 있든 동일한 요청 핸들러를 (재)사용할 수 있습니다.

이 튜토리얼에서는 node.js라는 Node.js 통합 모듈을 생성하여 MSW를 일반 Node.js 프로세스에 통합해 보겠습니다:

// src/mocks/node.js
import { setupServer } from 'msw/node'
import { handlers } from './handlers'
 
export const server = setupServer(...handlers)

우리는 node.js와 browser.js와 같은 환경에 의존적인 통합 모듈을 생성하는 것을 권장합니다. 이렇게 하면 다양한 도구에서 동일한 통합을 재사용할 수 있습니다. 자바스크립트의 어떤 도구든 브라우저(실제 브라우저, Playwright, Cypress, Storybook) 또는 Node.js(Vitest, Jest, React Native)에서 실행됩니다. 도구의 환경에 따라 적절한 통합을 가져오면 준비가 완료됩니다.

우리가 생성한 node.js 통합 모듈은 MSW를 모든 Node.js 프로세스에서 실행하도록 구성하지만, 아직 실제로 시작하지는 않습니다. 요청 가로채기를 시작하려면 Node.js 프로세스에서 server.listen()을 호출해야 합니다:

// src/index.js
import { server } from './mocks/node'
 
server.listen()
 
// 이는 네트워크 요청을 수행하고 응답을 출력하는
// 간단한 Node.js 애플리케이션입니다.
async function app() {
  const response = await fetch('https://example.com/user')
  const user = await response.json()
  console.log(user)
}
 
app()

process.env.NODE_ENV 또는 다른 기준에 따라 조건부로 MSW를 시작할 수도 있습니다.

이제 애플리케이션을 실행하면 실제 네트워크 요청 없이 모의 응답이 출력됩니다:

node ./src/index.js

{
  id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
  firstName: 'John',
  lastName: 'Maverick'
}

다양한 환경에서 MSW를 통합하는 방법에 대해 더 알아보기:

예제

아래 저장소에서 Jest, Vitest, Cypress, Playwright, Angular, Svelte, Remix 등 다양한 도구와 함께 Mock Service Worker를 사용하는 기능적이고 완전하며 최소한의 예제를 찾을 수 있습니다. 해당 도구와 MSW를 통합할 때 참고 자료로 활용하세요.

문제가 발생하면 각 사용 예제를 재현 저장소로 전환하세요!

도움이 필요하신가요?

새로운 도구를 시작하는 것은 어려울 수 있지만, 여러분이 혼자 고민할 필요는 없습니다. 문제가 발생하면 가장 먼저 확인할 수 있는 곳은 디버깅 가이드입니다:

저희는 여러분의 질문에 언제나 기꺼이 도움을 드리고자 합니다. 도움이 필요할 때 저희나 커뮤니티 멤버들에게 연락할 수 있는 다양한 방법이 있습니다:

• MSW Discord 참여하기
• GitHub에서 토론 시작하기

기억하세요, 여러분보다 한 단계 뒤에 있는 사람이 항상 존재합니다. 가능한 한 친절하게 도움을 제공해 주세요.