Supabase란?

개요

강의를 듣던중 Remix를 공부하던 중에 Remix에서 통신을 구현하기 위해서는 DB가 있어야 한다고하여 Supabase에 대해서 간략하게 설명을 해주고 테이블 생성 및 데이터 삽입까지 간략하게 정리하고자 한다.

우선 첫번째로 Supabase가 무엇인지 부터 간략하게 알고 넘어가자.

Supabase

Supabase는 Firebase를 대체할 수 있는 오픈소스 프로젝트다. Firebase의 사용자였던 사람들이 모여 Firebase의 불편함을 경험하여 만들었다고 한다.

창업 배경에 대한 자세한 내용은 블로그 글을 참고하자.

이전에는 Firebase를 많이 사용했지만 Firebase의 과금 체계구조가 추가/삭제/수정 API 호출 횟수를 가지고 과금을 진행하기때문에 갑자기 10배의 사용자가 들어오게 되는경우 기존 요금의 10배의 요금을 지불했어야 했다.

하지만 Supabase는 데이터의 저장 용량을 기준으로 과금체계를 가지고 있어서 사용자가 10배, 100배 늘어나도 저장 용량을 넘지 않으면 추가 요금을 지불하지 않아도 되는 아주 천사같은 친구다.

또한 위에서 오픈소스 프로젝트라고 했기 때문에 Github에 모든 소스코드가 다 오픈되어 있어서 로컬환경에서 Supabase 환경을 자체적으로 만들어서 사용하면 완전한 무료로 사용할 수 있다.

프론트엔드 개발자가 Supabase를 사용하는 이유는 별도로 DB구축을 하지 않고도 DB를 효율적으로 사용할 수 있기 때문에 사용한다고 한다. 맞는말인듯 DB 환경셋팅 진짜 귀찮긴함..

Supabase 사용법

Supabase의 홈페이지에 접속하여 로그인을 진행한다.

Proejct 생성

1. New Project 버튼을 클릭하여 프로젝트를 생성한다.
   
2. 프로젝트 이름, DB 비밀번호, 리전을 선택 후 Create new proejct 버튼을 누른다.
   
3. (선택)추가적인 옵션은 디폴트 값으로 사용하거나 본인 입맛에 맞게 셋팅한다. 필자는 디폴트로 만들었다.

게시판 Table 생성

1. 왼쪽 메뉴에서 Table Editor로 페이지로 이동 후 New table 버튼을 클릭한다.
   
2. 테이블의 이름과, 설명을 입력하고, 구성한 스키마의 Columns를 입력하고 Save 버튼을 눌러 테이블을 생성해준다. 필자는 게시판에 대한 스키마로 구성하였다.
   

게시판 Table 데이터 생성

1. 왼쪽에 생성된 테이블을 클릭하고 Insert 버튼을 누른뒤 Insert row 버튼을 클릭한다.
   

2. id와 created_at 값은 자동으로 입력되므로 name에 값을 넣고 Save 버튼을 클릭한다.
   

3. 정상적으로 데이터가 들어가면 아래 사진과 같이 데이터가 표출된다.
   

게시글 Table 생성

1. 위에서 설명한 게시판 Table 생성과 동일하게 진행하되, 게시글은 게시판에 종속되어 있기 때문에 foreign key 설정이 필요한데 foreign key 설정을 위한 Column을 추가해준다.
   

2. board_id 컬럼의 링크 아이콘을 눌러 외래키 설정을 해준다.
   

3. board_id를 foreign key로 설정하면 사진처럼 타입을 변경할 수 없게 변경이된다. 오른쪽에 톱니바퀴를 누르면 다양한 옵션들이 있는데 Null값을 허용, unique값을 사용, array형태로 사용 같은 옵션들이 있는데 필요에 맞춰 셋팅한다. 필자는 board_id 값의 null을 비허용하였다.
   

게시글 Table 데이터 생성

위에서 설명한 게시판 Table 데이터 생성처럼 동일한 방식으로 데이터를 넣어준다.

이렇게하면 테이블을 만들고 데이터를 생성하는 작업이 모두 완료되었다. 이제 Remix에서 데이터를 불러오는 작업을 진행하면 된다.