01 1 supabase기초

1-Supabase

Supabase는 오픈 소스 백엔드 서비스 플랫폼으로, Firebase의 대안으로 자주 사용됩니다. 주로 프론트엔드 개발자들에게 빠르고 효율적인 백엔드 구축을 가능하게 해줍니다.

1-1-주요 기능

PostgreSQL 데이터베이스

Supabase는 PostgreSQL을 기반으로 하며, 관계형 데이터베이스를 쉽게 설정하고 관리할 수 있습니다.
SQL 쿼리를 활용해 복잡한 데이터 작업도 처리 가능.

실시간 기능

데이터베이스에 변화가 생기면 이를 실시간으로 클라이언트에 반영할 수 있습니다.
예: 채팅 애플리케이션, 알림 시스템 등에서 활용.

인증(Authentication)

사용자를 위한 로그인 및 회원가입 기능을 제공하며, 소셜 로그인(Google, Facebook 등)도 지원합니다.

스토리지(Storage)

이미지, 동영상, 문서 등을 업로드하고 관리할 수 있는 기능.

RESTful API와 GraphQL

데이터베이스 스키마를 기반으로 자동으로 API를 생성합니다.
REST와 GraphQL을 모두 지원해 다양한 방식으로 데이터를 조회하거나 수정 가능.

간단한 설정 및 관리

Supabase 대시보드를 통해 데이터베이스와 인증, 스토리지 등을 손쉽게 설정.

1-2-요금제

요금제	설명	가격
무료(FREE)	기본 기능 제공

500MB 데이터베이스 저장 용량
1GB 스토리지
월 2GB 대역폭
프로젝트 최대 2개
7일 이상 미사용시 잠자기모드 | 무료 | | 프로(PRO) | 확장된 리소스와 기능
더 큰 데이터베이스 저장 용량
추가 스토리지 및 대역폭
프로젝트 수 증가
고급 기능 및 지원 | 프로젝트당 월 $25 |

1-3-서비스 구조

1-3-1. Database (PostgreSQL 기반)

Supabase의 핵심 데이터 저장소.
PostgreSQL을 사용하여 강력한 관계형 데이터베이스를 제공합니다.
기능:
- 데이터 모델링 및 관계 설정.
- 트리거, 함수, 뷰, 확장 기능 지원.
- JSON 데이터 처리 및 복합 쿼리 가능.

1-3-2. Authentication (인증 및 권한 관리)

사용자를 인증하고 권한을 관리하는 서비스.
기능:
- 이메일 및 비밀번호 인증.
- OAuth(소셜 로그인): Google, Facebook, GitHub 등.
- Magic Link(로그인 링크) 및 SMS 인증.
- JWT(JSON Web Token) 기반 인증 토큰 생성.
- 사용자별 역할(Role) 및 권한(Role-based Access Control, RBAC) 설정.

1-3-3. Storage (파일 스토리지)

대용량 파일을 관리하기 위한 스토리지 서비스.
기능:
- 이미지, 비디오, 문서 등 파일 업로드 및 다운로드.
- S3 호환 API로 파일 관리.
- 퍼블릭/프라이빗 파일 권한 설정.

1-3-4. Realtime (실시간 기능)

데이터베이스의 변화(삽입, 수정, 삭제)를 실시간으로 감지.
웹소켓(WebSocket)을 활용하여 클라이언트에 실시간 업데이트 전송.
적용 사례:
- 실시간 채팅 애플리케이션.
- 대시보드 데이터 자동 갱신.
- 알림 시스템.

1-3-5. Edge Functions (서버리스 함수)

서버리스 환경에서 커스텀 백엔드 로직을 실행할 수 있는 서비스.
Deno 런타임 기반으로 실행.
기능:
- 데이터 처리, 알림 전송, 서드파티 API 연동 등.
- 클라이언트 요청에 대한 백엔드 처리 구현.

1-3-6. 자동 API 생성

데이터베이스 테이블/뷰를 기반으로 RESTful API와 GraphQL API를 자동 생성.
API를 통해 데이터를 삽입, 조회, 수정, 삭제 가능.
기능:
- Role 및 사용자 권한을 적용하여 보안 유지.
- 클라이언트에서 데이터베이스에 직접 접근하지 않아도 안전하게 데이터를 다룰 수 있음.

1-3-7. 관리 대시보드

개발자와 운영자를 위한 웹 기반 관리 툴.
기능:
- 데이터베이스 스키마 설정 및 데이터 관리.
- 사용자 인증 및 역할 관리.
- 실시간 로그 확인.
- 스토리지 관리 및 파일 업로드.

1-4-계정구조

1
[Account]
2
   └── [Organization 1]
3
   │       └── [Project 1]- Database, API, Auth, Storage, Realtime
4
   │       └── [Project 2]- Database, API, Auth, Storage, Realtime
5
   └── [Organization 2]
6
           └── [Project 3]- Database, API, Auth, Storage, Realtime

계정[Account] 하위의 여러 조직[Organization]을 생성할수 있으며 각 조직별 프로젝트를 생성하여 독립적인 데이터베이스 시스템을 구축할수 있습니다.

2-supabase 데이터베이스 생성

https://supabase.com/ 회원가입
프로젝트 생성

테이블생성

테이블 설정

컬럼설정

데이터 입력

3. 클라이언트 구성

자바스크립트 이외에도 리액트,뷰,플루터,코틀린 등 다양한 프론트엔드 프레임워크에 클라이언트 라이브러리를 연동할수 있습니다

3-1-javascript

간단히 자바스크립트로 연동해 보겠습니다.

3-1-1-index.html

html 문서 생성

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Document</title>
7
</head>
8
<body>
9

10
</body>
11
</html>

3-1-2-클라이언트 라이브러리 설치

https://supabase.com/docs/reference/javascript/introduction 를 참조
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>

1
<!DOCTYPE html>
2
<html lang="ko">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Document</title>
8
</head>
9

10
<body>
11
 ** <h1>SupaTable</h1>
12
  <div id="table"></div>
13
  <button>add</button>
14
  <script src="https://unpkg.com/@supabase/supabase-js@2"></script>**
15
  <script></script>
16
</body>
17

18
</html>

데이터베이스의 url 과 인증키를 추가하여 연결한다. https://supabase.com/docs/reference/javascript/initializing 참조 url과 key 확인은 아래 이미지를 참조하여 확인한다.

1
  <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
2
  <script>
3
    const supabaseUrl = 'https://arvjklaczkexstwzfjzz.supabase.co';
4
    const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5어쩌구저쩌구'
5
  </script>

createClient() method를 호출하여 url과 key 를 전달하면 연결된다.

1
const client = supabase.createClient(supabaseUrl, supabaseKey);

log 확인

4-데이터를 브라우저 화면에 표시하기

4-1-테이블의 데이터 불러와서 렌더링하기

아래의 이미지를 참고하여 순서대로 클릭한다

api 설명서가 열리면 아래 이미지의 표시된 곳을 클릭한다. 행을 불러오는 명령어를 알려주고 있다.

모든 행의 데이터를 불러올 것이므로 Read all rows 의 소스코드를 복사하여 붙여넣는다.

loadDB 함수 작성

1
    const loadDB = async () => {
2
**      let { data: table, error } = ****await client****.from('table').select('*');**
3
    }

2 번에서 복사한 코드를 함수의 실행문에 붙여넣는다. 이후 await supabase ⇒ await client 로 수정한다

로그확인

테이블의 레코드를 확인했으면 이제 코드를 이어서 작성한다. 에러처리를 하고 레코드의 값을 동적요소로 래핑하여 렌더링 시킨다.

1
//전역으로 사용하기 위해 loadDB 함수 바깥에서 상수선언
2
const tableEl = document.querySelector('#table');
3
const btnEl = document.querySelector('#add');
4

5
const loadDB = async () => {
6
  let { data: table, error } = await client.from('table').select('*');
7
  if (error) {
8
    console.error(error);
9
    return;
10
  }
11
  //동적요소를 담을 변수
12
  let el = '';
13
  //for 문으로 table의 길이만큼 동적요소 생성
14
  for (let i = 0; i < table.length; i++) {
15
    el += `<div>${table[i].title} ${table[i].body} ${table[i].name}</div>`;
16
  }
17
  //tableEl에 동적요소 삽입
18
  tableEl.innerHTML = el;
19
}
20
loadDB();

5-create구현

form 요소에 입력된 데이터를 supabase 서버에 저장해보자

html 요소 수정

1
  <h1>SupaTable</h1>
2
  <div id="table"></div>
3
  <form id="addForm" method="post">
4
    <input type="text" id="title" placeholder="title" value="">
5
    <input type="text" id="body" placeholder="body" value="">
6
    <input type="text" id="name" placeholder="name" value="">
7
    <button id="add">add</button>
8
  </form>

스크립트 작성

1
const addForm = document.querySelector('#addForm');
2
addForm.addEventListener('submit', async (e) => {
3
      e.preventDefault();
4
      const title = document.querySelector('#title').value;
5
      const body = document.querySelector('#body').value;
6
      const name = document.querySelector('#name').value;
7
      const { data, error } = await client.from('table').insert([{ title, body, name }]);
8
      loadDB();
9
      document.querySelector('#title').value = '';
10
      document.querySelector('#body').value = '';
11
      document.querySelector('#name').value = '';
12
      if (error) {
13
        console.error(error);
14
        return;
15
      }
16
    });

레코드(rows)를 추가하는 방법은 아래 이미지의 번호대로 이동하여 슈파베이스의 api 문서를 참조한다.

해당 문서에는 rows를 추가하는 것 뿐 아니라 수정,삭제 하는 방법이 쉽게 설명되어 있다.