[Study] Supabase

목표

supabase가 무엇인지 확인을 하고, firebase와의 차이점은 무엇인지도 확인한다. supbase를 직접 사용해보고 사용상의 이득과 실을 따져본다.

---

Supabase

Supabase는 오픈소스로 제공되는 클라우드 데이터베이스 플랫폼이다. 해당 플랫폼은 PostgreSQL 데이터베이스와 함께 제공이 되며, 클라이언트와 서버 어플리케이션등 API와 개발 도구등을 제공하여준다. 확장성이 뛰어나며, 서버리스 아키텍처를 사용하다보니 데이터베이스 관리의 부담을 줄일 수 있다는게 장점이다. 실시간 데이터 스트리밍과 인증 그리고 권한 부여에 뛰어나다 보니 쉽게 웹과 모바일 앱을 빌드하고 배포할 수 있도록 지원해준다.

 

Supabase vs firebase

둘다 클라우드 기반 백엔드 플랫폼이라는 공통점이 있지만 몇가지 차이점이 존재한다.

1. 데이터베이스: Firebase는 NoSQL 데이터베이스를 사용하나, Supabase는 PostgreSQL 데이터베이스를 사용한다. 데이터 모델링 측면에서는 더 뛰어나다.

2. 오픈소스: 오픈소스 라이센스로 제공이 되다보니 소스코드를 직접 열람가능하다는 장점이 있다.

3. 가격: 일단 베타로 제공되다보니 Supabase는 현재 무료이다 (2023-04-20 기준). 하지만 Firebase는 소규모 사용자에게는 무료이나, 데이터 양이 많아질 경우 비용이 증가한다.

4. 인증: 서비스 내에서 인증 및 권한을 부여하는 Supabase와는 달리 Firebase는 Google 계정 인증이 기본이다.

5. 개발자도구: Supabase는 SQL 쿼리 작성, 다중 데이터베이스 지원, API 문서 생성등과 같은 다양한 개발자 도구를 제공한다. Firebase는 이보다는 조금 더 분석적인 형태의 Google Analytics, A/B 테스팅, 푸시 알림 등과 같은 세부 기능들을 더 제공을 한다.

 

NoSQL과 PostgreSQL의 차이점 

비정형 데이터의 경우 파이어베이스를 종종 사용해본 경험이 있을 것이다. 하지만, RDB (관계형 데이터베이스)를 NoSQL의 형태로 변환을 해서 사용하려다 보면 작업의 크기가 생각한것보다 확 증가할 수 있다.

여기 예를 들어서 설명해보자 (예시 참조: racoon.log "supabase 폼 미쳤다.")

레스토랑 1 = ["경양식", "스테이크", "스프"]
레스토랑 2 = ["한식", "퓨전음식", "국"]

json 형태로 변경할시에는

const shopList = [
	{ name: "레스토랑 1", categories: ["경양식", "스테이크", "스프"] },
    { name: "레스토랑 2", categories: ["한식", "퓨전음식", "국"]},

이렇게 된다. 하나씩 정리하면 될것이라고 생각하지만, 해당자료가 1,000개만 넘어가도 반복업무를 지속적으로 해야할 것이다. 즉, NoSQL로는 한계점이 있다.

 

이제 실제로 supabase를 사용해보자.

 

Supabase

1. 로그인 후 초기 화면

왼쪽 사이드 바에는 나의 프로젝트 들과 소속 그리고 preferences, Tokens 등이 존재하고 있다. 자 여기서 한번 New Project를 눌러 프로젝트를 만들어보자. 일단 테스트와 비밀번호를 아무거나 적어놓고, OK를 누르면 다른 화면이 나타날 것이다.

2. 프로젝트 생성

프로젝트를 생성하고 나면 프로젝트를 생성중이라는 화면이 나온다. 여기서 API 키라던지 비밀번호 그리고 URL등 기본적인 정보들을 확인할 수 있다.

3.프로젝트 생성 후 화면

보는 바와 같이 Table editor, SQL editor 등을 통해 database등을 edit할 수 있다.S

또한 Authentication, Storage, Edge Function, Realtime 등 Firebase에서 기본적으로 제공하는 기능들은 거의 제공하고 있다고 보면 될듯 하다. 그 외에도 바로 Project API를 사용하여 연결할 수 있도록 API도 바로 확인할 수 있도록 해놓았다. UI/UX적으로 개발자에게 필요한 정보를 한곳에 모아놓은 점은 정말 훌륭하다.

4. SQL Editor 사용해보기

Table 생성 혹은 SQL Editor 등 사용자에게 선택지를 주고 있다. 그럼 여기서 사이드바의 SQL Editor를 눌러서 Quick start를 한번 해보겠다. Quick start에서 Slack Clone을 클릭해본다.

나오는 화면에서 RUN을 눌러주면? Success. No rows returned가 terminal 창에 뜰 것이다.

그리고 여기서 Table editor를 클릭해보면, 분명 아까는 없었던 내용들이 구성이 되어있을 것이다.

순서대로 보면 channels, messages, role_permissions, user_roles, users 등 각각의 table 들이 생성이 되어있다. 자 그럼 여기서 가장 많이 쓰는 부분은 message 부분이 아닐까?

예제의 형태 처럼 각 테이블들이 이렇게 생성이 되어있다. 여기에 다가 추가로 한줄을 더 작성을 해보자.

channel id를 복사해서 붙여 넣고 내가 넣고 싶은 message를 입력한뒤 Save 버튼을 누르면 줄이 추가가 된다.

이렇게 보면 기존대비 row가 추가가 된것을 확인할 수 있다. 이렇게 table을 통한 데이터도 edit이 가능하다.

이렇게 데이터의 변경 이외에도 다양한 기능들을 제공한다고 일전에 설명을 하였는데 SQL Editor를 보면 알 수 있듯 다음과 같은 기능들을 제공한다.

• API 레코드 쓰기 / 읽기 / 이벤트 훅
• GraphQL 과 같은 인터페이스
• 회원관리 관련 (로그인, 탈퇴)
• PostgreSQL 인터페이스
• Quick start

 

마무리

실제로 돌아보면서 느낀 것이지만 Firebase를 바로 대체할 수 있다 라고 할 수 있을 정도의 규모는 아니다. 하지만, 핵심적인 기능들은 모두 구현하고 있으며, 여기서는 설명하지 않았지만 Storage라는 흥미로운 기능도 가지고 있다. 약간 google drive 느낌도 살짝 들기도 하는데, 폴더를 생성하고 각종 파일들과 폴더들을 저장할 수 있다. 마치 superfolder와 같은 개념으로 자료를 올리고 URL을 통해 연결하는 등의 연결도 진행할 수 있다는 점에서 매력적이다.

 

Upload를 할 수 있는 방식은 Drag and drop 형태의 Dashboard 혹은 JavaScript와 Dart등을 사용할 수 있으며, 다운로드도 마찬가지 이다. 게다가 Access Control을 통해서 file의 접근 가능 여부를 단계별로 지정하여 등록을 할 수가 있다. 이때 사용되는 것은 Postgres Database로 Row Level Security Policies가 적용이 된다. Security level을 등록할때에도 손쉽게 아래와 같은 명령어를 통해 Storage bucket (여기서는 저장소를 이렇게 부른다)의 접속 권한을 관리 감독할 수 있다.

Firebase에 익숙해졌거나 기업을 상대로 업무를 진행하는 사람들에게 아직까지 추천하기는 어려우나, open source에 관심이 있고 토이 프로젝트 및 간단한 서버가 필요한 소규모 개발자의 경우에는 쓸만할것 같다.

 

참고: (1) https://supabase.com