15-1 모킹 (MSW)
모킹 서버 작성 (MSW)
MSW (Mock Service Worker) 링크
백엔드에 실제로 존재하지않는 Node 서버에서 API 응답을 모킹합니다.
- 존재하지 않는 API에 대한 응답을 모킹합니다.
- service worker에서 요청을 처리합니다.
- chrome 기준 devTool의 Application에서 Service workers의 "bypass for newwork"로 일시정지(비활성화)가 가능합니다.
* mock : 모조품 / '여기서는 실제하지 않는 가상의 정도'의 의미
라이브러리 설치 링크
npm install msw
or
npm install msw@latest --save-dev서비스 워커 설치
npx msw init public/ --save
---> public 폴더에 'mockServiceWorker.js'파일이 생성 (고유값같은게 작성되어있고, 수정할일은 잘 없음)이후
index.tsx에 적용(추가) 해줍니다.
utils > index.tsx
추가되는 코드
if (process.env.NODE_ENV === 'development') { // 개발환경일 때로 제한 - 배포가 되면 곤란한 상황이 올 수 있음
const { worker } = require("./mock/browser"); // mock 폴더 browser 파일에서 worker를 가져오겠다
worker.start();
}
src폴더 하위에 mock폴더 생성
src > mock > browser.ts
import { setupWorker } from "msw/browser";
// 핸들러
const handlers = []; // 모킹할 API가 들어갈 배열
// 워커 생성
export const worker = setupWorker(...handlers);chat gpt
🧩 각 부분의 의미
setupWorker:
setupWorker는 MSW에서 제공하는 함수로, 서비스 워커를 설정하고 API 요청을 가로채는 핸들러(handler)를 적용하는 역할을 합니다.
handlers 배열:
여기에는 실제 요청을 모킹할 API 핸들러들이 들어가요. 예를 들어, GET 요청이나 POST 요청을 가로채는 핸들러를 넣을 수 있습니다.
worker:
setupWorker(...handlers)를 호출하면, worker 객체가 생성되며, 이 객체는 모든 API 요청을 가로채고, 미리 정의된 대로 응답을 반환하는 역할을 합니다.
src > mock > review.ts
import {http, httpResponse } from "msw";
const export reviewsById = http.get("http://localhost:9999/reviews/:bookId", () => {
return HttpResponse.json(data, { // data는 모킹 데이터, status는 상태코드
status: 200
});
});mock 서버를 별도 분리없이 http://localhost:9999/ 그대로 사용하는 이유는
- 똑같은 서비스를 똑같은 서버를 사용해서 한다는 것이 전제로 하기 때문
- 프론트에서 base url을 별도로 분기할게 아니라면 동일하게 하는게 일반적
