MSW로 프론트엔드 개발 생산성 높이기! - MSW 사용하기

MSW 사용 방법

MSW 설치하기

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

먼저 MSW 패키지를 설치합니다.

패키지를 설치하고 나면 프로젝트에 MSW를 세팅합니다. Service Worker를 제공하기 위해 사용하고자 하는 프로젝트의 directory를 지정해서 실행해줍니다.

npx msw init ./public --save

다음을 실행하고나면 public 디렉토리에 service worker가 만들어지고 package.json에 다음과 같이 표시됩니다

{
  "name": "your-app",
  "msw": {
    "workerDirectory": "public"
  }
}

Define Mocks

이제 Mocking 할 API를 핸들링할 핸들러를 만들어주어야 합니다.
요청할 핸들러의 목록, 브라우저 및 서버별 설정을 mock definition이라고 합니다. 작성할 때 따로 규칙은 없지만, 관련 모듈들은 단일 디렉토리에 보관하는 것이 좋습니다.

src/mocks 디렉터리를 만듭니다.

디렉토리가 있으면 모든 요청 핸들러가 있는 모듈을 만들어줍니다.
방금 만든 mocks 디렉토리에서 handler.js를 만들어주면 됩니다.

REST API를 사용할 경우를 설명드리겠습니다.
패키지에서 rest를 가져옵니다.
가져와서 메서드, 경로, 응답을 통해 반환하는 함수를 지정해야 합니다.
다음은 get 요청의 예시입니다. post 등의 다른 메서드를 사용하실 경우에도 비슷하게 작성해주시면 됩니다.

위에서 작성된 req는 요청에 대한 정보, res는 응답을 생성하는 기능, ctx는 응답의 상태 코드, 헤더, 본문 등을 설정하는데 도움이 되는 함수 그룹입니다.

graphql을 사용할 경우에도 비슷하지만 조금 다릅니다. 자세한 내용은 docs를 참고하세요(https://mswjs.io/docs/getting-started/mocks/graphql-api)

이렇게 간단하게 네트워크 요청을 가로채서 Mocking API를 만들 수 있습니다.
다시 응답을 위한 핸들러를 MSW에서 사용할 수 있도록 import 해야 합니다.

마지막으로 MSW를 실행시키기 위한 코드를 추가합니다. 노드 환경 변수에 따라 MSW를 사용하기 위한 분기를 포함해서 다음과 같이 작성합니다.

MSW 동작 확인

MSW가 정상적으로 실행된다면 Chrome의 개발자 도구 콘솔 화면에서 다음과 같은 메세지를 확인할 수 있습니다.

이번에는 특정 상황에서 에러를 일으키도록 Mocking 해보겠습니다.

에러 상태를 요청하면 다음과 같은 메세지를 확인할 수 있습니다. 네트워크 탭에서도 마찬가지로 에러코드를 확인할 수 있습니다.

Reference (https://tech.kakao.com/2021/09/29/mocking-fe/)