MSW.js으로 Mocking with TS

Mocking을 하는 여러 방법 중 MSW.js를 이용해 봅시다. 

MSW.js

MSW(Mock Service Worker)는 API Mocking 라이브러리며, 서버향의 네트워크 요청을 가로채 모의 응답을 보내줍니다.  Mock 서버를 구축하지 않아도 API 를 네트워크 수준에서 Mocking 할 수 있다네요.  MSW.js 는  서버로 가는  네트워크 요청을 어떻게 가로채 응답을 줄 수 있을 까요? 이유는 Service Worker 때문입니다. 

Service Worker 

웹 애플리케이션의 메인 스레드와 분리된 별도의 백그라운드 스레드를 실행시킬 수 있는 기술입니다. 다음과 같은 기능이 있습니다. 특히 네트워크 요청을 가로채는 행위를 통해 HTTP Request 와 Response를 보고 캐싱처리 등 다양한 작업이 가능합니다. 

• 네트워크가 원활할때 동기화 시켜주는 백그라운드 동기화 기능
• 높은 비용의 계산 처리 
• 푸시 이벤트 생성
• 네트워크 요청을 가로채는 행위 (MSW의 동작 방식)

주의! service worker 는 IE 와 같은 브라우저에서 지원하지 않고, localhost 가 아닌 환경이라면 HTTPS 보안 프로토콜 환경이 필요합니다. 

MSW 동작원리

1. 브라우저에서 서버에게 요청을 보낸다.
2.  Servie Worker 가 요청을 가로채고  실제 요청을 복사해 MSW 에게 요청한다.
3. MSW 는 요청에 대한 모의 응답을 Servie Worker에게 준다.
4. Servie Worker는 받은  모의 응답을 브라우저에게 제공한다. 

응답을 가로채 FE 생산성을 챙겨주는 MSW 소녀

MSW 사용법 

msw 소녀를 사용해봅시다. 설치해주고  기반 코드를 생성해줍시다.

1. 설치

npm install msw --save-dev
//yarn
yarn add msw --dev

npx msw init public/ --save

2. 요청 핸들러  handler.js 생성

임의의 응답을 보내주는 핸들러를 만듭니다. 보통 src 폴더> mock폴더> handlers.js 파일 형태로 만들어염. 기본적으로 handlers는  여러개 생성함으로 보통 배열 형태로 관리됩니다. 다음 코드는 rest 방식으로 작성되었습니다.  rest 에 http메서드를 붙여 handler 를 정의합니다.  http메서드의 인자로 두가지를 넣어야합니다. 

1.  URL 경로
2. 이후 과정을 처리하는 콜백 함수

콜백 함수의 매개변수는 3가지 req, res, ctx 가 옵니다. 만약 클라이언트에서  이메일과 비밀번호를 전송해 로그인을 시도하면 이메일과 비빌번호가 req.body에 들어오는 식입니다.  받은 이메일과 비빌번호가 유효하다면 그에 대한 성공상태코드,사용자정보등은 res 에 작성해 보내면 됩니다. 

1.  req : 요쳥 처리  
2. res : 응답 처리
3. ctx :  응답 세부 사항 명시

import { rest } from 'msw';
const todos = ['먹기', '밍재님놀리기', '밥먹기', '공부하기'];

export const handlers = [
  //할일 목록
  rest.get('/todos', (req, res, ctx) => {
    return res(ctx.status(200), ctx.delay(4000), ctx.json(todos));
  }),
  // 할일 추가
  rest.post('/todos', (req, res, ctx) => {
    todos.push(req.body);
    return res(ctx.status(201));
  }),
];

export default handlers;

3. 서비스 워커 생성 Service Worder  생성 및 삽입 

msw 모듈에서 제공하는 setupWorker 함수의 인자로 handlers 배열의 요소들을 넣어줍니다.

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

export const worker = setupWorker(...handlers);

//main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { BrowserRouter } from 'react-router-dom';
import {worker} from "./mocks/worker.js";
if (process.env.NODE_ENV === "development") { //개발 환경에만 mock api 를 사용하도록 환경변수를 체크하여 선택적으로 서비스 워커가 작동되도록 합니다.
  worker.start();
}
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
)

이제 애플리케이션을 구동후 브라우저의 콘솔창에 다음과 같은 메시지가 뜨면 msw 가 잘 동작하고 있음을 의미합니다.(야-호) 

출처

https://tech.kakao.com/2021/09/29/mocking-fe/

Mocking으로 생산성까지 챙기는 FE 개발

https://velog.io/@ckm960411/Mock-Service-Worker-%EA%B8%B0%EB%B3%B8%EC%A0%81-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-TypeScript-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

Mock Service Worker 기본적 사용법 및 TypeScript 적용하기

https://www.daleseo.com/mock-service-worker/

MSW로 백엔드 API 모킹하기