클라이언트 컴포넌트에서 Supabase

핵심 개념

Next.js Client Components에서 Supabase를 사용합니다. 실시간 구독과 낙관적 업데이트를 구현합니다.

코드 분석

SUPABASE📋 코드 (16줄)

'use client'
import { createClient } from '@/utils/supabase/client'

export function PostList({ initialPosts }) {
  const supabase = createClient()
  const [posts, setPosts] = useState(initialPosts)

  useEffect(() => {
    const channel = supabase.channel('posts')
      .on('postgres_changes', { event: 'INSERT', table: 'posts' },
        (payload) => setPosts(prev => [payload.new, ...prev])
      ).subscribe()

    return () => supabase.removeChannel(channel)
  }, [])
}

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Supabase '클라이언트 컴포넌트에서 Supabase' RLS 정책에서
보안 구멍·우회 가능한 케이스·과도한 권한을 찾고
안전한 정책 코드를 작성해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'클라이언트 컴포넌트에서 Supabase'를 Next.js + Supabase로 구현한
실전 풀스택 코드(Auth/RLS/Realtime 포함)를 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Supabase '클라이언트 컴포넌트에서 Supabase' 관련 테이블·RLS 정책 전체를 분석해서
보안 취약점·N+1 쿼리·인덱스 누락을
우선순위 리포트로 만들어줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Supabase '클라이언트 컴포넌트에서 Supabase' vs Firebase의
동일 기능 구현을 2026년 기준
비용·성능·DX로 솔직히 비교해줘.

⭐ 이것만 기억하세요

클라이언트 컴포넌트에서 Supabase는 이 3가지만 확실히 잡으세요

1.클라이언트에서 서버용 Supabase를 쓰면 서비스 키가 노출돼서 보안이 무너집니다

2.createBrowserClient(URL, ANON_KEY)로 클라이언트 전용 인스턴스를 생성하고, ANON 키만 노출합니다

3.다음 챕터에서 Middleware에서 인증을 처리합니다

💬 이 챕터 질문 보기

SUPABASE · CH.22 — 질문하거나 답변을 확인하세요

→

진행도 22 / 34

← 커리큘럼으로 ← 목록으로 (Supabase)