01. Supabase 기능 둘러보기

🌿 Supabase Database

📎 Supabase Database Docs

Table Editor

데이터베이스에 있는 데이터를 살펴볼 수 있음

insert, update, delete 기능 제공

SQL Editor

별도의 에디터 없이 브라우저 상에서 쿼리 실행 가능

Assistant에게 질문할 수 있는 ai 기능 제공

Database

모든 DB 관련 설정

Tables : 테이블 생성, 삭제, 컬럼 추가. Row Level Security(RLS) 기능 설정 가능

Functions : DB 함수 정의

Triggers, Enumerated, …

Indexes : DB 인덱스 설정(최적화)

Roles 관리

Backups : 특정 시간마다 백업 / 정확한 어느 시점으로 돌릴 수 있는(비쌈)

Migrations : 스키마가 어떤 상태인지 관리 가능, 버전 별로 업그레이드 가능하게 관리

Schema Visualizer : DB 스키마를 한눈에 확인 가능

Query Performance : 느린 쿼리 같은거 한눈에 확인 가능

🌿 Supabase Auth

📎 Supabase Auth Docs

 

이메일 로그인, 이메일 회원가입. 소셜 로그인, 핸드폰 인증 기능 등 제공

Authentication

유저 별로 접근 권한 관리

Providers 기능 제공

Rate Limits : Supabase에서 제약을 걸고 있는 부분. 이메일 갯수 제한 ..

Email Templates : 상황별 설정 가능

URL Configurateion : 어떤 사이트에서 Supabase Auth 기능을 허용하고 접근할지 설정 (http://localhost:3000)

🌿 Supabase Storage

📎 Supabase Storage Docs

 

Standard Uploads, Resumable Uploads

Storage

Buckets

버킷을 생성해서 파일 업로드 같은 기능 제공

버킷 별로 어떤 유저가 select, insert, update, delete를 할 수 있는지 policies 설정 가능

🌿 Supabase Realtime

📎 Supabase Realtime Docs

 

메시지를 보내거나 받는 등 실시간 데이터베이스의 변화를 다룰 수 있다.

• 제공 기능 : Broadcast(공지사항..), Presence(유저 현재 접속 여부..), Postgres Changes(DB에 특정 단어가 생겼을 때 파악 가능)

Realtime

Inspector

message_postgres_changes : message 테이블에 postgres_changes 이벤트를 받고 있음

🌿 Supabase 기본 문법 배우기(생성, 조회, 수정, 삭제)

Supabase 쿼리 문서는 매우 중요

문서 양이 많아서 Select, Filter 부터 살펴보는 것을 추천

패키지 설치

npm install @supabase/supabase-js

클라이언트 생성

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('<https://xyzcompany.supabase.co>', 'public-anon-key')

Select 쿼리 정리

📎 Select Query Docs

 

기본 Select 쿼리

const { data, error } = await supabase
  .from('countries')
  .select('*')

특정 필드만 쿼리

const { data, error } = await supabase
  .from('countries')
  .select('name')

다른 테이블 Join

• 이때 countries와 cities 테이블은 FK키가 걸려있어야 한다.

const { data, error } = await supabase
  .from('countries')
  .select(`
    name,
    cities (
      name
    )
  `)

결과 갯수 카운트 쿼리

• 정확 / 추측한 카운트 갯수를 가져올 지, 카운트만 가져올지, 데이터도 같이 가져올지 옵션 지정 가능

const { count, error } = await supabase
  .from('countries')
  .select('*', { count: 'exact', head: true })

JSON 필드 쿼리

const { data, error } = await supabase
  .from('users')
  .select(`
    id, name,
    address->city
  `)

복잡한 검색 기능 구현 (textSearch 함수)

📎 textSearch Docs

 

const { data, error } = await supabase
  .from('quotes')
  .select('catchphrase')
  .textSearch('catchphrase', `'fat or cat'`, {
    type: 'websearch',
    config: 'english'
  })

Insert 쿼리 정리

📎 Insert Query Docs

데이터 삽입

const { error } = await supabase
  .from('countries')
  .insert({ id: 1, name: 'Denmark' })

데이터 삽입 후 결과 반환

const { data, error } = await supabase
  .from('countries')
  .insert({ id: 1, name: 'Denmark' })
  .select()

한번에 여러 row 삽입

const { error } = await supabase
  .from('countries')
  .insert([
    { id: 1, name: 'Nepal' },
    { id: 1, name: 'Vietnam' },
  ])

Update 쿼리 정리

Row 업데이트

const { error } = await supabase
  .from('countries')
  .update({ name: 'Australia' })
  .eq('id', 1)

업데이트후 결과 반환

const { data, error } = await supabase
  .from('countries')
  .update({ name: 'Australia' })
  .eq('id', 1)
  .select()

JSON 데이터 업데이트

const { data, error } = await supabase
  .from('users')
  .update({
    address: {
      street: 'Melrose Place',
      postcode: 90210
    }
  })
  .eq('address->postcode', 90210)
  .select()

Upsert 쿼리 정리

• update / insert

📎 Upsert Query Docs

 

한 Row Upsert 쿼리

const { data, error } = await supabase
  .from('countries')
  .upsert({ id: 1, name: 'Albania' })
  .select()

한번에 여러 Row Upsert 쿼리

const { data, error } = await supabase
  .from('countries')
  .upsert([
    { id: 1, name: 'Albania' },
    { id: 2, name: 'Algeria' },
  ])
  .select()

id가 아닌 다른 필드로 Upsert

→ onConflict 추가. handle이라는 필드가 겹칠 때 update 하겠다.

const { data, error } = await supabase
  .from('users')
  .upsert({ id: 42, handle: 'saoirse', display_name: 'Saoirse' }, { onConflict: 'handle' })
  .select()

Delete 쿼리 정리

📎 Delete Query Docs 

 

한 Row Delete

const response = await supabase
  .from('countries')
  .delete()
  .eq('id', 1)

Delete 후 결과 반환

const { data, error } = await supabase
  .from('countries')
  .delete()
  .eq('id', 1)
  .select()

여러 Row 제거

const response = await supabase
  .from('countries')
  .delete()
  .in('id', [1, 2, 3])