프로젝트 설정 & 클라이언트

핵심 개념

Supabase 프로젝트를 생성하고 JavaScript/TypeScript 클라이언트를 초기화합니다.

코드 분석

SUPABASE📋 코드 (17줄)

// npm install @supabase/supabase-js

// .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// 타입 생성
// npx supabase gen types typescript
//   --project-id <id> > types/supabase.ts

AI 프롬프트

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

Claude

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

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

ChatGPT

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

'프로젝트 설정 & 클라이언트'를 Next.js + Supabase로 구현한
실전 풀스택 코드(Auth/RLS/Realtime 포함)를 만들어줘.

Gemini

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

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

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Supabase '프로젝트 설정 & 클라이언트' vs Firebase의
동일 기능 구현을 2026년 기준
비용·성능·DX로 솔직히 비교해줘.

⭐ 이것만 기억하세요

프로젝트 설정 & 클라이언트는 이 3가지만 확실히 잡으세요

1.Supabase 클라이언트를 설정하지 않으면 프론트엔드에서 DB에 접근할 수 없습니다

2.createClient(URL, ANON_KEY)로 클라이언트를 생성하고, 환경변수에 키를 저장하며, RLS로 접근을 제어합니다

3.다음 챕터에서 테이블을 생성하고 RLS로 보안을 설정합니다

💬 이 챕터 질문 보기

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

→

진행도 6 / 34

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