[0603] Supabase

Supabase

• 안정성이 높은 관계형 데이터베이스 (Firebase는 NoSQL)
• 실시간 기능 지원
• 확장성, 보안, 오픈소스 커뮤니티

BaaS (Backend as a Service)

클라우드 기반 백엔드 시스템.
백엔드 시스템 관리가 필요없으므로 프론트에 집중할 수 있다.

장점

• 개발 속도 향상
• 유지보수 간편
• 자동 스케일 업

단점

• 유연성 부족
• 비용 예측 어려움
• 플랫폼 의존성 : 다른 데이터베이스 또는 BaaS로 이전하기 어렵다

사용법

설치

npm i @supabase/supabase-js

세팅

import { createClient } from "@supabase/supabase-js";

// 1) project url
const SUPABASE_PROJECT_URL = "YOUR_SUPABASE_URL";

// 2) anon key
const SUPABASE_ANON_KEY = "YOUT_SUPABASE_KEY";

const supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_ANON_KEY);
export default supabase;

CREATE

const handleAdd = async () => {
  const { data, error } = await supabase.from("NACAMP_SAMPLE").insert({
    name,
    age,
    address, // 입력할 데이터
  });

  if (error) {
    console.log("error => ", error);
  } else {
    alert("데이터가 정상적으로 입력됐습니다.");
    console.log("data => ", data);
  }
};

READ

useEffect(() => {
  const fetchData = async () => {
    const { data, error } = await supabase.from("NACAMP_SAMPLE").select("*"); // from 테이블명
    if (error) {
      console.log("error => ", error);
    } else {
      console.log("data => ", data);
      setUsers(data);
    }
  };

  fetchData();
}, []);

UPDATE

const handleChange = async () => {
  const { error } = await supabase
  .from("NACAMP_SAMPLE")
  .update({
    address, // 수정할 객체
  })
  .eq("id", targetId); // 수정할 데이터 id

  if (error) {
    console.log("error => ", error);
  }
};

DELETE

const handleDelete = async () => {
  const { error } = await supabase
  .from("NACAMP_SAMPLE")
  .delete()
  .eq("id", targetId); // 삭제할 데이터 id

  if (error) {
    console.log("error => ", error);
  }
};