1. Supabase란?
Supabase는 BaaS(Backend as a Service)로 서비스형 백엔드이다.
프론트엔드단에서 백엔드 서비스를 제공해 주는 서비스 모델이다. 즉, 데이터베이스와 API를 구축하는 데 필요한 복잡한 설정과 관리를 최소화해주며, 오픈소스로 공개되어 있기에 무료로 사용할 수 있고 클라우드 서비스를 제공하여 서버를 호스팅 하고 관리할 수 있다.
간단하게 기존 백엔드 서비스는 WAS단에 있는 백엔드를 거쳐 데이터베이스와 데이터를 주고받는 구조였다면 Supabase는 백엔드를 구성하거나 거칠 필요없이 Supabase에서 제공하는 API 통신을 통해 바로 데이터베이스에 있는 데이터를 프론트단에서 사용할 수 있게 해 준다고 생각하면 된다.
2. Supabase 특징
Supabase의 특징은 아래와 같다.
- PostgreSQL을 기반으로 하여 SQL 쿼리 및 다양한 데이터베이스 작업을 수행할 수 있다.
- SQL Editor 기능을 통해 SQL 쿼리를 쉽게 작성, 실행을 할 수 있고 테이블 스키마를 쉽게 생성할 수 있다.
- 인증, 보안, 실시간 업데이트 및 스케일링과 같은 백엔드 기능을 내장하여 쉽게 사용할 수 있게 해준다.
- 클라우드 호스팅으로 인프라 관리 부담을 줄여주며, 편리한 UI로 개발 생산성을 높여준다.
- 특정 REST API를 다양한 플랫폼 및 언어에서 쉽게 사용할 수 있게 제공해 준다.
Supabase에서 자체적으로 소셜 로그인 기능도 제공해 주며, API 통신을 통해 클라이언트 단에서 바로 데이터베이스의 데이터를 실시간으로 조회 및 수정을 할 수 있기에 애플리케이션을 빠르고 간단하게 구현할 수 있다는 게 큰 장점이자 특징이다.
3. Supabase 사용하기
Supabase에 대한 기초적인 사용법을 알아보자.
우선 Supabase 공식 홈페이지로 가서 로그인을 해주자. GitHub을 사용하면 로그인도 간편하게 할 수 있고 프로젝트 연동도 쉽게 가능하니 GitHub를 통한 로그인을 추천한다.
https://supabase.com/dashboard/sign-in?returnTo=%2Fprojects
Supabase
By continuing, you agree to Supabase's Terms of Service and Privacy Policy, and to receive periodic emails with updates.
supabase.com
로그인을 성공하면 아래와 같은 화면이 출력될 것이다. 원하는 이름과 타입을 설정하고 Free로 시작을 해주자.
나는 개인 개발용으로 생성을 할 것이기에 Personal로 지정하고 진행하였다.
다음으로 첫 번째로 생성할 프로젝트 이름과 비밀번호, 국가를 선택하고 옵션은 Default로 설정된 값으로 진행한다.
프로젝트 생성 완료가 되었다면 테이블을 하나 생성해 보자.
테이블 생성법은 주로 2가지 방식으로 생성이 가능하며, SQL Editor에서 직접 create 쿼리를 통해 생성하는 방법과 Table Editor에서 Supabase가 제공하는 UI를 통해 생성하는 방법이 있다.
먼저 SQL Editor에서 테이블을 생성해 보겠다. 왼쪽 메뉴에서 SQL Editor를 클릭하고 create table 쿼리를 간단하게 작성해 주자. 쿼리 적용은 Ctrl + Enter 또는 Run 버튼을 눌러주면 된다.
쿼리가 성공적으로 처리되면 아래에 Success 메시지가 발생될 것이다. 그러고 나서 왼쪽 메뉴에서 Table Editor를 클릭해 보면 아래와 같이 생성된 테이블을 확인할 수 있다.
다음으로 Table Editor에서 직접 생성을 해보겠다. Table Editord에서 아래 표시한 New table을 클릭해 준다.
그리고 테이블 명, 원하는 컬럼 및 타입/옵션을 정해주고 저장한다.
저장 후 Table Editor에서 생성한 테이블을 확인할 수 있다. 여기서 이전에 쿼리로 생성한 것과 차이점이 있다.
아래 이미지를 보면 쿼리로 생성했던 테이블은 자물쇠 아이콘이 있고 UI를 통해 생성한 테이블에는 없는 것이 확인될 것이다.
이는 Row Level Security(RLS)라는 Supabase만의 테이블 정책 설정 값이며, 테이블에 RLS 설정이 적용되어 있지 않으면 클라이언트단에서 API를 통해 해당 테이블에 대한 조회 및 동작이 안 될 것이다.
RLS가 설정되어 있지 않은 테이블이 Supabase 프로젝트에서 감지가 되어 Advisors 메뉴에서 아래와 같이 RLS가 적용되지 않은 테이블에 대해 확인을 할 수 있다.
이를 해결하기 위해서 다시 Table Editor 메뉴로 가서 RLS가 적용되지 않은 테이블을 선택한 뒤 RLS disabled 버튼을 클릭해 준 뒤 Enable RLS로 변경해 준다.
다음으로 Enable RLS가 적용된 테이블에 한해서 정책을 설정할 수 있다. 클라이언트단에서 API를 통해 해당 테이블을 조회할 수 있는 권한 정책 설정을 위해 테이블을 선택한 뒤 Add RLS policy 버튼을 클릭해 준다.
그다음 화면에서 Create policy 버튼을 클릭해 준다.
그리고 설정할 정책을 오른쪽 Templates 리스트에서 선택한 뒤 적용해 준다.
나는 모든 사용자가 해당 테이블을 오직 조회만 할 수 있는 권한을 설정하기 위해 SELECT를 선택하여 설정해 주었다.
이제 해당 테이블에 간단하게 데이터를 INSERT, UPDATE, DELETE 해보겠다. INSERT 역시 테이블 생성과 똑같이 SQL Editor에서 INSERT 쿼리를 작성하여 실행해도 되고 Table Editor에서 UI를 통해 넣어줄 수 있다.
컬럼마다 원하는 데이터를 입력하고 저장하면
정상적으로 INSERT 된 것을 확인할 수 있다.
UPDATE는 원하는 Column을 선택하여 수정할 내용을 입력하고 Enter를 하면 바로 수정이 된다.
DELETE는 리스트 맨 왼쪽에 있는 체크박스를 선택하고 DELETE 버튼을 클릭하면 해당 Row가 삭제된다.
다음에는 NextJS로 간단하게 클라이언트단을 구성한 뒤 API를 사용하여 직접 테이블을 SELECT 하여 조회하는 방법을 알아보겠다.
관련 포스팅
2025.04.15 - [Server/SUPABASE] - [SUPABASE] NextJS에 Supabase 연동하기
[SUPABASE] NextJS에 Supabase 연동하기
1. Supabase 세팅하기 (with. TypeScript)먼저 Supabase와 관련된 package를 npm을 통해 설치하자. 설치할 목록은 아래와 같다.필요한 Supabase package 들과 추가로 Supabase를 통해 가져오는 데이터를 react-query를 사
rlawo32.tistory.com
'Server > Supabase' 카테고리의 다른 글
[Supabase] NextJS + Typescript에 Supabase 연동하기 (0) | 2025.04.15 |
---|