webpack devServer에서 mock-service-worker 사용하기

msw 공식문서가 친절해서 그대로 따라하면 된다.

Install

npm install msw --save-dev

Mock definition

폴더네이밍은 자유로 mocks 라는 폴더를 만들어서 handler.js를 아래와 같이 생성했다.

import { rest } from 'msw';

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

Setup

npx msw init <PUBLIC_DIR> --save

위 명령어를 실행하여 mockServiceWorker.js를 <PUBLIC_DIR>에 생성한다.
<PUBLIC_DIR>이 중요한데 mockServiceWorker.js 파일이 서버가 실행되었을때
root path에서 접근이 가능한 경로에 있어야한다.
쉽게 말하자면 127.0.0.1:3000/mockServiceWorker.js 로 리소스를 가져오도록 세팅해야 한다는 말이다.

그래서 나는 npx msw init mock --save를 실행해주고
devServer.contentBase에 mock 디렉토리를 지정해 주었다.

여기서 헷갈렸던 webpack 세팅을 잠시 정리..

1. output.publicPath
   리소스가 제공 될 웹 서버의 디렉토리 라고 생각하면 된다.
   output.publicPath가 /dist/라고 지정되어있고 HtmlWebpackPlugin을 사용한 경우 빌드된 index.html에 import 되는 스크립트의 경로는 /dist/로 시작한다.

   The webpack-dev-server also takes a hint from publicPath, using it to determine where to serve the output files from.

   공식문서에는 위와 같이 설명되어있는데 webpack-dev-server는 output.publicPath에 설정된 path를 통해 wepback 파일을 제공할 위치의 힌트를 얻는다.

   

   devServer에 대한 별다른 설정없이 output.publicPath가 /dist/인경우
   webpack-dev-server를 실행하면 127.0.0.1:3000/dist로 접근해야 하는점에 유의해야한다.
   

2. devServer.contentBase
   정적리소스의 경로를 설정한다.
   즉 웹팩에서 제공하지 않는 파일은 설정된 경로에서 찾겠다는 뜻이다.

3. devServer.publicPath
   devServer가 wepback 파일을 제공할 위치이다.
   devServer.publicPath에 설정된 값이 없다면 기본은 /지만
   위에 말한대로 output.publicPath이 설정되어있다면 output.publicPath의 값으로 설정하게 된다.

Configure worker

mocks 폴더내에 browser.js를 만들어서 아래와 같이 작성한다.

import { setupWorker } from 'msw'
import { handlers } from './handlers'
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

Start worker

entry 파일에 development mode의 경우 worker를 start해주는 코드를 추가한다.

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'))

적용 확인

console에 아래와같이 뜬다면 세팅이 완료된것이다.

api테스트도 아래와 같이 뜬다면 성공!