MSW?

개요

프론트엔드와 백엔드를 병렬로 개발할 때, 백엔드 API가 아직 완성되지 않아 프론트엔드 개발이 진행되기 어려운 상황이 발생할 수도 있습니다. 이럴 때 MSW(Mock-Service-Worker)를 활용하면 프론트엔드 개발을 용이하게 할 수 있습니다.

MSW란?

MSW는 프론트엔드에서 가상의 서버를 생성하여 실제 백엔드와의 통신을 모방하게 해주는 라이브러리입니다. 이를 통해 백엔드가 아직 개발 중일 때도 프론트엔드 개발을 원활하게 진행할 수 있습니다.

프로젝트에서 MSW를 적용한 상황

사용자 회원가입 시, 이메일 중복여부를 체크해야합니다. 이때 기존에 존재하는 이메일인지 체크하기 위해서는 백엔드 서버 API쪽에 요청을 보내 확인을 해야 합니다.

MSW를 이용해 이런 상황에서 백엔드쪽 응답을 Mocking 처리했습니다.

 

그림처럼 프론트엔드와 백엔드가 통신하는 부분이 Mocking으로 처리되기에, 백엔드와의 결합이 없어져

백엔드 서버의 작업 여부와 상관없이 병렬적으로 작업을 진행할 수 있게 됩니다.