[ 배포가이드는 아래에작성 ! ]

msw-controller를 위한 chorome-extention

크롬 익스텐션 만들어보기 (msw-devtools-extention)

MSW Controller

msw-controller는 MSW 핸들러를 런타임에 개별적으로 활성화 또는 비활성화하기 위해 만든 SDK입니다. 더 이상 모킹 상태를 바꾸기 위해 코드를 수정하고 다시 빌드할 필요가 없습니다.

🎯 왜 msw-controller를 사용해야 할까요?

프론트엔드 개발 시 백엔드 API가 준비되지 않았거나, 특정 응답에 대한 UI 테스트가 필요할 때 API 모킹(Mocking)은 매우 유용합니다. MSW(Mock Service Worker)는 서비스 워커를 사용하여 네트워크 요청을 가로채 모의 응답을 반환해주는 훌륭한 라이브러리입니다.

하지만 프로젝트를 진행하다 보면 다음과 같은 상황들이 발생합니다.

• 백엔드 API 개발 지연: 프론트엔드 기능 개발이 백엔드 API 개발 속도보다 빠를 때, API가 완성될 때까지 기다리지 않고 UI 개발을 계속하고 싶습니다.
• 다양한 응답 시나리오 테스트: 성공, 실패, 특정 에러 코드, 빈 데이터 등 다양한 API 응답에 따라 UI가 어떻게 반응하는지 쉽게 테스트하고 싶습니다.
• 부분적 실제 API 연동: 일부 API는 개발이 완료되어 실제 서버와 연동 테스트를 하고 싶지만, 다른 API들은 여전히 모킹이 필요한 상황입니다.
• 팀원 간의 모킹 설정 공유: 팀원마다 다른 모킹 설정을 사용하거나, 특정 상황에 맞는 모킹 설정을 쉽게 공유하고 싶습니다.

기존에는 MSW 핸들러를 주석 처리하거나 코드를 수정하여 특정 모의 응답을 제어했습니다. 이는 번거롭고 실수할 가능성이 있었습니다.

msw-controller는 이러한 문제들을 해결하기 위해 탄생했습니다. 런타임에 브라우저 개발자 도구 콘솔을 통해 각 MSW 핸들러의 활성화 상태를 손쉽게 제어할 수 있는 기능을 제공합니다. 이를 통해 개발자는 코드를 직접 수정하지 않고도 필요한 API만 모킹하거나 실제 API를 사용하도록 즉시 전환할 수 있어 개발 생산성을 크게 향상시킬 수 있습니다.

✨ 주요 기능 (Features)

• 동적 핸들러 제어: MSW 핸들러를 개별적으로 또는 그룹별로 실시간 활성화/비활성화할 수 있습니다.