[Supabase & React] supabaseClient 생성 #환경 세팅

1. 패키지 설치

yarn add @supabase/supabase-js

 

 

2. supabaseClient.js 생성

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

const SUPABASE_PROJECT_URL = "SUPABASE_PROJECT_URL";
const SUPABASE_ANON_KEY = "SUPABASE_API_KEY";

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

• `url`과 `key`를 `createClient`에 주입
• 반환 받은 `supabase` export
• 다른 곳에서 import해서 사용

🚨 주의

url, key는 절대 노출하면 안된다. `.env`에서 관리 하자.

 

 

3. 데이터 조회 테스트

import supabase from "../supabaseClient";

/* 기타 코드 생략 */
const FetchData = () => {
  useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await supabase.from("USER").select("*");
      if (error) {
        console.log("error", error);
      } else {
        console.log("data", data);
      }
    };

    fetchData();
  }, []);

• `supabaseClient.js` 에서 작성한 `supabase` 변수를 import하여 사용한다. 

위의 아주 간략하게 설명하자면 "USER" 테이블의 모든 데이터를 select(조회) 하는 코드이다. supabase와 연결되는 모든 코드는 `supabaseClient.js`의  `supabase`를 통해 사용이 가능하다. (이 이상의 문법에 대한 내용은 다루지 않음)