[MSW] MSW를 이용한 데이터 모킹 (Mock Service Worker)

MSW?

MSW 는 Mock service Worker 의 약자로, 가짜 API데이터를 만들어주는 라이브러리이다. 동작방식은 React에서 Fetch 나 Axios를 이용해 서버로 통신을 요청하면, MSW가 중간에서 이를 가로채 대신 대답을 해주는 방식이다. MSW를 이용하면 백엔드와 연결을 하기전에 미리 데이터 페칭을 대비할 수 있다.

 

프로젝트에 MSW를 사용한 이유

먼저 이유부터 설명하자면 미리 서버와의 통신을 mock(흉내) 해주는 라이브러리를 이용하여 효율적인 일정분배, 서버통신 대비를 위해서이다.

 

몇번의 해커톤을 진행해본 결과, 프론트엔드와 백엔드의 개발 속도 차이로 인해 프로젝트가 통채로 위태위태 해진 경험이 있다.

백엔드에서 서버를 열기 전까지 서버와의 통신을 경험해볼 수 없기 때문에 더미데이터 (자바스크립트 내부에서 정의한 오브젝트 형식)를 이용하거나, 그러려니 하고 컴포넌트 먼저 마크업하고 백엔드가 서버를 완성한 후에야 연결을 테스트 해보게 된다.

 

이렇게 할 경우 여러가지 문제가 발생하는데 자바스크립트 내부에서 더미데이터를 정의해서 사용할 경우, HTTP통신을 이용해 받아온 데이터가 아니기 때문에 HTTP통신으로 인해 생기는 오류에 대비를 할 수가 없다.

 

프론트엔드 개발자는 컴포넌트만 찍어내는 개발자가 아니다

응답 status에 따른 로그인 창에서의 에러알림, http통신보다 빠르게 컴포넌트가 마운팅되어 생기는 오류 등에 대비 할 수 없다. (진짜 시간이 많이 걸리는건 여기서 오는 오류들을 해결하는 것이다.. )

 

이 때문에 갓 프로젝트를 시작해본 프론트엔드 개발자라면 서버가 올라가기 전까지 상대적으로 여유롭다는 착각에 빠질 수  있고 나태해 질 수 있다.  조심해야된다! 프로젝트는 시간제한이 있는 개발이기 때문이다.

 

---

MSW 사용법

먼저 yarn, npm 등의 패키지매니저로 msw를 설치한다. Msw의 경우 개발단계에서만 사용할 dev dependency 이므로 배포단계에서 번들링 되지 않도록한다

yarn add msw --dev

 

이후 몇가지 설정이 필요한데

----작성중---