[TIL] 22.03.11 React Mock Service Worker(리액트 목 서비스워커로 모의데이터 사용해보기 )

 

 

통상적으로 data fetch를 해야 하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다.

서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가 필요하므로 MSW를 사용하여 모의 데이터를 만들어보는 공부를 했다. 

 

 

 

MSW

- 데이터 목킹을 하는 라이브러리

- 리액트는 REST API & GraphQL support 한다.

- 실제 서버와 동일한 주소여도 서로 올라가지 않고 Interceptor 해서 msw를 통해 데이터 처리가 가능하다

- 브라우저 내에 서비스워커를 띄운후 핸들러에 특정 api 설정을 하게되면 요청에 맞는 데이터를 받을 수 있다 

 

 

- Browser 

 

응답 요청 -> 서비스 봉사자가 상태 -> res clone -> msw 전송 -> 모킹 데이터 응답

 

---

 install

$ npm install msw --save-dev
# or
$ yarn add msw --dev

 

---

Setup

핸들러를 만들었다고 동작되는것이 아니라 빌드해서 퍼블릭 안에 서비스 워커 파일을 만들어주어야한다.

PUBLIC_DIR은 어떤 프레임워크 혹은 라이브러리를 사용하고 있느냐에 따라 다른데, 우리는 리액트를 사용하고 있으므로 public/을 입력

$ npx msw init <PUBLIC_DIR> --save
|
$ npx msw init public/ --save

 

 

index.js mock setting 

import React from "react";
...

// Start the mocking conditionally.
if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser");
  worker.start();
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

 

---

여러 가지 커스텀 가능 실제 요청을 패칭 하고 데이터를 더해서 응답을 내려줄 수 있고 에러를 커스텀해서 내려줄 수 도 있다. 

 

처음에는 msw를 이용해서 서버까지 가지 않고 모의 데이터로 화면을 그리면서 실제 서버 api 구현이 다되면  데이터를 요청할 때는 msw를 다 지워야 하는가?라고 생각했다  

하지만 msw의 Response patching을 통해서 실제 응답을 받아와 직접 데이터도 처리할 수 있었고 여러 가지  커스텀할 수 있는 걸 보며 놀라웠다.

생각보다 msw를 통해서 간편하게 모의데이터를 만들 수 있다는 사실이 좀 신기했다

 

 

공부내용은 깃허브에!!! 

https://github.com/whl5105/React_Study/tree/master/msw

GitHub - whl5105/React_Study: React 공부 메모장

 

 

오늘 배운 내용 

Mocking REST API (Query parameters / Response patching / Mocking error responses / context status )

 

 

 

 

 

재미있다! 재미있어!!!