피드로 돌아가기
Dev.toDatabase
원문 읽기
Client-side Aggregation을 Postgres RPC로 이전하여 Frontend 복잡도 제거
I Moved My Next.js Dashboard Logic Into Postgres. My Frontend Got Boring (And That's the Point).
AI 요약
Context
모든 데이터를 브라우저로 전송한 뒤 React의 useMemo를 통해 집계하던 클라이언트 중심 아키텍처 채택. 데이터 규모 증가에 따라 Payload 크기가 비례적으로 증가하며 렌더링 성능 저하와 상태 관리 복잡도가 심화된 상황.
Technical Solution
- 집계 연산을 Database Layer로 하향 이동하여 Network Payload 최소화
- Supabase RPC 기능을 통한 Postgres SQL Function 기반의 맞춤형 데이터셋 정의
- LEFT JOIN과 GROUP BY를 활용하여 사용자별 소유 카드 수와 전체 카드 수를 DB 단에서 즉시 계산
- Frontend의 복잡한 루프 로직을 단순한 데이터 매핑 구조로 변경하여 State 관리 포인트 제거
- 비즈니스 결정 로직(Ranking)과 데이터 집계 로직(Aggregation)을 분리하여 책임 영역 명확화
- Deterministic한 SQL Function 작성을 통해 UI 컴포넌트 의존성 없는 독립적 테스트 환경 구축
실천 포인트
- React 내에서 count, sum 등의 루프 연산이 빈번한지 확인 - API 응답 데이터 중 클라이언트에서 사용하지 않고 집계용으로만 쓰이는 필드가 있는지 검토 - 단순 데이터 Fetching을 넘어 DB 단의 Aggregation function(RPC 등) 도입 가능성 분석 - 데이터 집계(DB)와 비즈니스 결정(App)의 경계를 설정하여 레이어별 책임 분리