[Supabase] Supabase에 대해 알아보기, 기본 세팅

프로젝트 기능 중 오늘의 주제에 대해 자유롭게 말하는 기능이 있다. 

랜덤한 주제를 가지고 오는 openAPI를 찾아서 연결하고 싶었는데 그런건 없어 보여서 나를 위해서 직접 만들기로 했다.

아직 라즈베리파이로 DB구축을 덜 끝내서 그거 끝내고 openAPI로 만들까 하다가.. 

찾다보니 Supabase라는걸 알게됬다.

 

1. Supabase란

복잡한 서버 구축 없이도 PostgreSQL을 통하여 DB구축 및 로그인 인증, 스토리지, 실시간 API를 제공하는 Backend as a Service이다. 기존의 개발자들이 DB 생성, 사용자 인증 등을 매번 각각 개발해야 했다면 Supabase는 이를 패키지화 해서 제공하기 때문에 매우 편리하다. 또한 일정 용량정도는 무료이기 때문에 간단한 서비스를 만든다면 Supabase가 제격이다.

같은 이유로 나도 내 개인프로젝트에 Supabase를 연결하여 사용했는데 아주 편했다. 특히 Supabase DB - intelliJ와 연결해서 사용할 땐 극락을 맛볼 수 있다.

 

2. Supabase 사용법

기본 웹페이지가 영어로 되어있기 때문에 영어 울렁증이 없어야 사용할 수 있을것 같다. 하긴 개발잔데 영어울렁증이 있다는 것 자체가 코미디긴 하지만...

그리고 중간에 메뉴 구성이 달라졌는지 기존 자료와 많은 부분에서 달라져서 원하는 기능을 찾는데 좀 헷갈릴 것이다.

 

1️⃣ 프로젝트 생성하기

사실 프로젝트 생성하는거 자체는 그렇게 어렵지 않다.

(1) + New project 클릭

기존에 작성한 프로젝트가 있긴 하다ㅋㅎ

(2) 프로젝트명, DB 비밀번호 작성

참고로 저 DB 비밀번호는 잃어버려도 바꿀 순 있지만 그건 귀찮으니까 메모장 같은데다 고이 모셔서 잘 간직하도록 한다.

Organization은 그냥 아무렇게나 정해도 상관 없다. 난 그냥 내 개인 프로젝트명인 Dalmuri로 했다..

 

(3) 대시보드 이동

프로젝트를 처음으로 생성한다면 나타날 화면이다. 

화면엔 없는데 메뉴는 왼쪽에 있다. 

 

2️⃣ Supabase 둘러보기

(1) Table editor

말 그대로 PostgreSQL과 동일하게 table, view를 모두 만들 수 있다.

참고로 아무생각없이 table이랑 view 생성했다가 schema가 public임을 알게 됬다.....(사실 상관 없음)

openAPI에 사용될 것이기 때문에 사실 public에 있어도 괜찮긴 하지만.. 다음부터 테이블 생성할 땐 다른 스키마 새로 하나 만들어서 관리해야지..

create문을 따로 작성하지 않아도 여기서 테이블을 생성할 수 있다.

(2) SQL Editor

여기서 SQL문을 실행하면 테이블, 뷰, 함수 등등을 생성할 수 있다.

주의점!

PostgreSQL은 대소문자를 엄격하게 비교하며, 큰따옴표("")를 따로 작성하지 않는다면 

CREATE TABLE RANDOM_TOPIC // random_topic 테이블로 생성됨
CREATE TABLE "RANDOM_TOPIC" // RANDOM_TOPIC 테이블 생성됨

SELECT * FROM RANDOM_TOPIC // random_topic에서 select문 실행 - 오류
SELECT * FROM "RANDOM_TOPIC" // RANDOM_TOPIC에서 select문 실행 - 정상

위와 같이 에러가 발생하게 되므로 대문자로 표기된 table을 작성하거나 조회한다면 반드시 큰따옴표를 작성한다! 

Template를 선택해서 필요한 쿼리문을 선택, 작성할 수 있다.

3️⃣ Supabase와 IntelliJ 연결

기존 포스팅에서 이미 정리를 해놓긴 했지만.... 가장 많이 필요했던 2가지를 설명하겠다.

• applicatoin.yml or application.properties에서 작성하는 경우 - back에서 jdbcTemplate로 연결하는 경우

참고로 Supabase에서 Spring과 연결하는 방법은 2가지이다.

JdbcTemplate를 사용하거나, Supabase가 제공하는 Supabase SDK를 이용하거나

근데 SDK는 불안정하기도 하고 Kotlin을 써야해서... jdbcTemplate기준으로 한다.

(1) Connect > Type: JDBC 선택

보통은 이렇게 하면 되는데, 내 경우 IPv6으로 해야 DB가 연결이 되야 하는 케이스여서 저 방법이 통하지 않았다.

그럴땐 session pooler를 선택해야 한다.

 

(2) Type: URI, Method: Session pooler를 선택

참고 Database이름도 postgres로 서로 같아야 한다. 그리고 포트번호 기본으로 5432이다. username 앞엔 postgres도 붙여준다. 그냥 그대로 한다!

• 프론트에서 supabase를 연결하는 경우

Node.js를 사용하는 경우 SupabaseJS 클라이언트를 설치해야 한다.

npm install @supabase/supabase-js

그리고 .env에 프로젝트 project ID와 publishable key를 작성한다.

 

(1) project ID : Project Settings > General

(2) publishable key : Project Setting > API Keys

이 2개의 키 찾는것도 생각보다 힘들었다ㅋㅋㅋㅋ..ㅋ...

SUPABASE_URL에 project ID, SUPABASE_ANON_KEY를 Publishable key를 세팅한다.

src와 동일한 뎁스에 supabaseClient.ts라는 파일을 생성하고

위와 같이 작성한다.

그리고 supabase를 호출해서 작성하면 DB와 연결 가능!

 

[참고 자료]

https://develop-const.tistory.com/16

Supabase란?

https://tilnote.io/pages/66dd43f58f594ac62be23bd9

Supabase 란 무엇인가? 개발자들을 위한 백엔드 서비스