Mocking 서비스 도입하기 (msw)

안녕하세요! aloveu입니다.

프로젝트를 진행할 때 기획도 나오고 api 명세도 나왔는데 백앤드 api 개발이 완성될 때까지 기다리고 계시나요?

아니면 비즈니스 로직 안에 받을 데이터를 모두 넣어 소스가 지저분 해지나요?

오늘은 그냥 api 통신을 하고 데이터만 내가 설정한 데이터를 받아 볼 수 있게 하는 msw라는 라이브러리를 알아보겠습니다.

---

| 설치

> npm i msw 
> npx msw init public/ --save

프로젝트 루트에서 설치하면 public 폴더 및에 mockServiceWorker.js 파일이 생성되는데 이 서비스워커를 우리 프로젝트에 등록을 해줘야 합니다. 

그게 두 번째 줄에 있는 명령어인데 msw에서 제공하는 init 명령어로 따로 설정할 필요 없이 바로 등록이 가능합니다.

동작 원리는 http 통신할 때 서비스워커에서 fetch로 인터셉터 후 미리 response로 설정해 둔 mock data를 내려주는 방식입니다.

| 프로젝트 내 세팅

하지만 이 서비스워커에서 인터셉트하는 방식이 mocking 파일에서 설정한 api 주소를 비교해서 설정한 주소와 동일하면 데이터를 내려주는 방식이라 이대로 prod까지 올라가게 되면 낭패겠죠.

그래서 local 환경에서만 쓸 수 있도록 설정을 해줘야 합니다.

src/mocking 폴더 아래 index.mocking.ts 파일에 각 서비스별 moking file을 임포트를 합니다. 

// @/mocking/index.mocking.ts
import { setupWorker } from 'msw';
import xxMocking from '@/services/mocking/xx.mocking';

export const mocking = setupWorker(...xxMocking);

 

그리고 각 프로젝트의 루트가 되는 파일에서 환경별 설정을 해주시면 되는데 저는 vue를 사용하고 있어서 App.vue 파일에 작성을 합니다.

// App.vue
if (process.env.NODE_ENV === 'local') {
    const { mocking } = require('@/mocking/index.mocking');

    mocking.start({ onUnhandledRequest: 'bypass' });
}

 

mocking 폴더 내에 작성된 각 서비스의 mocking 파일들은 url 기반으로 서비스워커에서 인터셉터하기 때문에 url기준으로 작성되어야 합니다. 

// xxMocking.mock
import { rest } from 'msw';

export default [
    rest.post('/xxx/xxxRequeseAPI', (req, res, ctx) => {
        return res(ctx.delay(300), ctx.json({
            name: '오늘의발견',
            email: 'xxx@xxx.com',
        }));
    })
];

msw의 rest 메서드를 가져다가 api 호출을 mock data로 교체하는 부분인데 request의 payload는 req.body 안에서 확인하면 되고, payload에 따라 리턴할 response값을 달리 줄 수 있습니다.  

리턴 값에는 호출 딜레이( ctx.delay(ms) )와 리턴할 json 값을 설정해 주면 됩니다. 
프로젝트 앱에서 실행했을 때 네트워크 탭에서 볼 수 있는 건 실제 api 통신을 했을 때와 거의 동일하게 동작합니다. 

 

| 마무리

이 msw를 적용했을 때 이점은 api 스펙만 미리 정해져 있다면 실제 api 가 완성됐을 때 api호출하는 서비스 파일 수정 없이 바로 적용이 가능하다는 점과 실제 주고받는 req/res 데이터를 쉽게 조작/디버깅할 수 있다는 점입니다. 

이 외에도 직접 오류를 내지 않아도 mocking 파일에서 에러를 각 상황별로 내볼 수 있어서 쉽게 에러 핸들링을 할 수 있습니다.

오늘은 익숙해진다면 개발 능률이 훨씬 더 오를 수 있게 해주는 msw를 알아봤는데요. 모두 즐코딩했으면 좋겠습니다.

오늘도 감사합니다. ^___^

 

| 참고

Mocking으로 프런트엔드 DX를 높여보자 | 요즘 IT ( https://yozm.wishket.com/magazine/detail/1711/ )
Describing REST API ( https://mswjs.io/docs/network-behavior/rest )