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