MSW (Mock Service Worker)

- MSW란?

• 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) lib
  

  1. 브라우저에서 fetch, axios등 진행 시 request이 발생하고 이를 서비스 워커가 감지
  2. 해당 request는 실제 서버가 아닌 msw에 보낸다
  3. msw는 개발자가 설계한 handler 파일에 res.get/post/put/delete 등을 보고 response를 만든다.
  4. msw가 생성한 response를 서비스 워커로 보낸다
  5. 서비스 워커는 브라우저에 resaponse를 보내며 동작을 마무리한다

• 브라우저에 남아 FE의 요청에 가짜 데이터를 응답.

• 사용이유
  - BE와 동시에 개발 시 BE api구현이 완료 전에 임시로 사용하기 위한 mock api로 쓰인다.
  - 테스트 실행 시 실제 BE api에 네트워크 호풀을 하는대신 안정적인 mock api 서버를 구축한다.

  • 개발의 생산성을 높일 수 있다.
    
    <msw를 활용한 개발 방식>
    

    ---

- Init

1. $ npm install msw --save-dev
   or
   $ yarn add msw --dev

(--save-dev : 개발단계에서만 라이브러리를 사용한다는 의미)
(package.json)

2. $ npx msw init public/ --save

(package.json)

(💢 이슈 사항: MFA 구조에 따라 ROOT,host, 해당 폴더에도 npx 해야한다.
ex) app2 페이지라면 app2 폴더로 이동 후 cli 실행

3. /remotes
   /shared
   |- /mock
   |- /api
   | |- auth.ts … 모의 API 처리
   |- handler.ts … API handler 설정 (routing)
   |- worker.ts … worker.start() 할 파일

• 모의 API 처리
  

• handler 설정
  

• worker 설정
  

용어 설명

• 1. Request Handler
  • Rest api를 사용하기 위해서 method, path, maked Res를 변환하는 함수 생성
  • workflow method 를 만들어줌 (get / post)
• 2. Response Resolver
  • request를 가로채어 응답을 위해 res.Resolver를 사용하는 mocked res가 필요(args 확인)
  • 1) req: req에 대한 정보
  • 2) res: mocked response를 위한 fanctional utility
  • 3) ctx: mocked res의 status code(200, 400, 404..), headers, body 설정

- MSW 동작 확인

에러 참고 url

• 

  https://github.com/mswjs/msw/discussions/1222
  https://ryuhojin.tistory.com/45
  https://mswjs.io/docs/cli/init