[API Mocking] API Mocking Server 구축 (1) - MSW

목차

---

1. API Mocking 정의

2. MSW
3. 사용 방법

4. 테스트

 

 

 

 

1. API Mocking 정의

---

 

 

프론트엔드 개발에서 데이터를 사용한 개발은 백엔드 API 개발에 의존하며 병렬적으로 진행된다. 

API에 종속적인 개발이 많을수록, 개발 가능한 시간과 테스트에 쏟을 수 있는 시간은 줄어든다. 

따라서 프론트엔드에서 데이터를 사용한 개발 부분의 백엔드 API 개발 의존성을 줄이기 위해서 API Mocking 개념이 등장했다.

 

API Mocking은 백엔드 서비스를 모방하는 기술로, 실제 서버를 사용하지 않고 API 호출 프로세스를 모방한다.

 

또한 프론트엔드에서 Mocking API를 통해 구현을 완료했을 때 실제 API와 연동 시 오류가 없어야 한다. 위의 과제를 만족하기 위해 Mocking API는 실제 API와 동일한 request method, url, request parameter, response data를 가져야 한다. 

 

API Mocking 서버는 다양한 방식으로 구성할 수 있다.

 

① MSW

② JSON Server

③ Jest

④ Postman

⑤ MSW + JSON Server

 

대표적으로 1 ~ 4의 방식을 사용하며 추가로 4번 방식을 고안해보았으며,

1~3 + 5번 방식에 대해 포스팅할 예정이다.

 

 

 

 

 

2. MSW

---

 

 

MSW는 Mocking Service Worker로 클라이언트 사이드에서 네트워크 요청을 Mocking 하기 위해 사용하는 라이브러리이다. 브라우저의 Service Worker를 이용하여 실제 네트워크 요청을 가로채고, 가상의 응답을 반환함으로써 테스트와 개발 환경에서 API를 Mocking할 수 있다. 

 

또한 라이브러리 및 프레임워크에 종속되지 않으며, JS 기반의 코드이므로 프론트엔드 개발자의 변경이 용이하다. 

그러나 response data나 request parameter가 수정되는 등 API 명세서 변경이 있으면 각각의 API 코드 변경이 필요하다는 단점이 있다.

 

Service Worker는 브라우저가 메인 스레드와 분리된 별도의 백그라운드에서 실행하는 스크립트이며 JS로 작성된 파일이다. 서버 사이의 Request를 가로채어 직접 Fetch 컨트롤이 가능하다.  

 

 

 

 

 

3. 사용 방법

---

⚠️ node, npm은 설치되어 있다는 가정 하에 시작한다.

 

먼저 MSW를 설치하고 브라우저에 Service Worker를 등록한다. 

 

$ npm install msw@latest --save-dev 	# MSW 설치
$ npx msw init <PUBLIC_DIR> --save 	# Service Worker 등록

 

 

 

MSW를 사용하기 위해 먼저 라이브러리를 설치하고, 애플리케이션을 Service Worker에 등록한다. 

이 때 init 명령어는 public 디렉토리 밑에 mockServiceWorker.js 파일을 생성해준다.

 

두번째 명령어 npx msw init  --save에서 PUBLIC_DIR엔 루트를 기준으로 public 디렉토리의 경로로 작성해주면 된다. (ex. npx msw init public/ --save)

 

 

MSW v2.0부터는 rest가 아닌 http를 사용해야 하며, 응답은 HttpResponse를 활용해 전송한다. 자세한 사항은 공식 문서를 참고하길 바란다.

 

https://mswjs.io/docs/getting-started

Getting started

 

 

다음으로 Handler를 정의한다.

handlers 안에 가로챌 API의 목록을 작성하고, HttpResponse.json()을 활용해 JSON 응답 형식으로 반환한다.

 

import { http, HttpResponse } from 'msw'
import { errResponse, response } from '../config/response.js'

export const handlers = [
    // [GET] 채널 리스트 조회
  http.get('http://localhost:3001/msw/profile/channel-list-info', () => {
    const channelListData = {
      totalCnt: 3,
      list: [
        {
          imgUrl:
            'https://health.chosun.com/site/data/img_dir/2023/07/17/2023071701753_0.jpg',
          appSortIndex: 1,
          appKorNm: '채널첫번쨰등록',
          appType: 'C0A801CD0190BFD02932D2D145345345518A1B822',
          appOsType: 'T',
        },
        {
          imgUrl:
            'https://health.chosun.com/site/data/img_dir/2023/07/17/2023071701753_0.jpg',
          appSortIndex: 1,
          appKorNm: '두번째채널등록',
          appType: 'C0A801CD0190BFD0B2FEF8757435453F72EFD85A4',
          appOsType: 'A',
        },
      ],
    }

    return HttpResponse.json(
      response({ respCode: 200, respMsg: '응답성공' }, channelListData),
    )
  }),

  // [GET] 활동 사용자 수 조회
  http.get('http://localhost:3001/msw/dashboard/active-user-info', ({ request }) => {
    const url = new URL(request.url);
    const searchFromDate = url.searchParams.get('searchFromDate'); // 등록 날짜 (시작일)
    const searchToDate = url.searchParams.get('searchToDate'); // 등록 날짜 (종료일)

    if(!searchFromDate || !searchToDate) {
        return new HttpResponse.json(
            errResponse({ respCode: 400, respMsg: "REQUEST_ACTIVE_USER_INFO_FAIL" }),
        )
    }

    const activeUserData = { setActiveCnt: 2, newInstallCnt: 2, clickCnt: 1, setNotiCnt: 2 };
    return HttpResponse.json(response({ respCode: 200, respMsg: "응답성공" }, activeUserData));
  }),
]

 

 

 

Handler로 실제 Mocking Server가 요청을 가로채서 처리하는 부분을 작성했다면, Service Worker를 정의한다.

 

// src/mocks/msw/worker.js

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

export const worker = setupWorker(...handlers)

 

 

 

작성한 Service Worker가 실행될 수 있도록 index.js 또는 index.jsx에 Service Worker를 활성화시켜주면 MSW Mocking을 위한 준비 작업은 완료됐다.

 

// src/index.jsx

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

import { worker } from './mocks/msw/worker'
if (process.env.NODE_ENV === 'development') {
  worker.start() // Service Worker 활성화
} 


// eslint-disable-next-line react/no-deprecated
ReactDOM.render(<App />, document.getElementById('root'))

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

 

 

 

 

 

4. 테스트

---

MSW Mocking 서버를 실행하고 브라우저로 접속 했을 때 F12 개발자 도구로 Console 창을 확인해보면

!!!! [MSW] Mocking enabled !!!!

위의 문구가 적힌 로그를 확인할 수 있으며

 

 

 

Application 창에서는 mockServiceWorker를 기준으로 Service Worker가 activated 된 상태임을 확인할 수 있다. 

 

 

 

 

Handler에서 정의해둔 URL로 요청을 보내면

 

 

Mocking 서버가 이를 가로채 처리하고 Handler → Service Worker  →  브라우저를 거쳐 응답을 반환한다.

요청에 성공한 경우 Console 창에서 200 OK, Resoponse 값을 확인할 수 있다.