Supabase란 무엇인가? 웹페이지 SELECT, INSERT 실습

2024년 1월 16일 · 약 9분

이태환

개발자

Supabase란 무엇인가? 웹페이지 SELECT, INSERT 실습

목적

Supabase란 무엇인가?
- Firebase와의 차이점은 무엇인가?
웹페이지에서 데이터를 불러오고 삽입하기
- 구현하고자 하는 코드
- 발생한 문제

생활코딩의 Supabase 입문수업 - YouTube를 실습했습니다.

부딪혔던 문제와 해결법을 공유합니다.

Supabase란 무엇인가?

웹과 앱의 백앤드를 구현하기 위한 모든 기능을 제공하는 클라우드 서비스
데이터베이스 : 데이터가 모여져 있는 공간으로 구조적인 방식으로 관리되는 데이터들의 집합
스토리지 : 업로드된 파일을 저장
인증기능 : 회원가입 및 로그인, 로그아웃 등
Edge Function : 프로그래밍적으로 다양한 기능 처리 (장고, FastAPI 등이 수행하던)

구글의 Firebase와의 차이점

Supabase는 데이터베이스를 관계형 데이터베이스인 PostgreSQL을 사용합니다.

Supabase의 계층

계정 (Account)
조직 (Organizations)
프로젝트 (Projects)
- 데이터베이스
- 스토리지
- 인증기능
- Edge functions

실습에서 만들고자 하는 서비스

슈파베이스를 통해 데이터베이스를 구축한다.
- title(text), body(text), create_at(date), id(int8) 컬럼을 만든다.
웹페이지를 통해 구축된 데이터베이스에서 불러와 렌더링한다.
웹페이지의 'Create' 버튼을 이용해서 새로운 'title'과 'body'를 입력받아 데이터베이스로 신규 데이터로 추가한다.

1. Supabase 가입하기

웹페이지에 들어가면, 나오는 대문 내용이 아주 맘에든다.
- 일주일안에 만들어서, 수백만에게 배포하기
회원가입을 해보자.
나는 GitHub으로 회원가입했다.

2. 프로젝트 만들기

프로젝트를 시작하기 위해서 'Start your project' 버튼을 눌러보자.
그러면 아래와 같은 대쉬보드가 나타난다.

이름을 사용한 기본값 조직이 생성되어 있을 것이다. 이 조직 안에 'New Project' 버튼을 눌러보자.

프로젝트 상위 조직을 지정한다.
프로젝트 이름을 정하고
PostgreSQL의 데이터베이스의 암호를 입력한다.
- 나는 생성기를 통해서 생성했다. (따로 저장해두고 사용할 일을 거의 없다고 한다.)
Region은 서비스가 배포될 지역과 가까운 곳으로 설정하자.
- 나는 한국에 서비스를 해야하니, 서울로 정한다.
위 내용들을 설정하면 이제 프로젝트가 만들어졌다.

3. 데이터 입력하기

프로젝트 생성을 마치면, 위와 같이 대쉬보드가 보입니다.
테이블 데이터를 만들어주기 위해서 '테이블 에디터' 버튼을 눌러줍니다.

'New table' 버튼을 눌러 새 테이블을 만듭시다.

기본값으로는 'RLS'가 활성화 되어있다.

처음에 RLS를 체크를 해제하고 아래와 같이 'page' 테이블을 만들었다.

이렇게 만든 테이블은 누구나에게 접근이 가능하게 된다고 경고가 나온다.
- RLS을 활성화 하지 않아서 그렇다.

'Insert' 버튼을 누르고, 'Insert row'를 눌러 데이터를 추가해보자.

'id'와 'create_at'은 자동으로 입력된다.
선택 영역인 'title'과 'body'를 예시로 입력하고 저장해보자.

'id'값이 1인 데이터가 하나 만들어졌다.

4. 웹서비스와 연결하기

웹페이지와 데이터베이스를 연결한 서비스를 만든다고 가정해보자.
완성된 예시 코드를 먼저 훑어보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <title>JS Bin</title>
  </head>
  <body>
    <h1>Supatodo</h1>
    <div id="history"></div>
    <input type="button" value="create" id="create_btn" />

    <script>
      const supabaseUrl = API의 url
      const supabaseKey = API의 key
      const client = supabase.createClient(supabaseUrl, supabaseKey)
        async function refreshHistory() {
        let { data: record, error } = await client.from('page').select('*');
        console.log('record', record);
        let tag = "";
        for (let i = 0; i < record.length; i++) {
          tag += `<h2>${record[i].title}</h2>${record[i].body}`;
        }
        document.querySelector('#history').innerHTML = tag;
        }
      refreshHistory()

      async function recordHandler() {
        const { data, error } = await client
      .from('page')
      .insert([
        { title: prompt("title?"), body: prompt("body?") }
      ]).select()
        refreshHistory()
      }
      document.querySelector('#create_btn').addEventListener("click", recordHandler);
    </script>
  </body>
</html>

4-1. 웹페이지에 supabase 설치

supabase의 도큐먼트 -> Installing을 보면 'package' 또는 'CDN'을 통한 설치 안내가 나와있다.
여기서는 CDN으로 supabase를 설치한다.

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
//or
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>

4-2. supabase API 연결하기

'API 문서' 탭을 들어가면, 'Introduction' 영역에서 우리가 API를 연결할 수 있는 코드가 제공된다.
웹페이지에서 패키지를 import하는 것이 까다롭기 때문에, 여기서는 사용하지 않는다.
- 대신에 CDN으로 설치하면 전역변수 supabase를 통해 기능을 접근할 수 있다.
'url'과 'key'가 입력되어야 한다.

이는 '설정 -> API'에 들어가면 볼 수 있다.

4-3. 테이블에서 데이터를 읽어오기

'Introduction' 항목 밑에 우리가 만든 테이블 이름을 고를 수 있다.
밑으로 스크롤을 좀 내리면 'Read rows' 영역에 'READ ALL ROWS'의 코드가 있다.
이 비동기(await) 코드를 async 함수에 넣어서 사용해주면 데이터를 불러와 콘솔에 출력시켜볼 수 있다.

async function refreshHistory() {
    let { data: record, error } = await client.from('page').select('*');
    console.log('record', record);

4-4. 웹페이지 div 태그에 불러온 데이터 삽입하기

데이터를 읽은 수 만큼 할당하는 동적할당을 위해서 for문을 사용한다.
- for문으로 record를 반복해서 title과 body를 문자열 tag에 담아준다.
- 완성된 tag를 querySelector()를 통해서 div를 선택햬서, innerHTML에 넣어준다.

let tag = "";
for (let i = 0; i < record.length; i++) {
  tag += `<h2>${record[i].title}</h2>${record[i].body}`;
}
document.querySelector("#history").innerHTML = tag;

4-5 웹페이지에 'create' 버튼으로 데이터베이스에 데이터 추가하기

아까 읽어온 것처럼 'API 문서'의 테이블에 들어가서 'INSERT A ROW'의 코드를 가져온다.
위 코드를 가져와서 async 함수에 넣어준다.
위에서 some_column과 other_column에 우리가 넣고자 하는 데이터베이스의 컬럼 값을 넣어준다.
그리고 'someValue'와 'otherValue'에 넣고자 하는 값을 넣어준다.
- 여기서는 prompt를 입력받아서 데이터를 삽입해주고 페이지에 랜더링한다.

async function recordHandler() {
  const { data, error } = await client
    .from("page")
    .insert([{ title: prompt("title?"), body: prompt("body?") }])
    .select();
  refreshHistory();
}
document.querySelector("#create_btn").addEventListener("click", recordHandler);

여기까지 supabase 입문에 대해 알아보는 것을 마친다.

결론

supabase를 가입
프로젝트를 만들고
table을 만들어 웹페이지에서 불러와(SELECT) 랜더링
웹페이지에서 table의 데이터를 삽입(INSERT)