타입 안전한 API 모킹으로 프론트엔드 생산성 높이기
프론트엔드
타입 안전한 API 모킹으로 프론트엔드 생산성 높이기
두줄요약
JSON 모킹의 스펙 변경 대응 한계를 줄이기 위해 TypeScript 기반 타입 안전 모킹을 도입했습니다. 공통 베이스 파일과 시나리오 변형 구조로 유지보수성과 생산성을 높였습니다.
문제 상황
- JSON 파일 기반 API 모킹의 스펙 변경 감지 한계
- 모킹 파일 다수 관리로 인한 수동 수정 부담과 렌더링 오류
원인 분석
- 서버 응답 모델 변경이 여러 시나리오 파일에 동시 반영되어야 하는 구조
- JSON만으로는 타입 불일치와 필드 변경을 사전에 드러내기 어려움
해결 방법
- JSON 모킹을 TypeScript 파일로 전환하고
as타입 단언 적용 - 공통 베이스 응답과 시나리오별 변형 파일을 분리하고
immer로 중첩 객체 수정
성능/운영 포인트
- 타입 오류로 API 변경을 조기에 감지해 흰 화면 디버깅 감소
- 베이스 파일 중심 수정으로 시나리오 추가와 변경 작업 시간 단축
- 가독성 향상과 함께 깊은 중첩 구조 관리 안정성 확보