React에서 MSW를 가져오려면

현재 참여 중인 프로젝트 중 사용된 것은 Mock Service Worker(이하 "MSW")다.프런트엔드 개발 시
"임시라도 괜찮아요. API를 찍어서 데이터를 얻고 싶어요."
이런 장면이 있지만.
나는 그런 자리가 매우 편리하다고 생각해서 사용 방법을 총결하였다.
공식 홈페이지를 참고하게 해 주세요.
https://mswjs.io/

설치하다.

Create React App

공식 문서에는 크리에이트 리액트 앱을 가져오는 절차에 따라 작성되기 때문에 리액트 앱을 먼저 새로 만들어야 한다.

npx create-react-app my-app

MSW 설치

MSW가 설치됩니다.

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

모듈 정의

요청 처리 프로그램 함수를 사용하여 어떤 요청 모듈을 정의합니다.
이 함수를 사용하면 방법, URL 및 기타 조건에 따라 요청을 포착하여 어떤 응답을 되돌려줄지 지정할 수 있습니다.
MSW를 사용할 때 요청 처리 프로그램, 브라우저, 서버 특정 설정 등을 일람하는 것을 모듈 정의라고 한다.
모듈 정의의 관리에는 엄격한 규칙이 없지만 API 모듈과 관련된 모듈은 한 디렉터리에 집중하는 것이 좋다.
디렉토리를 생성합니다.

mkdir src/mocks

디렉터리를 만든 후 모든 요청 처리 프로그램을 저장하는 모듈을 만듭니다.

touch src/mocks/handlers.js

API 선택

MSW에서 API를 시뮬레이션하는 방법은 실제 응용 프로그램에서 API를 사용하는 방법과 비슷합니다.
모듈을 만들려는 API의 종류에 따라 프로그램이 변경됩니다.

REST API

GraphQL API

이번에는 REST API를 선택합니다.

REST API 모듈화

src/mocks/handlers.js 파일에서 REST API를 모듈화하는 데 필요한 내용을 가져옵니다.
이 집합은 프로그램 라이브러리에 공개된 rest 명칭 공간 아래에 있다.
handlers.js

import { rest } from 'msw'

Request handler 구현

REST API 요청을 처리하려면 메서드와 경로를 지정하고 모듈식 응답을 반환하는 함수를 지정해야 합니다.
사용자의 기본적인 로그인 절차를 모듈화합니다.
다음 두 가지 요청을 처리합니다.

POST /login: 사용자의 로그인을 허용합니다.

GET /user: 로그인한 사용자에 대한 정보를 반환합니다.

handlers.js

import { rest } from 'msw'
export const handlers = [
  // /login へのPOSTリクエストを処理
  rest.post('/login', null),
  
  // /user へのGETリクエストを処理
  rest.get('/user', null),
]

Response resolver 설치

차단된 요청에 응답하기 위해서는 응답 해상도 함수를 사용하여 모듈 응답을 지정해야 합니다.
응답 구해기는 다음 매개 변수를 받아들이는 함수입니다.

req: 일치 요청에 대한 정보

res: 모듈 응답을 생성하는 함수 유틸리티

ctx: 상태 코드, 제목, 주체 등을 설정하는 함수 그룹

위에서 정의한 요청 처리 프로그램에 응답 해석기를 설치합니다.
handlers.js

import { rest } from 'msw'

export const handlers = [
  rest.post('/login', (req, res, ctx) => {
    // ユーザーの認証をセッションに永続させる
    sessionStorage.setItem('is-authenticated', 'true')

    return res(
      // 200のステータスコードで応答する
      ctx.status(200),
    )
  }),

  rest.get('/user', (req, res, ctx) => {
    // ユーザーが認証されているかどうかを確認する
    const isAuthenticated = sessionStorage.getItem('is-authenticated')

    if (!isAuthenticated) {
      // 認証されていない場合、403エラーで応答する
      return res(
        ctx.status(403),
        ctx.json({
          errorMessage: 'Not authorized',
        }),
      )
    }

    // 認証された場合、模擬ユーザの情報を返す
    return res(
      ctx.status(200),
      ctx.json({
        username: 'admin',
      }),
    )
  }),
]

병합

브라우저 환경과 노드 환경은 같은 요청 처리 프로그램을 공유할 수 있습니다.
Node에서 Service Worker를 시작할 수 없으므로 환경에 따라 결합 방법이 다릅니다.
이번에는 브라우저 환경에서 작동합니다.

설정

MSW는 요청한 서비스 워커에 로그인하여 클라이언트 측에서 작업을 수행합니다.그러나 직접 Worker 코드를 작성하지 않고 라이브러리에서 나눠준 Worker 파일을 복사해서 사용할 수 있습니다.MSW는 전용 CLI를 제공하므로 이 기능을 사용합니다.
Mock Service Worker CLIinit 명령을 실행합니다.

npx msw init <PUBLIC_DIR> --save

<PUBLIC_DIR>는 자리 표시자를 공개 디렉터리로 대체하는 상대적인 경로입니다.
Create React Appliance에서 명령은 다음과 같습니다.

npx msw init public/ --save

워크맨 설정

모듈의 정의 디렉토리src/mocks에 Service Worker 설정 및 시작을 위한 파일을 만듭니다.

touch src/mocks/browser.js

browser.js 파일에서 위에서 정의한 요청 처리 프로그램을 사용하여 직원 실례를 만듭니다.
browser.js

import { setupWorker } from 'msw'
import { handlers } from './handlers'

// 指定されたリクエストハンドラを持つサービスワーカーを設定する
export const worker = setupWorker(...handlers)

일을 시작하다

모듈 정의를 실행하려면 프로그램 코드를 가져와야 합니다.
모듈은 개발용 기술이기 때문에 환경에 따라 src/mocks/browser를 선택합니다.js 파일을 조건부로 가져와야 합니다.
!
공식 문서에도 기재되어 있지만 정식 환경에서 MSW를 사용하는 것은 추천하지 않는다.
src/mocks/browser.다음 예에 따라 js 파일을 가져올 조건이 있습니다.
index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

ReactDOM.render(<App />, document.getElementById('root'))

확인 및 검증

모듈 정의를 가져오면 브라우저의 콘솔에 MSW 활성화 성공 프롬프트가 표시됩니다.

이 정의와 일치하는 프로세서의 요청이 끊기고 모듈화되었습니다.

참고 자료

https://mswjs.io/

총결산

이상은 React에서 MSW를 사용하는 단계입니다.
나는 다른 프로젝트에 참여할 때 상황에 따라 가져오고 싶다.