직접 공식문서를 보면서 MSW에 대해 공부하고, 적용해본 경험을 적어보려고 합니다.
목차
MSW란
MSW란
Mock Service Worker는 클라이언트에 구애받지 않는 모의를 작성하고 모든 프레임워크, 도구 및 환경에서 재사용할 수 있는 API 모킹 라이브러리라고 합니다.
MSW 사용 이유
-
프론트엔드와 백엔드 개발이 병행되는 경우 발생할 수 있는 병목현상을 극복하기 위해 사용합니다.
-
저의 경험에 따르면Postman이나 Swagger를 통해 백엔드쪽에서 보내준 모킹 테스트 데이터를 사용하던 중 잘못된 데이터 형식이나 수정사항이 있는 경우 백엔드쪽에 계속 말해 수정하는 것 보다 스스로 모킹 데이터를 만들어서 테스트 해보는게 더 용이하다고 생각해서 사용했습니다. -
저의 경험에 따르면MSW 동작이 실제 API 호출을 가로채서 모킹데이터를 보내주기 때문에 실제 API 서버와 연동했을때도 코드에 큰 변화가 없고, 직접 상태코드도 전달해서 에러난 경우 등 처리하기가 용이해서 사용했습니다.
MSW 설치 방법
- msw 2.0버전
- rest API 사용
- msw 설치
- 작업자 스크립트 복사
- worker 설정 및 실행
- 설치가 됐는지 확인
1. MSW 설치
- msw를 설치합니다.
npm install msw@latest --save-dev
2. 작업자 스크립트 복사
- init CLI 명령을 입력합니다.
npx msw init public/ --save
3. worker 설정 및 실행
-
src/mocks/borwer.ts파일을 만들고, worker를 설정합니다.
저는 typescript를 사용했기에 .js가 아닌 .ts로 만들었습니다.
-
최상단의 index.ts 파일에서 worker를 실행합니다.
-
공식문서와 달리 전 아래와 같이 사용했습니다.
-
onUnhandledRequest는 경고창이 발생하여 저 옵션을 추가했습니다.
4. 설치가 됐는지 확인
- 아래와 같이
Mocking enabled가 개발자 도구 검사창에 나타나면 연결이 잘 된겁니다.
MSW 사용 방법
MSW 사용 방법은 2가지 단계가 필요합니다.
- mocking data 만들기
- handler 만들기
저는 data와 handler파일을 구분해서 만들었으며, data와 handler의 파일명은 가독성 좋게 통일했습니다.
폴더구조는 아래와 같습니다.
- src
- mocks
- browser.ts
- data
- contentType.ts
- handlers
- index.ts
- contentType.ts
- mocks
mocking data만들기
- src/mocks/data폴더에 원하는 모킹파일을 만들어줍니다.
- 원하는 모킹 데이터를 만들고 export 해줍니다.
handler 작성
우선 공식문서 먼저 보고, 저의 방식으로 파일을 분리한 부분을 보여드리겠습니다.
공식문서
파일 분리
-
공식문서와 같이 사용하면 handlers 배열 안에 너무 많은 요청이 들어가고, 유지보수나 가독성이 떨어진다고 생각하여 하나의 요청마다 파일로 나누어서 관리를 했습니다.
-
index.ts파일에 handler를 만들어줍니다.
-
handlers 내부에 원하는 handler를
...을 사용하여배열안에 펼쳐줍니다.
- handler를 파일로 만들어서 관리를 해줍니다.
코드 설명
-
http.method 형식으로 요청을 진행합니다.
-
첫번째 param는 url이며, baseUrl은 적지 않아도 됩니다.
Ex) http.get(/contentTypeId) => O
Ex) http.get(http://localhost:3000/contentTypeId) => X-
두번째 param은 resolver라고 하는데, get요청의 경우 콜백함수 ()=>{}로 넘겨주고 {}내부에서는 httpResponse.json() 형태로 데이터를 보내주면 됩니다.
-
resolver에 대해 더 궁금하시다면 공식문서를 참고해주세요.
참고
