피드로 돌아가기
Dev.toFullstack
원문 읽기
Next.js와 Supabase RLS를 활용한 고효율 카드 수집 트래커 설계
Building PocketDex Tracker: A Next.js and Supabase App for Pokemon TCG Pocket Collections
AI 요약
Context
사용자별 카드 소유 상태와 방대한 카드 메타데이터를 결합하여 실시간으로 수집 진척도를 추적해야 하는 요구사항 존재. 클라이언트 사이드에서 대량의 데이터를 연산할 경우 발생하는 렌더링 성능 저하와 데이터 무결성 유지 및 보안 강화가 핵심 과제임.
Technical Solution
- Server Components를 통한 인증 데이터 로딩과 Client Components의 Optimistic UI 업데이트를 분리하여 체감 응답 속도 개선
- Postgres RPC 함수를 도입하여 대량의 집계 연산을 데이터베이스 계층에서 처리함으로써 네트워크 페이로드 최소화 및 렌더링 효율 최적화
- Supabase RLS(Row-Level Security) 정책 설정을 통한 사용자별 데이터 접근 제어로 서버 사이드 보안 로직 단순화
- @supabase/ssr 및 Next.js Proxy를 통한 서버/브라우저 환경별 클라이언트 분리 및 세션 갱신 구조 설계
- 추천 로직을 UI와 분리한 독립 모듈(lib/recommendation)로 구성하여 Node.js 테스트 러너를 통한 결정론적 검증 체계 구축
- Inner Join과 Null Check를 활용한 소유/미소유 카드 필터링 쿼리 최적화
실천 포인트
- 집계 연산이 필요한 대시보드 구현 시 클라이언트 연산 대신 DB RPC 함수 활용 검토 - 사용자별 프라이빗 데이터 보호를 위해 애플리케이션 레벨이 아닌 DB 레벨의 RLS 정책 적용 고려 - 복잡한 비즈니스 로직(예: 추천 알고리즘)은 UI 프레임워크와 완전히 분리하여 단위 테스트 가능 구조로 설계 - 사용자 경험 향상을 위해 쓰기 작업 시 Optimistic UI 패턴 적용 및 백엔드 동기화 프로세스 구축