타입 안전한 API 모킹으로 프론트엔드 생산성 높이기

이 게시물은 JSON 기반 API 모킹 방식의 한계와 이를 극복하기 위해 TypeScript 기반 타입 안전한 모킹 방식을 도입한 경험을 소개합니다.

기존 JSON 모킹 방식의 문제점

• API 변경 시 JSON 파일을 일일이 수정해야 하며, 누락 시 렌더링 오류 발생
• 개발자가 문제를 사전에 인지하기 어려움
• 다양한 시나리오별 JSON 파일 관리가 복잡하고 비효율적

TypeScript 기반 모킹 방식 도입

• JSON 대신 TypeScript 파일과 as 타입 단언을 사용해 타입 불일치 감지
• 베이스 파일과 시나리오별 변형 패턴 도입으로 중복 감소 및 유지보수성 향상
• immer 라이브러리 활용으로 중첩 객체 수정의 가독성과 안정성 증대

개선 효과 및 한계

• API 변경 감지 및 디버깅 시간 감소
• 새 시나리오 작성 시간 단축과 코드 가독성 향상
• 일부 enum 타입 사용 제한과 대규모 API 변경 시 수동 작업 필요