TIL / Mock Service Worker MSW

zzezze·2022년 11월 20일
0

TIL

목록 보기
82/137

오늘 강의를 들으면서 알게된 새로운 API Mocking 방법인 MSW에 대해 알아보려고 한다.

MSW는 API 모킹 라이브러리로, 서버를 향한 네트워크 요청을 가로채서 mocked response를 내려주는 역할을 한다.

interception이 네트워크 레벨에서 일어나기 때문에 애플리케이션에선 모킹에 대해 알 수 없기때문에 모킹을 위해 애플리케이션 코드를 변경할 필요가 없다

https://www.youtube.com/watch?v=HcQCqboatZkcccc

import { setupWorker, rest } from 'msw'
const worker = setupWorker(
  rest.post('/login', async (req, res, ctx) => {
    const { username } = await req.json()
    return res(
      ctx.json({
        username,
        firstName: 'John'
      })
    )
  }),
)
worker.start()

MSW는 서비스워커를 사용하는데 이를 이용해 리소스 요청을 가로채 수정하고 캐싱할 수 있다.
웹 앱이 어떤 상황에서 어떻게 동작해야하는지 완벽하게 바꿀수 있게 한다.


브라우저 환경에서 MSW는 Request handler에 정의된 Fetch 이벤트를 서비스 워커에 등록한다.
서비스 워커는 서버로의 요청이 발생하면 method, URL 등에 기반하여 요청을 가로채 MSW에 전달하고 handler에 정의된 모의 응답을 받는다.

GET 방식의 request handler는 다음과 같이 작성한다.

rest.get('/user', responseResolver)

핸들러를 작성할 때 두 번째 인자로 들어오는 콜백함수(responseResolver)의 매개변수로 req, res, ctx가 있다.

req는 요청에 관한 정보를 처리할 수 있고,
req는 모킹된 응답을 만드는 함수이고,
cxt는 현재 응답핸들러에서 응답 함수에 어떤 내용들이 들어갈지 정하는 context이다.

이제 이 말을 이해할 수 있을 것 같다!
내일부터 MSW를 사용하면서 익숙해져보자

0개의 댓글