보통 서비스를 만들때 프론트 개발자는 서버 API 가 완성되기 이전부터 작업을 하는 경우가 더러 있습니다.
이때 임시로 mock 데이터를 만들어서 작업을 먼저 하곤 합니다.
하지만 단순히 상수나 .json 파일로 저장해서 사용한다면, 나중에 ajax 요청을 하도록 전체 코드를 변경 시켜야 하는 경우가 생깁니다.
그래서 임시 서버를 띄워두고, 프론트에서 개발할 때는 실제로 mock 서버로 요청을 보내도록 해서, 서버 url 만 수정하면 되도록 작업하는것이 실제 API 로 교체할 때 좀더 공수를 줄일 수 있습니다.
MSW 를 사용하면 Service Worker 를 사용해 네트워크 단에서 요청을 proxy 하여, 실제 API 를 사용하는 것과 거의 동일한 구조로 코드를 작성할 수 있어 유용합니다. 또 Jest, Cypress 와 같은 테스트 러너에서도 동일한 요청 핸들러를 공유할 수 있어, 테스트에도 그대로 사용할 수 있다는 점도 장점중 하나입니다.
🙌 yarn create vite 환경으로 진행합니다.
과정
과정은 너무나 간단합니다. 그만 큼 문서의 내용도 짧고, express 와 같은 node 서버를 작성한 경험이 있다면, 90% 는 안다고 보셔두됩니다.
라이브러리 설치
npm i -D msw
Service Worker 등록하기
service worker 에서 네트워크 요청을 proxy 하고, get, post, patch .. 등 다양한 메서드의 API 를 지원하기 위해서는 해야할 작업이 많습니다. 하지만 msw 에서 제공하는 CLI 를 사용하면 필요한 워커 설정을 담은 파일을 만들어 주기 때문에 그대로 사용하시면 됩니다.
npx msw init public/정적파일을 제공하는 폴더에 mockServiceWorker.js 파일을 생성해줍니다. (참고)
handlers.js 작성하기
일반적으로 mock 관련된 파일들은 `src/mocks/` 에 모아두는 것이 일반적입니다.
`src/mocks/handlers.js` 파일을 만들고 아래와 같이 필요한 엔드포인트를 작성해줍니다.
worker.js 작성하기
위에서 작성한 핸들러를 setupWorker 의 인자로 넣어 worker 객체를 만듭니다.
worker 등록하기
위와 같이 가장 루트 단에서 워커를 개발환경일 때만 실행해줍니다.
콘솔창에 아래와같은 로그가 나타나면 정상적으로 워커가 등록됬음을 알 수 있습니다.
이제 모든 준비는 끝났습니다.
이제 더필요한 api 는 핸들러로 추가로 작성해주기만 하면되고, 이 API 를 활용해서 개발을 시작하면됩니다!
요청해보기
마무리
글이 짧지만, 정말 문서 자체도 짧고 아주 간단한 라이브러리입니다.
그에 비해서는 폭발적인 생산성을 가져다줄 효자 녀석이라 생각합니다.
저도 msw 를 알기전에는 node 서버를 따로 띄워서 간단하게 같이 작업하거나, 보통은 react-query 로 관리하기 때문에 mock 데이터를 반환하는 promise 함수를 작성해서 사용하곤 했었는데, 훨씬 관리하기도 편하고 좋은거같아 추천드립니다 👍