[React] MSW로 API Mocking 하기 (1) - MSW란?

안녕하세요. J4J입니다.

 

이번 포스팅은 MSW로 API Mocking 하기 첫 번째인 MSW가 무엇인지에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

MSW란?

 

MSW는 Mock Service Worker의 약자로 Service Worker를 활용하여 API 요청을 Mocking 하도록 도와주는 라이브러리입니다.

 

Mocking을 한다는 것은 단어의 의미대로 실제 값을 활용하는 것이 아닌 허구의 값이 사용되도록 만드는 것이고, API 요청을 Mocking 하도록 도와주기 때문에 API 처리에 대한 결괏값을 허구의 값으로 만들 수 있도록 도와줍니다.

 

 

 

MSW를 사용하지 않을 경우 API 요청에 대한 Mocking을 하기 위해 다른 여러 방법들이 활용될 수 있습니다.

 

예를 들면 Mocking 처리를 위한 서버를 만들거나 또는 다른 라이브러리들을 사용할 수 있고, MSW와 다른 라이브러리들에 대한 비교는 MSW 공식 문서를 참고해볼 수 있습니다.

 

 

 

결과적으로 MSW를 사용하게 될 경우 Mocking 서버를 만드는 부가적인 작업 없이 편리하게 API Mocking 처리를 할 수 있도록 도와줍니다.

 

또한 위의 공식 문서 링크를 통해 다른 라이브러리들과 비교해 봤을 때 MSW가 가장 좋은 라이브러리이다라고 말할 순 없지만 다양한 환경들을 지원하며 또한 기존 소스의 변화 없이 Mocking 처리를 할 수 있습니다.

 

그러므로 API Mocking이 필요한 경우 MSW는 대부분의 상황에서 선택해볼 수 있는 선택지가 될 수 있습니다.

 

 

반응형

 

 

Service Worker란?

 

Service Worker는 네트워크 레벨에서 API 요청을 가로채어 변경할 수 있도록 도와줍니다.

 

즉, MSW는 API을 요청을 가로채는 Service Worker를 활용하여 허구의 값을 만들어 낼 수 있도록 돕는 것이라고 바로 이해할 수 있습니다.

 

 

 

Service Worker는 오프라인 단계에서 발생될 수 있는 문제점을 해결하기 위해 등장했다고 합니다.

 

그래서 온라인 환경이 아닌 곳에서 개발자들이 원하는 기능 처리가 이루어지도록 하기 위해 사용될 수 있습니다

 

 

 

MSW 공식 문서를 확인해보면 다음과 같은 flow를 통해 MSW가 동작된다는 sequence diagram을 볼 수 있습니다.

 

MSW sequence diagram

 

 

 

Service Worker를 활용하여 API 요청 가로채는 flow를 확인해 볼 수 있고, 이런 흐름은 마치 프록시 서버와 유사하게 동작된다고도 말할 수 있습니다.

 

 

 

 

MSW 사용 환경

 

MSW 사용 환경은 크게 2가지로 Browser와 Node 환경이 있습니다.

 

 

 

먼저 Browser 환경은 말 그대로 Browser에 접속했을 때 통신되는 API에 대해 Mocking 처리를 수행하는 것입니다.

 

예를 들면, React 서버를 실행하여 동작되는 API 처리가 임의로 만들어 낸 값을 이용하여 수행될 수 있도록 도와줍니다.

 

이것은 FE 개발은 이루어졌지만 API 개발이 아직 이루어지지 않을 때 MSW를 적용하여 실제 API가 개발되었던 것처럼 테스트할 수 있게 도와줍니다.

 

 

 

다음으로 Node 환경은 Node를 이용하여 동작되는 곳에서 API Mocking 처리를 수행하는 것입니다.

 

예를 들면, Jest와 같은 테스트를 수행할 때 Mocking 할 수 있도록 도와줍니다.

 

이것은 테스트를 할 때 API의 존재에 상관 없이, API 요청 시간을 기다리는 것 없이 테스트할 수 있도록 도와줍니다.

 

 

 

각각의 기능을 어떻게 적용하는지에 대해서는 다음 글들을 통해 순서대로 소개하도록 하겠습니다.

 

 

 

 

 

 

 

 

 

이상으로 MSW로 API Mocking 하기 첫 번째인 MSW가 무엇인지에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.