Development tips

Mock Service Worker로 클라이언트 API 모킹 구현하기

0

Mock Service Worker (MSW)는 브라우저와 Node.js 환경에서 API 요청을 가로채어 가상 응답을 제공하는 라이브러리입니다. MSW는 실제 서버와의 통신 없이 다양한 테스트 시나리오를 시뮬레이션할 수 있어 개발 및 테스트에 유용합니다.

MSW는 Service Worker API를 활용하여 브라우저에서 네트워크 요청을 가로채고, Node.js 환경에서는 저수준의 인터셉션 알고리즘을 사용합니다. 이는 애플리케이션 코드를 변경하지 않고도 실제와 같은 테스트 환경을 제공하는 것이 특징입니다.

주요 기능 및 장점

  • Express-like 라우팅: 직관적인 라우팅 문법을 사용하여 간단하게 요청 핸들러를 설정할 수 있습니다.
  • 파라미터 및 와일드카드 매칭: 다양한 요청 패턴을 지원하여 복잡한 테스트 시나리오를 손쉽게 구성할 수 있습니다.
  • 재사용 가능한 요청 핸들러: 여러 테스트 환경에서 재사용 가능한 핸들러를 작성할 수 있어 코드의 일관성과 유지보수성을 높입니다.
  • 환경 독립성: 개발, 테스트, 스테이징 환경에서 동일하게 동작하여 일관된 결과를 제공합니다.

MSW는 페이스북, 마이크로소프트 등 다양한 기업에서 채택하여 그 유용성과 안정성을 입증받고 있습니다. 개발자가 실제 서버가 준비되지 않은 상태에서도 자유롭게 기능을 개발하고 테스트할 수 있도록 지원하는 MSW는 현대 웹 개발 환경에서 필수적인 도구로 자리 잡고 있습니다.

설치 방법

MSW를 설치하려면 다음 명령어를 사용하세요:

npm install msw --save-dev

사용 방법

1. Service Worker 설정하기

`public/mockServiceWorker.js` 파일을 생성하고, MSW 공식 사이트에서 제공하는 스크립트를 복사하여 붙여넣습니다.

2. 핸들러 설정하기

// src/mocks/handlers.js
   import { rest } from 'msw';

   export const handlers = [
     rest.get('/api/user', (req, res, ctx) => {
       return res(
         ctx.status(200),
         ctx.json({
           username: 'john.doe',
         })
       );
     }),
   ];

3. Service Worker 시작하기

// src/mocks/browser.js
   import { setupWorker } from 'msw';
   import { handlers } from './handlers';

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

4. 앱 초기화 시 실행하기

// src/index.js
   import { worker } from './mocks/browser';

   worker.start();

   // 나머지 앱 초기화 코드

결론

Mock Service Worker는 클라이언트 측 API 모킹을 혁신적으로 수행할 수 있게 해주는 강력한 도구입니다. 더 자세한 정보와 예제는 MSW GitHub 페이지에서 확인할 수 있습니다.

Leave a Reply