supabase

Back-end환경을 사용할 수 있게 제공되는 Baas 어플리케이션

supabase 사이트에 들어가서 로그인을 한 후 Start project 클릭!

다시 한 번 New Project 클릭!

Organization은 프로젝트를 생성할 최상위 저장소라고 생각하면 된다.
Project name은 말 그대로 프로젝트 이름을 입력하면 된다.
Database Password도 말 그대로 데이터베이스의 비밀번호를 정하면된다. 여기서 Generate a password를 눌러 비밀번호를 자동 생성 하면 된다. 보안이 더 뛰어나기 때문이다.
Region은 대한민국을 선택하면 된다. 만약 미국으로 선택하면 미국 서버는 물리적 거리가 멀기 때문에 속도가 저하된다. 가까운 국가인 대한민국으로 선택하면 된다.
Create new project를 하면 된다.

프로젝트가 생성이 되면 가장 중요한 것이 있다. 바로 Project URL과 API anon KEY다. 왜냐하면 나중에 코드에서 데이터를 사용할 경우 두 정보를 가지고 인증 과정을 거쳐야하기 때문이다.

우리는 데이터를 Table이라는 저장소에 저장할 것이다.
좌측 메뉴 바에서 Table Editor를 클릭한다.

Creat a new Table 클릭!

테이블의 이름, 설명글을 작성한다.
그리고 중요한 부분이 등장한다. 바로 ⭐⭐⭐RLS다.
RLS란?테이블단위로 보안데이터 베이스 단위 보안이다. ROW LEVEL SECURITY행(Row)별로 보안을 걸어준다.
Columns에서는 추가하게될 데이터의 이름을 정의한다. todo라는 이름으로 데이터를 받고 text형식으로 받을 것이라고 정하는 것이다.
save를 눌러준다.

잘 생성된 모습을 볼 수 있다.

생성된 Table에 직접 데이터를 넣어 볼 것이다.
insert에서 insert now를 클릭!

todo에 원하는 데이터를 입력합니다.
id와 created_at은 직접 작성하지 않습니다. 왜냐하면 supabase에서 자동으로 관리해주는 기능이 더 좋기 때문입니다.
save를 클릭합니다.

데이터가 잘 입력된 것을 볼 수 있습니다.

이제 직접 코드에 적용해보도록 하겠습니다!!!!!

supabase 활용

yarn add @supabase/supabase-js를 vscode 터미널에서 입력해 패키지를 설치합니다.

아까 필요하다고 했던 Project URL과 API anon KEY를 복사해 createClient인자로 넣어준다.

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

// 인자1 : 프로젝트 주소
// 인자2 : 익명 키
const supabase = createClient(
  "Project URL",
  "API anon KEY"
);

const App = () => {
  useEffect(() => {
    //해당 로직은 supabase에서 데이터를 가져오는 로직이다.
    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;

결과를 보면 우리는 분명 데이터를 1개 넣어줬는데 콘솔에는 비어있다고 나온다. 그 이유는 아까 중요했다고 했던 RLS 때문이다. RLS

Table editor에서 Add RLS policy를 클릭한다.

Create policy 클릭!

우리는 정보를 선택해 가져올 것이기 때문에 select 클릭 후 save policy 클릭!

다시 새로고침을 해보면~~~ 데이터가 존재하게 된다.

UI로 출력해보면 잘 나오는 것을 알 수 있다.

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

const supabase = createClient(
   "Project URL",
  "API 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;

에러가 발생한다. 왜냐하면 RLS policy를 추가하지 않았기 때문이다. 이제 왜 RLS가 중요한지 알 수 있을 것이다.