supabase
CHAPTER 26 / 34
읽기 약 2분
FUNCTION
파일 업로드 서비스
핵심 개념
이미지 업로드, 크기 제한, 형식 검증, CDN URL 반환까지 완전한 파일 업로드 서비스를 구현합니다.
코드 분석
export async function uploadAvatar(userId: string, file: File) {
// 검증
const MAX = 5 * 1024 * 1024 // 5MB
const ALLOWED = ['image/jpeg', 'image/png', 'image/webp']
if (file.size > MAX) throw new Error('File too large')
if (!ALLOWED.includes(file.type)) throw new Error('Invalid type')
const ext = file.name.split('.').pop()
const path = `${userId}/avatar.${ext}`
await supabase.storage.from('avatars').upload(path, file, { upsert: true })
const { data: { publicUrl } } = supabase.storage.from('avatars').getPublicUrl(path)
await supabase.from('profiles').update({ avatar_url: publicUrl }).eq('id', userId)
return publicUrl
}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.파일 업로드 후 URL만 저장하면 파일 삭제·권한 관리·용량 제한을 할 수 없습니다
2.Storage에 업로드 → public URL 생성 → DB에 메타데이터 저장 → RLS로 접근 제어까지 연결합니다
3.다음 챕터에서 Realtime으로 실시간 채팅을 구현합니다
공유하기
진행도 26 / 34