MSW로 백엔드 API 모킹하기 (for 프론트엔드 개발자)

MSW(Mock Service Worker)는 브라우저의 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리입니다. 쉽게 말해, 브라우저에 기생(?)해서 마치 백엔드 API인 척하면서 프론트엔드의 요청에 가짜 데이터를 응답해주는 녀석이라고 볼 수 있겠네요. 비교적에 최근에 도입된 웹 표준 기술인 서비스 워커(Service Worker)를 사용하면 브라우저로 부터 나가는 요청이나 들어오는 응답을 중간에서 감시하거나 변조, 캐싱과 같은 기존에 웹에서 할 수 없었던 부가적인 작업들을 할 수 있는데요. MSW는 이러한 서비스 워커의 능력을 백분 활용하여 웹 개발에 있어서 API 모킹의 수준을 한 단계 올려놓았다고 평가받으며 출시되자 마자 큰 호응을 얻고 있습니다. 특히 MSW를 잘 활용하면 백엔드 API 구현이 완료되기를 기다리느라 스트레스 받지 않으시고 프론트엔드 UI 개발을 진행하실 수 있어서 정말 유용한데요. 이번 포스팅에서는 MSW 라이브러리를 사용하여 간단한 React 앱을 개발하고 꼼꼼하게 테스트까지 진행해보겠습니다. 📝 포스팅: https://www.daleseo.com/mock-service-worker/ • Mock Service Worker란? • Mock Service Worker의 특징 • 실습 프로젝트 생성 • MSW 라이브러리 설치 • 기반 코드 자동 생성 • 요청 핸들러 작성 • 서비스 워커 생성 • 서비스 워커 삽입 • 서비스 워커 테스트 • React로 UI 구현 • 테스트 서버 생성 • 테스트 서버 설정 • 테스트 코드 작성 🧑‍💻 전체 코드: https://codesandbox.io/s/mock-service-worker-ftujl4