안녕하세요! 노마드코더로 시작해서 현업에서 열심히 일하고 있는 프론트 개발자입니다.

이번에 MSW 핸들러를 런타임에 쉽게 관리할 수 있도록 도와주는 Devtools를 개발해서 소개드리고 싶어요.

MSW는 Mock Service Worker라는 도구로, 브라우저 혹은 Node 환경에서 워커 쓰레드를 활용해 API를 모킹해주는 라이브러리입니다.

API 콜 자체를 가로채 모킹하는 방식으로 동작해서, 모킹만 잘 해주면 백엔드 개발 진척도와 무관하게 프론트 개발을 할 수 있어 많이 사용하는데요!

모킹할 응답값을 매번 설정해주고 관리하는것도 귀찮아서 눈에 보이는 UI가 계속 떠있었으면 좋겠다는 생각이 들었는데, 마땅히 쓸만한게 없어 Devtools를 만들게 됐어요.

아직 개발 극초기라 아주 기초적인 기능밖에 없지만, 한번 사용해보고 피드백 주시면 감사하겠습니다.

주요 기능

• 🛠 모킹 핸들러를 런타임에 추가 – 새로운 모킹 핸들러를 앱의 동작중에 추가할 수 있습니다.

• ✏️ 모킹 핸들러의 응답 수정 – 모킹 핸들러의 응답을 빠르게 수정할 수 있습니다.

• 🔄 모킹 핸들러 내보내기/가져오기 – 핸들러 구성을 손쉽게 내보내고 가져올 수 있습니다.

(특히 세번째 기능은 협업시 목 구성을 팀원들이 공유할 수 있도록 하려고 구현했어요.)

레포지토리

레포 가면 데모 영상과 데모 페이지 링크가 있으니 한번 구경해보세요!

감사합니다 :)