Ch.19 Supabase — 백엔드 없이 풀스택

Supabase 데이터베이스 — CRUD 완전정복

Supabase 대시보드에서 테이블을 생성할 수 있다JS 클라이언트로 CRUD 작업을 수행할 수 있다React에서 Supabase 데이터를 불러오고 표시할 수 있다

SQL을 배웠으니 이제 진짜 DB에 연결해보자

콘솔에서 SQL을 연습했던 것과는 차원이 다릅니다. 실제 앱에서 데이터를 저장하고 불러오는 경험을 해봅시다.

자바스크립트로 DB를 어떻게 조작하지?

Supabase JS 클라이언트 — SQL 대신 JavaScript 메서드로 CRUD를 수행합니다.

article

핵심 내용

대시보드에서 테이블을 만들고 RLS로 보안을 설정합니다

Table Editor: 대시보드 좌측 메뉴에서 Table Editor 클릭

New Table: 테이블 이름, 컬럼, 타입 설정

RLS 활성화: Enable Row Level Security 토글 ON

Policy 추가: 누가 어떤 데이터에 접근 가능한지 규칙 설정

-- SQL Editor에서도 가능
CREATE TABLE todos (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  is_done BOOLEAN DEFAULT false,
  user_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMPTZ DEFAULT now()
);

-- RLS 활성화
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;

-- 본인 데이터만 보기
CREATE POLICY "Users can view own todos"
  ON todos FOR SELECT
  USING (auth.uid() = user_id);

RLS = Row Level Security 테이블별로 '누가 어떤 행을 볼/수정할 수 있는지' 정하는 규칙입니다. 이걸 안 켜면 anon key로 모든 데이터에 접근 가능해집니다.

SQL 대신 자바스크립트 메서드로 데이터를 다룹니다

// CREATE — 추가
const { data, error } = await supabase
  .from('todos')
  .insert({ title: '장보기', user_id: userId })
  .select()  // 삽입된 데이터 반환

// UPDATE — 수정
const { error } = await supabase
  .from('todos')
  .update({ is_done: true })
  .eq('id', todoId)

// DELETE — 삭제
const { error } = await supabase
  .from('todos')
  .delete()
  .eq('id', todoId)

패턴을 기억하세요 `supabase.from('테이블').동작().필터()` — 이게 전부입니다. SQL을 알면 메서드 이름이 직관적으로 읽힙니다.

React 컴포넌트에서 useEffect로 데이터를 불러옵니다

import { useEffect, useState } from 'react'
import { supabase } from '@/lib/supabase'

export default function TodoList() {
  const [todos, setTodos] = useState([])

  useEffect(() => {
    async function fetchTodos() {
      const { data } = await supabase
        .from('todos')
        .select('*')
        .order('created_at', { ascending: false })
      setTodos(data || [])
    }
    fetchTodos()
  }, [])

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

실시간 구독도 가능합니다. 다른 사용자가 추가한 데이터가 즉시 화면에 반영됩니다.

// 실시간 구독 — 데이터 변경 시 자동 갱신
useEffect(() => {
  const channel = supabase
    .channel('todos')
    .on('postgres_changes',
      { event: '*', schema: 'public', table: 'todos' },
      (payload) => {
        console.log('변경 감지:', payload)
        fetchTodos()  // 다시 불러오기
      }
    )
    .subscribe()

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

Supabase에서 데이터를 조회하는 올바른 코드는?

RLS를 활성화하지 않으면 anon key로 모든 데이터에 접근할 수 있다.

Supabase에서 데이터를 삭제하려면?

edit_note

정리 노트

Supabase 데이터베이스 — CRUD 완전정복

CRUD 패턴

Create: supabase.from('table').insert({...}) — 데이터 생성
Read: supabase.from('table').select('*') — 데이터 조회
Update: supabase.from('table').update({...}).eq('id', id) — 수정
Delete: supabase.from('table').delete().eq('id', id) — 삭제

★

RLS(Row Level Security)를 켜야 클라이언트에서 안전하게 DB에 접근할 수 있습니다.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작