TypeScript 모킹으로 프론트엔드 생산성 UP!
by DD
1년 전
조회수 4
JSON 기반 모킹의 한계로 API 변경 시 렌더링 오류 발생 및 디버깅 어려움
TypeScript와 as 타입 단언을 활용하여 타입 안전한 모킹 환경 구축
베이스 파일 + 시나리오 패턴 도입으로 API 변경 대응력 향상 및 코드 가독성 개선
JSON 모킹의 문제점과 TypeScript 전환
기존 JSON 기반 모킹은 API 스펙 변경 시 렌더링 오류를 유발했다. 구체적으로, JSON 파일을 일일이 수정해야 하는 번거로움이 있었다. 따라서 TypeScript를 도입하여 타입 안전성을 확보하고, 렌더링 오류를 컴파일 단계에서 감지하도록 개선했다.
as 타입 단언과 베이스 파일 패턴
as 타입 단언을 통해 개발 생산성과 타입 안전성의 균형을 맞췄다. 구조적 타입 검사를 활용하여 필드 누락을 감지하고, 런타임 오류를 방지했다. 베이스 파일 + 시나리오 패턴을 통해 코드 중복을 줄이고, API 변경에 유연하게 대응할 수 있도록 했다.
immer를 활용한 효율적인 모킹
immer를 사용하여 중첩된 객체를 간결하게 수정하고, 코드 가독성을 높였다. immer는 불변성을 유지하면서도 직관적인 코드 작성을 지원한다. 반면, as 타입 단언과 함께 사용할 경우, enum 타입의 직접적인 사용에 제약이 따른다. 결과적으로, API 모킹의 효율성을 극대화했다.
