MSW로 실제 네트워크 환경에서 Mocking하기

개요

 프로젝트를 벡엔드 개발자와 같이 하다 보면 API가 완성되지 않아 프론트 코드 구현에 어려움을 겪을 때가 있다. 왜냐하면 dummy data를 이용해 개발을 한다 하더라도 네트워크를 통한 실제 API 호출 환경과는 차이가 있기 때문이다. 이에 마감기한이 거의 다가와서야 개발을 시작할 수 있는 부분도 있는데 이를 위해 네트워크 환경에서 mocking을 할 수 있는 라이브러리인 msw.js에 대해 소개하고자 한다.

 

Service Worker에 대해

 MSW는 Mock Service Worker의 약자이다. 이 라이브러리를 이용해 실제 서버를 만들지 않고 네트워크 요청을 통한 테스트가 가능하다. 따라서 MSW는 service worker를 이용한 mocking 라이브러리이고 service worker에 대해 간략하게 설명하고자 한다.

출처: https://love2dev.com/blog/what-is-a-service-worker/

 Service worker는 웹 브라우저 백그라운드에서 실행되는 스크립트로, 메인 스레드와 분리된 백그라운드 스레드에서 실행시킬 수 있는 기술이다. 이를 이용해 실제 네트워크 환경에서 mocking을 할 수 있으나 비동기적으로 동작하고 보안상의 이유로 HTTPS 환경에서만 작동한다.

MSW.js 사용법

 다음 코드를 사용해 우선 라이브러리를 설치한다.

npm i msw --save-dev

그리고 나서 public폴더에 mockserviceworker를 생성하기 위해 다음 명령어를 입력한다.

npx msw init <PUBLIC_DIR> [options]
// npx msw init ./public

나는 CRA를 이용하여 프로젝트를 만들어서 아래 주석 코드를 통해 init을 하였다.

 

그리고 나서 root폴더에 mocks폴더를 만들고 handler.js와 brower.js에 각각 다음 코드를 입력한다.

// handler.js
import { http, HttpResponse } from 'msw';

export const handlers = [
    http.get('/resource', (info) => {
        // Response 객체를 사용하여 응답
        return new Response(JSON.stringify({ id: 'abc-1234' }), {
            headers: {
                'Content-Type': 'application/json',
            },
            status: 200
        });

        // msw의 HttpResponse를 사용하여 응답
        return new HttpResponse(JSON.stringify({ id: 'abc-123' }), {
            headers: {
                'Content-Type': 'application/json',
            },
            status: 201
        });
    })
];

return문이 두개인데 msw의 버전이 2로 올라감에 따라 req, res, ctx로 나뉘던게 info 하나로 통합되었다. 따라서 get method를 지원하는 객체가 http와 httpresponse 두가지가 되었다. 두가지의 차이점에 대해 더 자세히 알고 싶으면 https://mswjs.io/docs/migrations/1.x-to-2.x/ 이 링크를 참고하기 바란다.

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

const worker = setupWorker(...handlers);
await worker.start();

이렇게 하고나면 폴더구조는 다음과 같을 것이다.

마지막으로 앱의 진입점에서 worker를 호출하기 위해 index.js에 browers를 import한다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import './mocks/browser';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

이렇게 하면 세팅은 모두 마쳤다.

 개발자 도구 콘솔을 통해 msw가 활성화 되었음을 알 수 있다. 이제 handler.js에서 정의한 대로 /response로 call을 보내서 응답이 맞게 오는지 개발자 도구의 콘솔을 통해 확인할 수 있다. 

    fetch('/resource')
        .then((response) => response.json())
        .then((data) => {
          console.log(data)
        })
        .catch((error) => {
          console.error('Error fetching data:', error);
        });

다음 코드를 통해 api 콜을 보냈고 그에 따른 응답을 콘솔에서 확인할 수 있었다.

결론

이번 글을 통해 실제 네트워크 환경에서 mocking을 할 수 있는 library인 msw.js의 사용방법에 대해 간략하게 알아보았다. msw는 이 밖에도 응답시간 설정 및 object를 본인의 api interface에 맞게 수정할 수 있으므로 많은 프론트 개발자들이 api 개발진행정도에 관계없이 편한 개발을 하는데 도움이 되길 바란다.