Closed Hira-Yuki closed 2 months ago
MSW(Mock Service Worker)란 ? 서버를 향한 실제 네트워크 요청을 가로채서 모의 응답을 보내주는 브라우저 및 Node.js 용 API 모킹 라이브러리입니다. MSW를 사용하면 직접 Mock Server를 구현하지 않고도 네트워크 수준에서 Mock API를 만들 수 있습니다. 또한 소스코드 수정 없이 Mocking이 필요한 환경에서만 MSW instans를 실행하여 API Mocking을 적용할 수 있습니다. 이러한 기능은 Service Worker를 이용해 HTTP 요청을 가로채는 것으로 실현할 수 있습니다.
MDN 문서에서는 Service Worker를 다음과 같이 정의합니다.
서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다. 출처: MDN - Service Worker API
서비스 워커는 워커 맥락에서 실행되기 때문에 DOM에 접근할 수 없습니다. JavaScript와는 다른 스레드에서 동작하므로 연산을 가로막지 않습니다(논 블로킹). 서비스 워커는 온전히 비동기적으로 설계됐으며, 그로 인해 동기적 XHR이나 웹 저장소 등의 API를 서비스 워커 내에서 사용할 수 없습니다.
서비스 워커는 보안 상의 이유로 HTTPS에서만 동작합니다. 네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 굉장히 취약하기 때문입니다. 또한 Firefox의 사생활 보호 모드에서 Service Worker API에 접근할 수 없습니다. (IE 미지원)
msw 라이브러리를 설치합니다.
yarn add msw --dev
서비스 워커에 msw 등록 public/
폴더에 파일을 추가해야하는데 아래 명령어로 생성할 수 있다.
npx msw init public/ --save
src/mocks/browser.ts
파일을 생성해서 worker 설정
// src/mocks/browser.ts
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);
- `src/mocks/handler.ts` 파일을 생성하여 Mocking 데이터 전달
```ts
// src/mocks/handler.ts
import { http, HttpResponse } from 'msw';
const allPosts = new Map();
export const handlers = [
http.get('/posts', () => {
// Construct a JSON response with the list of all posts
// as the response body.
return HttpResponse.json(Array.from(allPosts.values()));
}),
// ...the other request handlers.
];
Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
API 개발이 진행되는 동안 테스트를 위한 MOCK API Service를 제작하고자합니다. 이는 개발 병목을 최소화하고 빠르게 개발 단계를 진행하기위해 필요합니다.
Describe the solution you'd like A clear and concise description of what you want to happen.
테스트를 위해 코드를 갈아끼우지 않아도 되고 최대한 실제 환경과 비슷한 상태를 유지하고 싶습니다.
Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.
MSW Setup 해서 브라우저에서 API 요청을 가로채 테스트용 모의 응답을 받을 수 있도록 합니다.
Additional context Add any other context or screenshots about the feature request here.