msw로 API 모킹하기

Mock Service Worker 강의에서는 너무 간단하게만 설명하고 넘어가서 따로 찾아봤다.1 2

기존 모킹 방식

쇼핑몰을 개발중이라면, 제품에 대한 데이터가 있어야 ui를 구현할 수 있다. 그리고 제품에 대한 데이터는 당연히 서버에 있다. 이 서버 백엔드가 아직 개발되지 않았거나 다른 사유로 인해 사용할 수 없는 경우에는 어떻게 해야할까?

가장 먼저 떠오르는 생각은 그냥 모킹용 데이터를 앱 안에 직접 작성하는 것이다. 이렇게는 UI구현까지는 문제 없이 진행할 수 있다. 그런데 서버와 상호작용하는 api가 제대로 작동하는지도 검증을 해야한다면?

먼저 임의의 모킹 서버를 만들수 있다. 이렇게 하면 직접 서버와 상호작용하는 서비스 로직을 변경할 필요 없이 그대로 사용할 수 있다. 하지만 이 방법은 비용(시간, 인력 등)이 많이 소모되는 방법이라 선호되지 않는다. 그리고 모킹 서버의 단점은 예외 처리에 대한 테스트가 어렵다는 단점이 있다. 오류가 발생했고, 어떤 오류인지, 로딩이 길어지면 어떻게 해야하는지 등등 사용자 경험과 관련된 여러 ui와 로직을 개발하려면 개발자가 쉽게 서버 응답 상태를 바꿀 수 있어야하는데, 모킹 서버 사용시에는 서버의 코드를 바꾸거나 혹은 기타 다른 방법을 사용해야 한다.

MSW

MSW 라이브러리는 이런 단점을 손쉽게 해결해준다. 이 라이브러리의 역할은, 브라우저가 전송하는 api 요청을 가로채서 모킹된 응답을 브라우저에게 전달한다. 브라우저를 떠난 뒤에 응답이 오는것이기 때문에 서버를 사용하는것과 동일한 방식으로 테스트를 진행할 수 있다. 그리고 손쉽게 응답의 상태를 변경할 수 있어 예외 처리 로직을 개발할 때 용이하다.

이 라이브러리는 브라우저의 Service Worker라는 기술을 활용해 이런 편리를 제공하고 있다. 일단 Worker라는 것이 있는데, 이것은 간단히 브라우저가 웹 앱을 실행하고 있는 메인 스레드가 아닌 백그라운드 스레드에서 자바스크립트 문서를 실행할 수 있다. 그리고 Service Worker는 앱과 브라우저 그리고 네트워크 사이에서 프록시 서버 역할을 하는 Worker를 말한다.

구체적인 사용법은 다음 강의에서 다룬다.