📖 TIL - Supabase 핵심 정리: 실무에서 자주 쓰는 기능 위주로

✨ 기본 설정 및 초기화

import { createClient } from '@supabase/supabase-js'
// ⚠️ 중요: .env 파일에 키 보관 필수
const supabase = createClient(
  process.env.REACT_APP_SUPABASE_URL,
  process.env.REACT_APP_SUPABASE_ANON_KEY
)

💡 데이터베이스 핵심 작업

1. Select (조회)

// 기본 조회
const { data, error } = await supabase
  .from('table_name')
  .select('*')
// 특정 컬럼만 조회
.select('column1, column2')
// 관계 테이블 조회 (중요!)
.select(`
  id,
  title,
  comments (
    id,
    content
  )
`)

2. Filter (필터링)

// 같음
.eq('column', value)
// 포함
.in('column', ['value1', 'value2'])
// 텍스트 검색
.ilike('column', '%value%')
// AND 조건
.eq('column1', value1)
.eq('column2', value2)
// OR 조건
.or('column1.eq.value1,column2.eq.value2')

3. 실시간 구독 (공식문서 강조)

// 실시간 변경 감지
const subscription = supabase
  .channel('custom-channel-name')
  .on('postgres_changes', 
    { event: '*', schema: 'public', table: 'table_name' },
    (payload) => {
      console.log('Change received!', payload)
    }
  )
  .subscribe()
// 구독 해제 (중요: 메모리 누수 방지)
subscription.unsubscribe()

🔐 인증 (공식문서 필수 사항)

1. 기본 인증

// 회원가입
const { data, error } = await supabase.auth.signUp({
  email: 'user@email.com',
  password: 'password'
})
// 로그인
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@email.com',
  password: 'password'
})
// 현재 사용자 가져오기 (중요!)
const { data: { user } } = await supabase.auth.getUser()

2. 세션 관리 (중요)

// 세션 변경 감지
supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_IN') console.log('SIGNED_IN', session)
})

⚡ RLS (Row Level Security) - 필수!

-- 테이블 보안 정책 예시
CREATE POLICY "Users can only access their own data"
ON table_name
FOR SELECT
USING (auth.uid() = user_id);

🎯 에러 처리 (공식문서 강조사항)

const { data, error } = await supabase
  .from('table')
  .select()
if (error) {
  // ⚠️ 에러 처리는 필수
  console.error('Error:', error.message)
  return
}
// 성공 시 처리
console.log('Data:', data)

💫 성능 최적화 팁 (공식문서 권장사항)

1. 필요한 컬럼만 조회

// ✅ 좋은 예
.select('id, title, created_at')
// ❌ 피해야 할 예
.select('*')

2. 페이지네이션 활용

// 페이지네이션
const { data, error } = await supabase
  .from('table')
  .select('*')
  .range(0, 9)  // 10개씩 조회

🤔 자주 하는 실수들

1. RLS 정책 미설정
2. 구독 해제 누락
3. 에러 처리 부재
4. 환경변수 관리 소홀