< Chrome 확장프로그램 바로가기 >

MSW DevTools Controller - Chrome Web Store

MSW-Controller-Devtools

이 프로젝트는 Mock Service Worker(MSW)의 시나리오 관리를 더욱 편리하게 해주는 msw-controller 라이브러리를 위한 GUI 도구입니다.

왜 만들었을까?

MSW는 서비스 워커를 기반으로 실제 네트워크 요청을 가로채 동작하기 때문에, 프론트엔드 개발에서 API 모킹을 위한 강력한 표준으로 자리 잡았습니다.

하지만 MSW를 사용해 다양한 시나리오(예: API 성공, 실패, 특정 데이터 반환 등)를 테스트하려면 핸들러 코드를 직접 수정하고 애플리케이션을 새로고침하는 과정이 반복되어야 했습니다. 이러한 과정은 다음과 같은 불편함을 낳았습니다.

• 잦은 코드 변경: 시나리오를 바꿀 때마다 코드를 수정하고 저장해야 하는 번거로움이 있었습니다.
• 개발 흐름의 끊김: 코드 수정과 화면 새로고침의 반복은 개발의 집중을 방해하고 생산성을 떨어뜨리는 요인이었습니다.
• 직관적이지 않은 상태: 현재 어떤 목 시나리오가 적용되어 있는지 한눈에 파악하기 어려웠습니다.

이러한 문제들을 해결하기 위해, MSW 핸들러를 코드로 손쉽게 제어할 수 있는 msw-controller 라이브러리를 먼저 개발했습니다. 그리고 이 라이브러리의 기능을 더욱 극대화하고, GUI를 통해 직관적으로 사용할 수 있도록 MSW-Controller-Devtools를 만들게 되었습니다.

MSW-Controller-Devtools 핵심 기능 소개

MSW-Controller-Devtools는 msw-controller 라이브러리를 위한 GUI를 Chrome 개발자 도구에 추가하는 확장 프로그램입니다. msw-controller를 통해 미리 코드로 정의해둔 목 시나리오들을 UI에서 간편하게 제어할 수 있습니다.