supabase란?

supabase란?

참고: alternatives | supabase-vs-firebase

다양한 서비스 중에 데이터베이스를 대체하는 서비스이다.

• 백엔드에서 연동할 수 도 있지만 클라이언트에서 서버리스하게 사용할 수 있는 특징이 있다.
• 모바일의 firebase의 기능을 대체할 수 있는 서비스 라고 생각하면 이해하기 쉬울 것 같다.
• 다양한 클라이언트 프레임워크와 통합을 지원한다.
  • 웹: React, Nextjs, Nustjs, SvelteKit, Vue …
  • 모바일: Flutter, Android Kotlin, Swift …
• Postgresql을 기반으로 서비스된다.
• 완전한 오픈소스이며 내부적으로 다양한 오픈소스와 통합된다.
• 호스팅 솔루션을 제공하고 요금을 부과하는 방식을 가진다. (ex. 클라우드)
• 기본제공 사용량이 합리적이다.

지원하는 기능

참고: Features | Supabase Docs

• Postgresql(이하 pg) 기반으로 pg에서 제공하는 기능은 대부분 지원한다.
  • 권한, 스케줄링 등
  • 클라이언트에서 접근해야 하기 때문에 pg의 권한 기능을 사용할 수 있다.
• 클라우드와 연결되어 엣지 함수 기능도 제공한다.
• 웹(수파베이스 스튜디오)에서 DB 조회 및 SQL 편집기 뿐만 아니라 모니터링도 제공한다.

Supabase 동작 원리

참고: Architecture | Supabase Docs

• 사용된 모든 라이브러리는 오픈소스이다.
• Kong: API 게이트웨이 or 리버스 프록시로 사용하며 Lua로 작성된 라이브러리다.
• /auth: 인증은 go언어로 작성된 GoTrue 라이브러리를 사용한다.
• /rest: Rest api는 하스켈 언어로 작성된 PostgREST 라이브러리를 사용한다.
  • PostgREST는 RESTful API로 pg와 통신을 지원하는 독립형 웹 서버이다.
  • pg-graphql을 사용하여 gql도 지원한다.
• /storage: pg의 메타데이터를 저장하며, S3와 호환하는 스토리지 서비스이다.
• /functions: Deno를 사용하여 엣지 함수 기능을 수행한다.
• 그 외는 문서 참조

사용예시

참고: Installing | Supabase

mongoDB와 비슷한 사용 방식을 지원한다.

• 예시 데이터 소스

create table
  countries (id int8 primary key, name text);

insert into
  countries (id, name)
values
  (1, 'Afghanistan'),
  (2, 'Albania'),
  (3, 'Algeria');

테이블 조회

• 호출

const { data, error } = await supabase
  .from('countries')
  .select()

• 응답

{
  "data": [
	{
	  "id": 1,
	  "name": "Afghanistan"
	},
	{
	  "id": 2,
	  "name": "Albania"
	},
	{
	  "id": 3,
	  "name": "Algeria"
	}
  ],
  "status": 200,
  "statusText": "OK"
}

특정 컬럼 선택하여 조회

• 호출

const { data, error } = await supabase
  .from('countries')
  .select('name')

• 응답

{
  "data": [
	{
	  "name": "Afghanistan"
	},
	{
	  "name": "Albania"
	},
	{
	  "name": "Algeria"
	}
  ],
  "status": 200,
  "statusText": "OK"
}

조건문을 사용하여 조회

• 호출

const { data, error } = await supabase
  .from('cities')
  .select('name, countries(*)')
  .eq('countries.name', 'Estonia')

• 응답

{
  "data": [
    {
      "name": "Bali",
      "countries": null
    },
    {
      "name": "Munich",
      "countries": null
    }
  ],
  "status": 200,
  "statusText": "OK"
}

생각 정리

최근 웹 클라이언트는 다시 SSR이 강세를 보인다.

• React의 nextjs, remix
• view의 nuxtjs
• svelte의 SvelteKit

SSR이 강세를 보이며 다양한 framework에서 DB와 직접 통신하는 방식이 다시 등장하고 있다.
(23년 4분기 기준)가장 많이 사용된 nextjs는 14버전에서 서버 컴포넌트에서 SQL을 작성을 지원한다.
이 외에도 많은 SSR framework 들은 prisma 같은 기술을 사용하여 DB와 통신하는 예제를 제공한다.

모바일 앱은 (초기 서비스 경우)구글의 firebase 를 사용하여 백엔드 없이 개발하는 경우가 많았다.
심지어 서버 통신이 필요하지 않은 경우 디바이스의 파일시스템만 사용하여 개발되기도 한다.

웹의 이러한 행보는 비용 뿐만 아니라 여러 측면에서 합리적이라고 생각되기도 한다.
하지만 웹의 경우는 과거 asp, php, jsp 같은 기술 즉, WAS가 주류이던 시절의 레거시를 청산하고
현재의 프론트, 백엔드 전문화의 시대를 맞이했다.
때문에 다시 과거의 실수를 되풀이 하는 것이 아닌가 하는 우려의 목소리가 많아 보인다.

참고

파이어베이스 킬러? 요즘 대세는 수파베이스!