supabase -1

이수민(React_9기)·2025년 2월 12일

supabase란?

오픈 소스 백엔드 서비스로, 데이터베이스 및 인증, 스토리지 등 다양한 기능을 제공하는 플랫폼.(말 조금 수정 필요)

supabase 테이블 만든 후 데이터 넣기

나중에 우리가 코드를 작성하실 때도 insert 할 때 id를 입력할 필요 없습니다. 이처럼 GUI 환경으로 아주 쉽게 데이터를 추가할 수 있습니다. 수정과 삭제도 너무나 쉬워요. 한번 해봅시다 🙂

GUI 환경이란?

GUI는 Graphical User Interface의 줄임말로, 사용자들이 복잡한 코드를 작성할 필요없이 사용자 친화적인 디자인을 통해 CRUD를 할 수 있는 비주얼 인터페이스를 뜻한다.

컨벤션(convention)은 어떻게 할까?

컨벤션
snake_case 를 기본 컨벤션으로 합니다.
SQL 은 기본적으로 대소문자를 구분하지 않고 소문자로 인식합니다. 의미단위를 camelCase 로 생각하고 작성해도 camelcase 로 인식합니다.
테이블명
테이블명은 복수형으로 해줍니다.
    user 테이블 No🙅 .
    users 테이블 OK🙆.

React에서 사용해보자 (vite기준)

이 유용한 기능을 React 프로젝트에서 활용을 해야할텐데 어떻게 하면 되는 걸까? 차근차근 알아가보자.

#1 프로젝트 세팅

📟 React 프로젝트 생성

yarn create vite

코드를 입력해 새 프로젝트를 생성한다.

명령어를 실행 후:

엔터키
React(언어 설정)선택
JavaScript+SWC(템플릿)선택

을 해 프로젝트 설정을 마무리한다.

템플릿으로는 총 5가지가 있는데, 각 특징은 아래와 같다:

✅ 옵션별 특징 정리

TypeScript
타입 안정성이 필요하면 선택

TypeScript + SWC
타입 안정성 + 빠른 빌드를 원하면 선택

JavaScript
가장 기본적인 선택 (타입 체크 없이 사용 가능)

JavaScript + SWC
기본적인 JS + 빠른 빌드를 원하면 선택

React Router v7 최신 React Router 버전이 필요하면 선택

supabase 클라이언트 설치

프로젝트 생성 후, 아래 명령어를 입력해 supabase 클라이언트를 설치한다.

yarn add @supabase/supabase-js

위 코드는 Supabase에서 제공하는 JavaScript SDK이다.

🧱 supabase Client 세팅

드디어! 다시 supabase로 돌아간다.

URL

API Key

가 우리가 필요한 정보로, supabase의 프로젝트 폴더가 열린 상태로 왼쪽 하단 탭 리스트에서 ⚙ Project Settings ➡ Data API 로 이동하면 화면 상단에서 바로 확인이 가능하다.

// App.jsx
import { createClient } from "@supabase/supabase-js";
import { useEffect } from "react";

// 인자1 : 프로젝트 주소
// 인자2 : 익명 키
const supabase = createClient(
  "https://<project>.supabase.co",
  "<your-anon-key>"
);

const App = () => {
  useEffect(() => {
    const getTodos = async () => {
      try {
        const { data, error } = await supabase.from("todos").select("*");
        if (error) throw error;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    };
    getTodos();
  }, []);

  return <div>App</div>;
};

export default App;

위 코드에서 "https://<.project>.supabase.co", "<.your-anon-key>" 라고 적힌 부분에(~~입력이 안돼서 앞에 .추가한 거니 무시해도 된다)~~ 방금 supabase에서 가져온 key들을 입력해주면 된다. 참 쉽죠?👩‍🔧

📌 짚고 넘어가기

createClient란?
createClient는 Supabase와 연결하는 클라이언트 인스턴스를 만드는 함수로, 이걸 사용해야 Supabase의 데이터베이스, 인증, 스토리지 등을 사용할 수 있다.

useEffect란?
useEffect는 리액트 컴포넌트가 화면에 렌더링될 때, 특정 코드(효과)를 실행할 수 있도록 하는 리액트의 기본 훅(Hook)이다.

👩‍💻 코드 실행 과정 이해하기

코드를 이해해보자...! 무엇보다 이 과정이 나에겐 가장 중요하다.

코드의 첫 부분에선 앞서 설명한 createClient와 useEffect가 import되었고, 아랫부분에선 createClient함수를 이용해 supabase 인스턴스가 생성되었다.

윗 함수에선 useEffect 훅이 실행되는데, 이때 두 번째 인자로 빈 배열([])을 할당받아, 컴포넌트가 처음 렌더링 되는 한 번만 실행된다.
getTodos는 비동기 함수로, supabase의 todos테이블의 모든(*) 행(column)을 가져온다.

1️⃣ Supabase는 SQL을 사용하듯이 데이터를 가져올 수 있다.어떻게?

Supabase는 PostgreSQL 기반으로, Supabase는 내부적으로 PostgreSQL 데이터베이스를 사용한다.

PostgreSQL은 SQL(Structured Query Language)을 사용해서 데이터를 조회하고 조작할 수 있으므로 Supabase의 select(), insert(), update(), delete() 같은 메서드도 SQL과 비슷한 방식으로 동작할 수 있다.

만약 에러가 발생하면 throw error로 예외를 발생시켜 catch 블록에서 처리하도록 되어있다.

이때 data에는 todos 테이블에서 가져온 데이터 배열이 저장되는데 그럴 시 이를 console.log로 출력하게 해 브라우저 콘솔에서 확인할 수 있게 하였다.

만약 에러가 발생하면 catch 블록에서 에러 메시지를 콘솔에 출력한다.
실제로 화면에는 "App"이라는 글자만 표시된다.
데이터는 화면에 표시되지 않고, 콘솔에서만 확인 가능하다.

🔑 RLS 설정

하지만 이렇게만 코드를 작성해선 화면에 빈 배열만 출력된다. RLS를 설정하기 전까지는! (두구두구두구)

위와 같은 화면에서 Add RLS policy 버튼을 클릭

Create policy 버튼 클릭

SELECT 를 선택한 후 Save policy를 클릭해 RLS policy 설정을 완료한다.
이제 더 이상 빈 배열이 아닌 제대로된 결과가 출력될거다.😉

UI를 보고싶다면 아래와 같은 코드를 입력하면 직접 확인이 가능하다!

import { createClient } from "@supabase/supabase-js";
import { useEffect, useState } from "react";

const supabase = createClient("https://<project>.supabase.co", "<your-anon-key>");

const App = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    const getTodos = async () => {
      try {
        const { data, error } = await supabase.from("todos").select("*");
        if (error) throw error;
        setTodos(data);
      } catch (error) {
        console.log(error);
      }
    };
    getTodos();
  }, []);

  return (
    <div>
      <h1>Todo</h1>

      {todos.map((todo, index) => (
        <div key={todo.id}>
          {index + 1}. {todo.todo}
        </div>
      ))}
    </div>
  );
};

export default App;

그럼 아래와 같은 화면이 보이게 된다.

➕ 데이터 추가 만들어보기

  const handleAddTodo = async (e) => {
    e.preventDefault();
    const { data, error } = await supabase.from("todos").insert({ todo });
    if (error) throw error;
    console.log(data);
  };
  
  return (
    <div>
      <h1>Todo</h1>
      <form onSubmit={handleAddTodo}>
        <input
          type="text"
          placeholder="할일을 입력하세요"
          value={todo}
          onChange={(e) => setTodo(e.target.value)}
        />
        <button onClick={handleAddTodo}>추가</button>
      </form>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.todo}</div>
      ))}
    </div>
  );