MSW로 Mocking 하기

Mocking

Mocking이란?

mock이란 가짜의라는 뜻으로 프로그래밍에서 mocking은 실제 객체를 제대로 구현하기 어려운 경우에 가짜 객체를 만들어 사용하는 것을 말한다.

프론트엔드에서 서버가 구현되기 전에 요청/응답이 필요한 경우 mocking을 통해 제대로 구현이 되는지 확인할 수 있다.

Mocking의 장점

서버와의 통신이 필요한 프론트엔드의 기능 개발이 필요한 경우, 백엔드의 API가 구현되기 전까지 개발을 진행하기 어려운데 mocking을 통해 백엔드와 프론트엔드 개발을 병행할 수 있다.

MSW

MSW.js

MSW(Mock Service Worker, https://mswjs.io)는 API Mocking 라이브러리로, 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 한다. 브라우저뿐만 아니라 node 환경에서도 사용할 수 있어서 next js의 서버 사이드에서 생성되는 페이지나 node 기반 서버 환경에서도 사용할 수 있다.

사용법

msw 설치

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

브라우저

import { setupWorker, rest } from 'msw'
const worker = setupWorker(
  // Provide request handlers
  rest.get('/user/:userId', (req, res, ctx) => {
    return res(
      ctx.json({
        firstName: 'John',
        lastName: 'Maverick',
      }),
    )
  }),
)
// Start the Mock Service Worker
worker.start()

Node

import { rest } from 'msw'
import { setupServer } from 'msw/node'
const server = setupServer(
  // Describe the requests to mock.
  rest.get('/book/:bookId', (req, res, ctx) => {
    return res(
      ctx.json({
        title: 'Lord of the Rings',
        author: 'J. R. R. Tolkien',
      }),
    )
  }),
)

server.listen()

msw의 예제 코드를 보면 알 수 있듯이 사용법이 매우 간단하다. mocking할 요청의 응답을 rest를 사용하여 작성한 후, 브라우저 요청의 경우 setupWorker, Node 환경일 경우 setupSever에 응답을 등록하고 각각 start()와 listen() 메서드를 사용하여 msw가 동작할 수 있도록 설정해주면 된다.

실제 코드 적용

//mocks/handlers.js
import { rest } from 'msw';

export const handlers = [
  rest.post('/test1', (req, res, ctx) =>
    res(ctx.status(200), ctx.json({ data: 'test1'})),
  ),
  rest.get('/test2', (req, res, ctx) =>
    res(ctx.status(200), ctx.json({ data: 'test2' }))
  ),
        ...
];

//mocks/browser.js
import { setupWorker } from 'msw';

import { handlers } from './handlers';

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

//mocks/server.js
import { setupServer } from 'msw/node';

import { handlers } from './handlers';

export const server = setupServer(...handlers);

//mocks/index.js
const initMockAPI = async (): Promise<void> => {
  if (typeof window === 'undefined') {
    const { server } = await import('../mocks/server');
    server.listen();
  } else {
    const { worker } = await import('../mocks/browser');
    worker.start({ onUnhandledRequest: 'bypass' });
  }
};

export default initMockAPI;

//_app.js
if (process.env.NODE_ENV === 'development') {
    initMockAPI();
}

nextjs 프로젝트에 msw를 적용한다면 handler와 setup 부분을 분리해서 작성하고 환경변수에 따라 실행될 수 있도록 하는 방식으로 보통 사용된다.

마치며

이전에 mocking이란 개념을 몰랐을 때는 더미데이터를 만들어서 기능 구현에 사용하고 API 개발이 완료된 이후에 네트워크 요청 부분을 다시 작성하는 형태로 개발을 진행했었는데 msw를 활용하면 백엔드 개발이 완료되기 이전에 프론트 개발을 마치고 추후에 요청 url만 변경해주면 되기 때문에 편리했다. 또 네트워크 에러가 발생하는 경우도 시뮬레이션이 가능하고 mocking 하는 과정에서 API와 관련된 제약사항을 미리 확인할 수 있다는 장점도 있었다.