MSW 도입하게 된 계기
프로젝트를 진행할 때 짧은 일정이 주어지게 되면서 백엔드에서 API가 완성되기만을 마냥 기다릴 수는 없게 되었다. 이유는, 프론트 엔드 개발은 거의 프로젝트에서 마지막 단계이기 때문에 주어진 일정 안에서 굉장히 짧은 기간에 완성 해야 할 수 있고 백엔드에 종속적일 수 밖에 없어 수정사항이 생기면 그 일정 또한 무시하기 어렵다.
그래서, mock으로 더미 데이터를 만들고 미리 개발을 시작하면 되지 않을까? 하고 찾아봤더니 msw 라는 라이브러리를 알게 되었다.
바로 적용해보자 ~!
MSW 란?
라이브러리를 도입하기 전에 먼저 해당 개념부터 살펴보자
MSW는 Mock Service Worker로 서비스 워커를 이용하여 API를 모킹하는 라이브러리이다.
실제 API와 똑같은 명세서로 MOCK을 작성하여 HTTP통신이 이뤄질 때 그 네트워크를 낚아채는(?) 개념으로 이해하였다.
일단 장점으로는 똑같은 명세서로 작성하기 때문에 실제 백엔드 API를 녹일 때 수정사항이 거의 없다는 점이다.
여기서 Service Worker란?
service worker는 웹 어플리케이션의 메인 스레드와 분리된 별도의 백그라운드 스레드에서 실행시킬 수 있는 기술 중 하나입니다.
MSW 작동원리
Mock Service Worker 리퀘스트 흐름도 (이미지 출처: https://mswjs.io/docs/)
브라우저에 서비스 워커(Service Woker)를 등록하여 외부로 나가는 네트워크 리퀘스트를 감지한다. 그리고 그 요청을 실제 서버가 아닌 MSW 클라이언트 사이드 라이브러리로 보낸 후, 등록된 핸들러를 통해 모의 응답을 브라우저로 보낸다.
MSW 설치
npm install msw --save dev--save dev : 이 옵션은 개발 단계에서만 라이브러리를 사용한다는 뜻이다.
MSW 적용
mocks 폴더를 만든다.
mocks >> api >> data >> [사용할 파일이름].ts
mocking할 API를 핸들링할 핸들러들을 모아놓는 파일
Data 폴더를 따로 만들어서 더미 데이터를 따로 관리했다.
더미 데이터는 1개가 될 수 있지만 100개가 될 수 있어 파일을 따로 관리하는 것이 더 편했다.
mocks >> api >> [사용할 파일이름_Handlers].ts
msw 네트워크 요청을 처리하기 위해 rest[Method] 함수로 핸들러를 정의 한다.
mocks >> api >> browser.ts
main.ts
마지막으로 제일 중요한 워커를 실행시키기 위한 코드를 추가합니다.
노드 환경 변수에 따라 실행시키기 위해 아래와 같이 작성한다.
그리고 실행 후 콘솔을 열면 아래와 같이 뜬다면 mock 설정에 성공한 것이다.
