MSW(Mock Service Worker) 적용기 😀

왜 사용하게 되었나?

프론트엔드 개발을 하면서 구현이외에 불편했던 점들은 백엔드 개발이 끝나야 프론트엔드 개발을 할 수 있다는 점이었다. 그리고 프론트엔드는 나 혼자였고, 3명에 백엔드 개발자들과 함께 하여서 한 번에 API가 많이 업데이트 되면 그만큼 몰아서 해야했다.
또한 로딩, 에러등 다양한 응답에 대한 처리를 할 때 내가 직접 각각의 해당하는 상황을 만들어야한다는 점에서 어려움이 있었다.
이러한 문제들을 해결하고 프론트엔드 개발의 생산성을 높이기 위해고민하던 도중, Mocking 대해 알게되었다.
Mocking이란 실제 API에서 받아온 값을 사용하는 것이 아니라 가짜 값을 사용할 수 있도록 하게 해주는 것이다.
Mocking는 앞에 내가 말한 상황뿐만 아니라 API를 호출할 때 비용이 발생하는 경우에도 유용하다.

Mocking 방법에는 여러가지가 있다. 화면에 필요한 데이터의 상태를 애플리케이션의 내부 로직에 직접 Mocking에서 하는 방법은 구현이 쉬워 빠르게 적용할 수 있지만 HTTP 메서드와 네트워크 응답 상태에 따라 대응하기가 쉽지않고, Mock 서버를 직접 만드는 방법은 공수가 또 든다는 점이 있다.
또한 앞에 말한 방법들은 로딩, 에러등 다양한 응답에 대한 처리를 할 때 임이의 상태를 만들어 보면서 개발하거나 디버깅하는데 어려움이 있다.

이러한 앞에 문제를 해결해 줄 수 있고, 실제 API를 사용하는 것처럼 Mocking할 수 있는 라이브러리로 MSW가 있다. MSW를 사용해보려고 한다.

MSW

MSW 라이브러리는 네트워크 수준에서 요청을 가로채서 모의 응답을 보내주는 역할을 한다. 따라서 Mock 서버를 직접 구축하지 않아도 API를 네트워크 수준에서 Mocking 할 수 있다.

Request flow를 보면,

브라우저에서 전송하는 Request를 Service Worker가 가로채어 요청을 복사하여 MSW에게 해당 요청과 일치하는 Mocked Response을 제공받고 이를 브라우저에게 전달하게 된다.

적용해보기

- 패키지 설치

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

- 디렉토리 생성

mkdir 생성할 폴더 이름

난 mkdir src/mocks로 해주었다.

Mock Service Worker는 이를 지원하는 전용 CLI를 제공한다.
- mockServiceWorker 생성

npx msw init <PUBLIC_DIR> --save

를 입력하면 mockServiceWorker.js가 생성된다.
CRA로 프로젝트를 생성한 경우

npx msw init public/ --save

하면 됨.

- src/mocks/handlers.js 파일 생성

각자 원하는 네트워크 요청에 대해 모의 API 생성하면된다.
난 questions을 가져오는 모의 API에 대해 생성했다.

import { PAGINATION_SIZE } from '@/constants/paginationSize';
import { rest } from 'msw';

export const handlers = [
  rest.get(`${process.env.NEXT_PUBLIC_API_PREFIX}/questions?page=0&size=${PAGINATION_SIZE.MAIN_QUESTION}&type='total'`, (req, res, ctx) => {
    return res(
      ctx.status(200), // 응답 상태
      ctx.delay(0), // 응답 시간
      ctx.json({ // 응답 결과
        data: {
          questions: [
            { questionId: 1, title: 'title1', content: 'content1' },
            { questionId: 2, title: 'title2', content: 'content2' },
            { questionId: 3, title: 'title3', content: 'content3' },
          ],
        }
      })
    );
  }),
];

- src/mocks/browser.js 파일 생성
모의 응답을 위한 핸들러를 MSW에서 사용할 수 있도록 import 한다.

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

export const worker = setupWorker(...handlers)

- 마지막 start worker
개발환경에서만 MSW를 실행시킬수 있도록 코드를 추가한다.

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

위의 사진처럼 콘솔에 Mock Service Worker의 [MSW] Mocking enabled 메시지가 표시되어야 한다.

성공!

사용후기

사용방법도 간단하고, 공식문서에도 잘 나와있어 적용하기에는 큰 어려움은 없었다.
또한 가장 좋은 점은 ⭐️나도 백엔드 개발자에게 재촉하지 않고, 의존적이지 않고 주도적으로 개발할 수 있어 너무 좋았다.⭐️ (은근 스트레스였다.)
API 문서가 나오면 백엔드 개발자를 기다리지 않고도 나도 프론트 개발을 하고, 나중에 추가 작업만 하면 되니 개발 전체 소요 시간도 줄어들 것 같고, 또한 다양한 상황을 고려해서 보다 쉽게 개발할 수도 있었고, 프론트 개발 자체의 시간도 줄어듦을 경험했다. 모두에게 추천해주고 싶고, 왜 지금에서야 했는지 ... 아쉽다!

References

---

• ⭐️⭐️ https://tech.kakao.com/2021/09/29/mocking-fe/ ⭐️⭐️
• https://mswjs.io/