✏️출처

Mock Service Worker (MSW)_ 종합 가이드.pdf

네트워크 수준에서 작동하는 API 모킹 라이브러리로, 개발자가 기존 애플리케이션 코드를 수정하지 않고도 네트워크 요청을 가로채고 모의 응답을 반환할 수 있게 해줍니다.

HTTP 요청에 대한 모의 응답을 생성하여 실제 백엔드 구현 없이도 개발자가 백엔드 응답을 시뮬레이션할 수 있게 합니다.

MSW는 네트워크 수준에서 나가는 네트워크 요청을 가로채므로 프레임워크에 구애받지 않고 axios, fetch API, react-query와 같은 모든 HTTP 클라이언트 라이브러리와 호환됩니다.

Serive Worker란?

웹 페이지와 별도로 백그라운드 스레드에서 실행되는 특별한 JavaScript 파일입니다.

웹 애플리케이션, 브라우저, 네트워크 사이의 프록시 역할을 하여 네트워크 요청의 가로채기와 수정을 가능하게 합니다.

Proxy란?

MSW의 작동 방식

image.png

MSW를 설정할 때 개발자는 특정 엔드포인트와 HTTP 메서드에 대한 핸들러를 정의합니다. 예를 들어, 로그인 엔드포인트에 대한 POST 요청 핸들러는 다음과 같을 수 있습니다:

rest.post('/login', (req, res, ctx) => {
  return res(
    ctx.status(200),
    ctx.json({
      jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
    })
  );
})

이 핸들러는 /login 엔드포인트에 대한 POST 요청을 가로채고 모의 JWT 토큰을 반환합니다.

프론트엔드 개발에 MSW를 사용하는 이점