피드로 돌아가기
Dev.toFrontend
원문 읽기
Endpoint 단위 Token 설계를 통한 Bundle Size 최적화 및 Signal-native API Client 구현
Stop Writing Angular HTTP Services by Hand
AI 요약
Context
기존 Angular 서비스 클래스 구조는 모든 엔드포인트를 하나의 파일에 정의하여 사용하지 않는 코드까지 번들에 포함하는 Tree-shaking 한계 노출. 또한 RxJS 기반의 수동 상태 관리로 인해 Loading, Error 처리와 같은 보일러플레이트 코드가 반복적으로 발생하는 문제점 상존.
Technical Solution
- OpenAPI 3.x 스펙을 기반으로 엔드포인트당 하나의 InjectionToken을 생성하는 1:1 매핑 구조 설계
- esbuild의 파일 경계 기반 Tree-shaking 특성을 활용하여 미사용 엔드포인트의 완전한 제거 실현
- Angular 22의 httpResource() 도입을 통한 Signal-native 반응형 데이터 요청 및 상태 관리 자동화
- openapi-typescript 및 @apidevtools/swagger-parser를 이용한 정적 타입 정의 및 $ref 체인 해소
- API 태그 기반의 하위 폴더 구조 및 Barrel export를 통한 모듈화된 데이터 액세스 계층 구축
실천 포인트
- Tree-shaking 효율을 극대화하기 위해 서비스 클래스 대신 기능 단위의 독립적 Token 파일 구조 검토 - RxJS Observable 대신 Signal 기반의 httpResource를 사용하여 상태 관리 보일러플레이트 제거 - API 명세서(OpenAPI)와 프론트엔드 타입 정의 간의 동기화를 위해 Codegen 도입 및 수동 작성 배제