Development Etc. - MSW(Mock Service Worker)

 

 

MSW(Mock Service Worker)?🤔

프론트엔드 개발을 하다 보면 백엔드 API 개발 속도와 맞지 않아 화면 단을 먼저 개발하거나 자신이 직접 Dummy Data를 만들어서 억지로 개발하는 경우가 많이 있었다.

 

그때마다 억지로 JSON을 데이터를 만들거나 백엔드 API 개발을 하는 데까지 기다렸다가 겨우 일정에 맞춰 빡빡하게 개발하는 경우가 많았는데, 최근에 토이프로젝트를 하면서 찾게 된 게 MSW(Mock Service Worker)다.

 

MSW는 말 그대로 Mock 데이터를 API 통신처럼 사용하게 해줄 수 있는 라이브러리이다.

 

백엔드에서 앞으로 나올 API의 명세서가 있거나 Request에 필요한 어떤 키값을 쓸 건지 전달만 받으면 따로 별도의 서버를 사용하지 않고도 프론트엔드 프로젝트에서 Mock API 만들어 Mock Data를 통해 화면 개발에도 속도를 맞춰가며 개발을 할 수 있다는 장점이 있다.

 

예전에는 서버 통신을 위해 Node.js의 Express로 간이 서버를 만들어서 개발한 적도 있었는데 그때마다 프로젝트를 하나 만들어서 서버를 띄우고, 또 그 프로젝트를 따로 관리를 해줘야 하고 개인적으로 불편한 게 참 많았는데 MSW는 개발 서버만 띄어놓아도 MSW의 Service Worker도 함께 올라가서 프로젝트를 2개씩이나 관리할 필요도 없는 장점을 가지고 있다.😊

 

How to MSW?🤓

MSW를 사용하기 위해서는 먼저 Yarn이나 npm 명령어로 라이브러리를 설치해주면 된다.

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

명령어에 ”—dev”가 들어간다는 것은 개발 환경에서만 사용하겠다는 건데, 실제 프로젝트를 Production 단위로 배포할 때는 라이브러리를 package.json에 dependencies에 포함시키지 않고 devDependencies에 만 넣겠다는 의미이다.

 

실제 프로젝트를 배포할때는 msw가 필요하지 않기 때문이다!!

 

그 후 Mock Service Worker를 사용하기 위해 Setup을 해준다. MSW의 Server Setup은 앞단에서 사용할 수 있는 “Browser”와 Node에서 실행 할 수 있는 “Node” 두가지 방식을 선택할 수 있다.

이번 예제는 앞단에서 사용하기 위해 Browser 방식을 소개하려고 한다.

npx msw init public/ --save
or
npx msw init <PUBLIC_DIR> --save

MSW 라이브러리 공식 홈페이지에서는 Worker의 Setup을 기본적으로 “public” 폴더에 설치를 권장하고 있는데 프로젝트 환경에 따라 다른 폴더를 지정해서 사용하는 것도 가능한 것 같다. 혹시나 "public" 폴더에 설치를 하고 나중에 바꾸고 싶다면 package.json에서 수정도 가능한 것 같다.

 

worderDirectory에서 경로 수정이 가능하다.

 

설치가 완료 되었다면 “src” 폴더 안에 “mocks” 이라는 폴더를 만들어 주고 “browser.js(ts)” 파일을 만들어 준다.

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

export const worker = setupWorker(...handlers)

brower.js(ts) 파일은 실제 Mock Service Worker를 실행시켜줄 Server Start 도구라고 생각하면 된다.

Worker에 실제 사용할 handlers를 등록해줌으로써 동작한다고 볼 수 있다.

그 후 mocks 폴더 안에 실제 Mock API Method를 만들어 줄 “handlers.js(ts)” 파일을 만들어 준다.

// src/mocks/handlers.js
import { rest } from 'msw'
export const handlers = [
  rest.post('/login', (req, res, ctx) => {
    sessionStorage.setItem('is-authenticated', 'true')
    return res(
      ctx.status(200),
    )
  }),
  rest.get('/user', (req, res, ctx) => {
    const isAuthenticated = sessionStorage.getItem('is-authenticated')
    if (!isAuthenticated) {
      return res(
        ctx.status(403),
        ctx.json({
          errorMessage: 'Not authorized',
        }),
      )
    }
    return res(
      ctx.status(200),
      ctx.json({
        username: 'admin',
      }),
    )
  }),
]

handler는 실제 Mock 데이터를 API를 통해 전달받을 수 있게 하는 API 주소들의 배열이라고 생각하면 될 것 같다.

rest라는 메서드를 통해 post, get, patch 등등 HTTP Method를 활용할 수 있어 우리가 자주 사용하고 있는 axios 라이브러리를 통해 API 통신을 하는 것과 비슷한 개념으로 사용하면 될 것 같다.

 

API 주소에 따라 필요한 Response에 데이터를 만들어 값을 받을 수 있고 때에 따라 403 에러나 400 에러 등 다양한 에러 케이스를 만들 수도 있어 앞단에서 에러 처리의 대한 개발도 할 수 있도록 할 수 있다.

 

마지막으로 index.js에 등록된 handler를 실행 할 수 있도록 해주는 browser를 등록할 Code를 등록해 주면 끝난다.

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start()
}
ReactDOM.render(<App />, document.getElementById('root'))

MSW가 정상적으로 동작하면 개발자 도구 Console 창에 "Mocking enabled"라는 문구가 나온다.

 

MSW for Next.js😳

React.js나 Vue.js같은 기본적으로 CSR을 하는 라이브러리들은 MSW 초기 세팅을 해줄 때 딱히 크게 해줄 거 없이 공식 홈페이지에서만 나오는 방법 그대로 따라 해도 되지만 Next.js는 SSR 기반이라 MSW를 실행하기 위해 설정이 약간 다르다.

MSW가 공식적으로 Next.js에서의 환경 설정을 해주는 방법을 github를 통해 설명해주고 있으니 참고해서 사용하면 될 것 같다.

참고 : https://github.com/vercel/next.js/tree/canary/examples/with-msw

 

마무리👍

MSW를 사용하면서 호불호가 좀 많이 갈리는 라이브러리라고 생각이 들기도 했다.

굳이 프로젝트에 Mock 데이터를 위해 폴더를 하나 더 생성하고 그 폴더 안에 파일들을 이것저것 많이 넣어야 되니 사실상 관리하기는 편하지만 쓸데없이 파일의 양이 늘어나는 게 아닐까 하는 사람들도 있기 마련이기 때문이다. 그러나 실보다 득이 더 많은 라이브러리가 아닐까 싶기도 하다. 개인적으로 각종 다양한 프로젝트들을 할 때는 MSW는 한번 API의 Mock 데이터를 작성하는 게 귀찮더라도 나중에 실제 API가 나왔을 때의 개발 속도를 맞추기 위해서라도 꼭 사용할 라이브러리라고 생각이 든다.