피드로 돌아가기
InfoQInfoQ
Frontend

Fetch API 기반의 경량 설계를 통한 HTTP 클라이언트 최적화 및 Schema Validation 통합

Ky 2.0 Fetch API Wrapper with Revamped Hooks, Smarter Timeouts, and Built-In Schema Validation

Daniel Curtis2026년 6월 18일3intermediate

Context

기존 Fetch API의 단순함으로 인한 반복적인 Wrapper 작성 필요성과 Axios의 Fetch 적응형 구조에서 발생하는 불일치 문제 해결 필요. 특히 Base URL 처리의 모호함과 응답 데이터 검증 부재로 인한 런타임 타입 에러 발생 가능성이 한계점으로 작용함.

Technical Solution

  • 단일 State Object 기반의 Hook 시스템 통합을 통한 API 일관성 확보 및 확장성 증대
  • per-attempt Timeout과 totalTimeout의 이원화 구조 설계를 통한 전체 요청 생명주기 제어
  • NetworkError 클래스 분리를 통한 프로그래밍 버그와 실제 네트워크 장애의 구분 및 자동 Retry 로직 정교화
  • prefix와 baseUrl 옵션의 분리를 통한 표준 URL Resolution 준수 및 URL 핸들링 모호성 제거
  • Standard Schema 인터페이스 도입을 통한 Zod, Valibot 등 외부 라이브러리 기반의 응답 데이터 타입 추론 및 검증 자동화
  • HTTPError 내 pre-parsed data 속성 제공으로 중복 호출 제거 및 리소스 누수 방지

- HTTP 클라이언트 설계 시 개별 요청 타임아웃 외에 전체 프로세스(Retry 포함)를 제한하는 Total Timeout 설정 검토 - API 응답 단계에서 Schema Validation을 강제하여 런타임 타입 안정성 확보 - 네트워크 장애와 로직 에러를 구분하여 Retry 전략을 차등 적용하는 예외 처리 구조 설계 - Hook 시스템 설계 시 파라미터 개별 전달 대신 상태 객체(State Object)를 통한 데이터 전달 방식으로 확장성 고려

원문 읽기