React

[React] supabase 설치 및 사용해 보기

woo.oing 2025. 11. 4. 17:40

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w

 

 

프로젝트에 supabase를 설치하고 사용까지 해보겠습니다

 

 

1. 계정 생성

아래 사이트에 접속하여 계정을 만들어줍니다

 

https://supabase.com/

 

Supabase | The Postgres Development Platform.

Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

supabase.com

 

 

2. 프로젝트 생성

[+ new project] 버튼을 클릭해서 새로운 프로젝트를 생성해줍니다

Region 같은 경우 현재 위치한 곳에서 가장 가까운 곳으로 선택하면 되고 저는 서울로 선택해 주었습니다

 

 

3. 프로젝트 연결

프로젝트를 생성하고 상단 [Connect] 버튼 클릭 → App Frameworks 탭에서 선택한 개발 환경에 맞게 env와 supabase 파일 설정을 알려주면 그대로 프로젝트에 파일 생성해서 코드 붙여놓으면 됩니다

 

프로젝트에서 supabase 를 사용하기 위해 아래 명령어를 터미널에 입력해서 설치해줍니다

npm i @supabase/supabase-js

 

 

4. 테이블 생성

Table Editor 로 들어가서 테이블명과 옵션, 컬럼 등을 설정하고 save 버튼을 눌러 새로운 테이블을 생성합니다

 

 

5. supabase cli 설치

npm install supabase --save-dev
npx supabase login