프론트엔드
Mocking으로 프론트엔드 DX를 높여보자
두줄요약
API 미구현 시 하드코딩 Mocking으로 생기는 교체 비용과 개발 병목을 짚었습니다. MSW의 Service Worker 기반 요청 가로채기로 API 의존성을 낮추는 방법을 소개합니다.
문제 상황
- 프론트엔드·API 개발 동시 진행 시 스프린트 초반 API 스펙·구현 부재
- 하드코딩 데이터, 빈 엔드포인트, 임시 이벤트 핸들러로 인한 작업 중단과 교체 비용
원인 분석
- 비즈니스 로직 내부 Mocking으로 실제 API 흐름과 다른 임시 코드 누적
- API 구현 완료 시점에 네트워크·브라우저 이슈와 Mock 코드 제거 작업 집중
해결 방법
- Service Worker에서 요청을 가로채는 MSW 기반 Mocking
- 실제 API 엔드포인트 유지와 요청별 응답 핸들러 구성
- 실제 API 준비 후 MSW 핸들러 제거로 전환
성능/운영 포인트
- 별도 Mock API 서버 구축·실행 부담 없는 JavaScript 기반 적용
- API 개발 의존성과 스프린트 병목 감소를 통한 프론트엔드 DX 개선
