supabase에 연결하는 방법

다른 수강생들이 과제 테스트 해달라고 하면

항상 로그인 하는 기능이 있었다.

기능이 돌아가는 것도 신기했고,

구현한 것, 내 정보를 저장된 것도 신기했다.

 

나도 할 수 있지 않을까 싶어서 이번에는

supabase로 로그인을 구현하기로 했다.

 

사실 다들 firebase로 구현하라고 하긴 했지만

supabase라는 이름이 좀 더 멋져보이기도 했고,

튜터님들께서도 supabase를 추천해주셔서

supabase로 했다 ㅎㅎ

 

 

supabase:

안정성이 높고

성능과 기반이 좋은 sql 기반 관계형 데이터베이스

관계형 데이터베이스:

행과 열이 존재하는 것

 

 

사용 방법

1. supabase 설치하기

터미널에 yarn add @supabase/supabase-js 입력

 

2. VSCode에 .env파일 만들기

(파일 제목이 .env)

   1. Project Settings

       → API

       →  Project URL와 anon키를 가져옴

REACT_APP_API_KEY = "https://thisismyreactappapikey";

REACT_APP_ANON_KEY = "thisismyreactappanonkey";

* 이 api키와 anon키는 공개되어서는 안 된다.

(.env파일에 넣는 이유)

*변수명은 'REACT_APP' 으로 시작한다.

(암묵적인 룰)

 

3. gitignore 파일에 .env 추가하기

.env

그냥 마지막에 이렇게 추가해주면 된다.

 

4. supabase초기 세팅 해주기

 

// supabase 초기 세팅

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

const SUPABASE_PROJECT_URL = "thisismysupabaseprojecturl";

const SUPABASE_ANON_KEY = "thisismysupabaseanonkey";

const supabase = createClient(SUPABASE_PROJECT_URL, SUPABASE_ANON_KEY);

export default supabase;

 

supabase project key는

Project Settings 

→ API 

→ Project URL 에서 찾을 수 있고,

 

supabase  anon키는 

Project Settings 

→ API 

→ Project API keys 에서 찾을 수 있다.