[Worksheet 220518] React 데이터 모킹 라이브러리

Mocking

Mock(모의 데이터)을 만들어서 활용하는 방식
data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 그래서 모킹을 활용하면 서버를 만들지 않고 활용할 수 있다.

API 요청으로 내려올 데이터를 프론트에서 모킹하거나, 서버의 역할을 해주는 무언가가 필요하다.

MSW

Mock Service Worker

• 설치
  npm install msw --save-dev

• 브라우저
  setupWorker(...handlers)

• 핸들러

import { rest } from 'msw'
// Matches any "GET /user" requests,
// and responds using the `responseResolver` function.
rest.get('/user', responseResolver)

• index.js

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

브라우저와 핸들러만 있어도 동작한다.

• init
  npx msw init <PUBLIC_DIR> [options]
  <PUBLIC_DIR> 은 프로젝트 starter를 무엇으로 했는지에 따라 확인하고 지정해주면 된다.
  CRA 같은 경우 public