피드로 돌아가기
Dev.toFrontend
원문 읽기
API Aggregation 도입을 통한 Frontend Coordination 비용 제거 및 UX 최적화
Your Frontend Isn’t Slow — Your API Architecture Is Broken
AI 요약
Context
개별 컴포넌트 단위의 독립적인 API 호출로 인한 Network Waterfall 현상 발생. Frontend가 사실상 Distributed Systems Coordinator 역할을 수행하며 렌더링보다 데이터 조율에 과도한 리소스가 소모되는 구조적 한계 노출.
Technical Solution
- 파편화된 다수의 Endpoint 호출 방식을 단일 Aggregation Endpoint 구조로 전환
- Backend에서 화면 단위의 데이터 요구사항을 사전 정의하여 Unified Response 반환
- Frontend의 Request Timing 제어 및 Response Merging 로직을 Backend로 이관
- 개별 위젯의 독립적 Loading State를 단일 렌더링 사이클로 통합하여 UI 불안정성 제거
- RxJS Nesting 및 복잡한 Subscription 관리 로직을 제거하여 코드 복잡도 감소
실천 포인트
- 대시보드 및 어드민 페이지 설계 시 API 호출 횟수와 Network Waterfall 발생 여부 점검 - Frontend에서 여러 API 응답을 조합하는 Aggregation 로직이 비대해졌는지 확인 - 화면 단위의 데이터 최적화가 필요한 경우 Backend-for-Frontend(BFF) 패턴 도입 검토 - 개별 컴포넌트의 Loading State가 사용자 경험을 해치지 않는지 UI/UX 관점에서 분석