Next.js와 Supabase를 이용한 사용자 인증 및 피드 좋아요 기능 구현
오늘 배운 내용
Supabase의 getUser() 메서드:
서버 컴포넌트에서 현재 로그인한 사용자 정보를 가져오는 방법
getSession()과의 차이점 및 장단점
서버 컴포넌트에서의 사용자 인증:
createClient()를 이용한 Supabase 클라이언트 생성
비동기 함수를 통한 사용자 정보 획득
FeedListItem 컴포넌트 개선:
사용자별 좋아요 상태 표시 기능 추가
useEffect를 이용한 좋아요 상태 확인
조건부 렌더링을 통한 하트 아이콘 변경
성능 고려사항:
개별 피드마다 데이터베이스 쿼리 실행의 잠재적 성능 이슈
대량의 피드 처리 시 최적화 방안 고려 필요성
서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이:
서버 컴포넌트와 클라이언트 컴포넌트에서의 인증 처리 방식 차이
useUser 훅 등 클라이언트 사이드에서의 대안적 방법
배운 점:
Supabase를 이용한 효율적인 사용자 인증 구현 방법
Next.js의 서버 컴포넌트와 클라이언트 컴포넌트의 특성을 고려한 기능 구현
사용자 경험을 개선하기 위한 UI/UX 요소 (좋아요 상태 표시 등) 구현 방법
앞으로의 과제:
대량의 피드 처리 시 성능 최적화 방안 연구
서버 사이드와 클라이언트 사이드의 상태 관리 전략 개선
사용자 인터랙션에 따른 실시간 UI 업데이트 구현 방법 탐구
React Query를 사용한 클라이언트 사이드 정렬 구현
배경 →
• 기존 피드 리스트에서 '찜한순'과 '댓글순' 정렬 기능 추가 필요
• 서버 측 정렬이 아닌 클라이언트 측 정렬로 구현 결정
주요 변경 사항 →
• useMemo 훅 사용하여 정렬된 피드 계산
• 모든 페이지의 피드를 하나의 배열로 병합 후 정렬
• 정렬 옵션에 따라 다른 정렬 로직 적용
장점 →
• 서버 요청 없이 클라이언트에서 즉시 정렬 가능
• 사용자 경험 향상 (빠른 반응성)
주의점 →
• 대량의 데이터 처리 시 성능 이슈 가능성
• 대규모 데이터셋의 경우 서버 측 정렬 고려 필요
학습 포인트→
• React Query의 useInfiniteQuery 활용
• useMemo를 통한 효율적인 계산 최적화
• 클라이언트 사이드 정렬의 장단점 이해
다음 단계 →
• 성능 모니터링 및 필요시 서버 사이드 정렬 구현 검토
• 사용자 피드백 수집 및 UI/UX 개선
