피드로 돌아가기
Dev.toFrontend
원문 읽기
관심사 분리를 통한 유지보수성 극대화 및 Type-safe 데이터 레이어 구축
API Calls Done Right: From Messy Fetch to Clean Data Layer
AI 요약
Context
React 컴포넌트 내부의 raw fetch 호출로 인한 비즈니스 로직과 UI 렌더링의 강한 결합 발생. Auth 로직의 중복 분산 및 에러 핸들링 부재로 인해 코드 비대화와 유지보수 비용이 증가하는 기술적 부채 상태.
Technical Solution
- AbortController와 timeout 설정을 통한 Request Timeout 제어로 UI 프리징 방지
- response.ok 체크 및 204 No Content 가드 로직을 통해 fetch API의 기본 동작 한계 극복
- apiClient(Transport) → Service modules(Domain) → Hooks(Integration)로 이어지는 계층형 아키텍처 설계
- ApiError 클래스 정의를 통한 HTTP 상태 코드별 구조화된 에러 핸들링 체계 구축
- TypeScript 제네릭을 적용한 request 함수 구현으로 API 응답의 Type-safety 보장
- TokenService를 통한 인증 토큰 관리 및 투명한 Token Refresh 메커니즘 적용
실천 포인트
- 컴포넌트 내 직접적인 fetch 호출 제거 및 서비스 레이어 이관 여부 검토 - HTTP 기본 타임아웃 설정 및 AbortController 적용을 통한 리소스 관리 최적화 - API 응답 타입 정의를 통한 런타임 타입 에러 방지 체계 구축 - 도메인별 Service 모듈 분리를 통한 비즈니스 로직 응집도 향상