[BaaS/Next.js] Supabase 소개 / next.js 프로젝트와 함께 설치해서 테이블 데이터 가져와보기

 

이전 팀프로젝트에서는 BaaS로 firebase 만 써봤었는데 이번 프로젝트에서  supabase를 처음으로 써보게 됐다. firebase가 사용하기 편리한 거 같아 supabase는 어렵지 않을까 고민이 있었지만 supabase가 익숙해지기만 하면 정말 좋다고 들었는데 이번 기회에 사용하게 되어 설렌다ㅎㅎ 간략하게 supabase에 대해서 알아보고 DB를 생성해 데이터를 불러오는 과정도 조금 써보기로!

 

---

💚 1. Supabase 란?

 

•  firebase (파이어베이스) 의 대안으로 인기를 얻고 있는 *BaaS 플랫폼이다.
•  PostgreSQL 기반의 SQL DB 기능, REST API 등의 기능을 오픈 소스로 제공
•  firebase만큼 편리하면서도, firebase가 못 갖춘 장점을 지니고 있다.
  • RDB(Relational-Database)를 통해 엑셀 시트처럼 내용을 채우는 DB방식을 제공
  • firebase는 NoSQL 기반 DB로, 쿼리 기능이 협소해 데이터 검색이 어렵지만, supabase는 PostgreSQL 기반의 SQL DB 기능을 제공해 데이터 검색 등 용이한 점이 많음
  • SQL Editor를 통해 SQL 쿼리를 웹페이지에서 작성,저장,실행 가능하고, Table Editor로 데이터를 스프레드시트(엑셀)처럼도 조회,작성 가능
  • 클라이언트, 서버 환경 모두에서 동일한 방식 작업이 가능한 ismorphic JavaScript 라이브러리를 제공

* Baas : Backend as Service - 서비스형 백엔드로, 프론트엔드 애플리케이션에 백엔드 서비스를 제공하기 위해 사용되는 모델. BaaS가 백엔드 코드를 만들어줘서 DB 서버 운영/관리 등의 백엔드 업무를 알아서 다 맡아주기 때문에, BaaS 사용자는 프론트엔드/사용자 측면 개발에만 집중 할 수 있다.         

(ex ) Firebase, Supabase, AWS Amplify 등)

 

---

 

또한  supabase 도 firebase auth 처럼 소셜 로그인을 비롯해 로그인/회원가입 기능을 구현할 수 있다.

 

오늘은 일단 next.js 프젝 생성 후 DB를 생성하고 불러와봤는데 처음 하다보니 좀 애를 먹었다 .. (특히 RLS policy때문에 🥲) 공식문서와 구글링을 통해 해결할 수 있었는데, 이 과정 - Supabase - DB 생성, 데이터 불러오는 방법을 기록해보기로 했다.

 

💚 2. Next.js 프로젝트를 supabase와 함께 생성하고 supabase와 연결해서 데이터를 가져오기

 

1 )  supabase 사이트에서 (next.js프젝과 연결할) 프로젝트 생성하기

우선 supabase 사이트에 가입한 적이 없다면 가입을 하고 로그인을 한다. 

https://supabase.com/

Supabase | The Open Source Firebase Alternative

 

그리고 start your project 나, 내 dashboard 에서 New project 를 눌러 프로젝트를 생성하자.

프로젝트를 생성하면 위 이미지처럼 프로젝트 url, 프로젝트 api key 가 뜬다!

아래엔 JS 등으로 사용하는 방법도 코드로 쓰여있음

 

 

2 )  IDE : supabase와 함께 next.js 프로젝트 생성하고 .env 에 프로젝트 url, api key 넣기

로컬 IDE 터미널 에서 (저는 VSC 터미널 사용) next.js 프로젝트 생성과 동시에 supabase까지 같이 설치!

 

✨ 아래공식문서 참조

https://supabase.com/docs/guides/getting-started/quickstarts/nextjs

Use Supabase with Next.js | Supabase Docs

 

❗yarn 패키지 매니저를 쓴다면,   yarn create next-app -e with-supabase   해도 마찬가지로 잘 설치된다.

(여기서 - 하나라도 빠지면 안되니까 주의하자 ㅠㅠ) 

이렇게 설치하면 알아서 next.js 프로젝트 생성 후 supabase api 키 등을 담아둘 수 있는  .env.example 파일까지 친절하게 생성된다.

  NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
  NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

 

그럼  .env 파일에 위처럼 프로젝트 url과 api key를 써주자.

< .. > 부분에 아까 supabase에서 만든 프로젝트의 url , api key 쓰기  ( < > 쓰는 거 아닙니다!)

 

 

3 )  supabase 사이트에서 해당 프로젝트에 들어가 table editor로 테이블 생성하기

(table editor 말고도 sql editor 가 있지만, sql 문을 작성 안해봤다면 테이블이 편할 것이다) 

 

schema 는 보통 public.   여기다가 new table 생성해서, 테이블명을 짓고

 

*RLS 는 추천한다고 하니 설정하는게 좋고 - (아직 나도 자세히는 모른다... 하지만 행 수준의 보안이라는 점 정도 체크.)

(*RLS : Row Level Security 행 수준 보안으로, '자신의 데이터만 가져올 수 있다'를 구현할 수 있는 보안 정책 설정이 가능하다고 함.)

 

Enable Realtime 도 체크해야 실시간으로 반영된다고 한다. 

 

그리고 columns 를 만들면 끝 !

 

 

❗columns 만들 때 주의사항

• 파이어베이스 때와 달리, 자료형 타입이 다양하기 때문에 좀 더 주의할 것.
  number (int, float, numeric,..) 나 string (varchar, text) 의 type 도 다양하기 때문에 좀 더 생각해야 한다
  😶‍🌫️ (나 역시 검색해가며 따져보았다)
• 설정 사항들
  - default value 초기값 설정 가능   (ex. null, 0 )
  - 톱니바퀴 눌러서 칼럼값을 array 배열로 할건지, 고유한 값으로 할건지 등 설정 가능.
  - primary key 도 체크해서 설정 가능. (중복 가능) 
    이 primary key 가, 여러 테이블 간 연결을 시켜주는 foreign key  (외래키)와 상관이 있다!
  
  여러 테이블을 연결시켜주는 foreign keys (외래키)에 관해서는 다음에 글을 쓰기로 하겠다 ..!

그리고 테이블을 생성하면 오른쪽에 뜨는 API Docs 를 누르면 친절하게 사용법도 다 나와있음. ㅎㅎ 

 

( + 참고 : 근데 이 때 생성할 때 부터 난 안됐음..ㅠ-ㅠ 알아보니, CORS에러를 저번에 접해서 관련 확장프로그램을 설치해서 돌리고 있었는데, 그거 때문에 supabase의 patch request를 무효화해서 생긴 문제였던 것으로 보였다. 그걸 끄니까 create table 성공!)

 

 

4 )  꼭! supabase 생성한 테이블에 ADD RLS policy 해주기!!! 

난 이것을 안해줘서 나중에 VSC에서 코드 쓰고 계속 데이터를 불러오지 못했었다 ... ㅠㅠ

 

supabase table

 

생성한 테이블 창에서 Add RLS policy 하고 - New Policy - 로 새로운 row 수준의 보안정책을 추가해보자.

별도의 설정을 할 게 아니라면   Get started quickly -

 

supabase rls policy

 

Enable read access to everyone (This policy gives read access to your table for all users via the SELECT operation.)

(를 선택하면 모두가 읽을 수 있도록 권한을 설정하는 것. 물론 다른 설정을 선택할 수도 있다. authenticated 유저만 insert를 할 수 있게 한다든지..) 

- Use this template 클릭 

- Allowed operation 에 대해서는 ALL만 선택하고 Review - Save policy 버튼 누르기! 

 

 

 

5 )   supabase table editor에서 테이블에 데이터 직접 넣어보기 

한번 supabase사이트에서 직접 데이트 넣어보고 조회가 되는지 테스트를 해보자!

insert 버튼 -> insert row 해주면 됨 !

 

디폴트값을 설정했다면 값 안넣으면 알아서 디폴트값으로 설정됨. 

 

이후 직접 테이블표에서의 값 수정은 해당 테이블 칸을 눌러주면 되는데,

string - text,.. 든, number 든 그냥  문자만 숫자만 그대로 써주면 됨. 

하지만 문자string의 배열과 같은 경우, ["   ", "  "] 와 같은 형태를 지켜서 써줘야한다. 

 

문자string의 배열과 같은 경우, ["   ", "  "] 와 같은 형태를 지켜서 써줘야한다.

 

여기서 배열은 string인 text가 원소인 배열: text [ ]

 

 

 

6 )  IDE : 서버 컴포넌트에서 server.ts의 createClient 불러서 데이터 다 가져오기

아까 위 공식문서대로 그대로 하면 된다.

아까 IDE -VS code 터미널로 next.js 프젝 생성하면서 supabase도 설치했기 때문에, 

utils폴더 - supabase 안에 server.ts가 생성되어있다.

 

여기있는 createClient 함수를 원하는 서버컴포넌트에서 불러와서 'supabase'와 같은 변수에 담고, 

await supabase.from("테이블명").select();      (혹은 select('*') 로 모든 테이블 내용 불러오기) 

하면 끄읕 !!

 

 

---

 

💡 추가 : JS 를 사용한다면 서버 / 클라이언트 환경 모두에서 사용가능한 createClient 를 사용하면 편리하다!

참고: Supabase 공식문서 - javascript/installing

 

Installing | Supabase

위의 6번 과정에서,

만약 Javascript, (typescript) 를 쓴다면 

@supabase/supabase-js 라이브러리의 createClient 를 import 해서 쓰면 서버/ 클라이언트 컴포넌트 모두에서 쓸 수 있다.

 

이거 정말 완전 장점이다 !!!! 😶

이걸 모르고 ;; 그냥 서버 컴포넌트에서는 server.ts의 createClient 쓰다가,

클라이언트 컴포넌트에서는 먹히지도않고 client.ts 걸 import 해도 안돼서.. 튜터님께 질문해도 안되고. 진짜 애먹었었다....... 😅

 

내 경우 아래 코드처럼 따로 createClientJs 라고 그냥 만들구.. 그걸 import 해서 호출해서 쓰도록 했다. 

import { createClient } from '@supabase/supabase-js';

export const createClientJs = () =>
  createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!);

const supabase = createClientJs();

 

 

---

 

다시 본론으로 돌아가서, 아래의 내가 쓴 코드를 참고하자.

 

createClient 함수를 변수에 담고,  --  const supabase = createClient(); 
이 변수를 통해 from('테이블').select(..) 를 해준 것.  --  const { data, error } = await supabase.from('communityPosts').select('*');

 

그럼 Supabase의 테이블 데이터를 불러올 수 있게 되는 것 !! 😆

// 서버 컴포넌트
import { createClient } from '@/utils/supabase/server';

const CommunityDetailPage = async () => {
	try {
  		const supabase = createClient(); 
	    const { data, error } = await supabase.from('communityPosts').select('*');
  		if (error) throw error
    } catch (error) {
    console.log(error);
  	}

  return (
    <div className="m-20">
       <p>{data[0].userId}</p>
       
      // ....

 

그리고 가져온 data 객체에는 테이블 데이터들이 [{   }, {   } ... ]  배열 안에 잘 담겨있으니, 

data[0] 으로 첫번째 행의 내용들을 (하나의 객체) 가져올 수 있다.

 

그래서 위 코드 return 문에서 볼 수 있듯, data[0].userId    와 같이 써줘서 원하는 밸류값 하나만 가져올 수도 있다.

 

만약 테이블 전체 데이터- 모든 column이 아닌, 특정 column 들만 가져오려면

let { data: communityPosts, error } = await supabase
  .from('communityPosts')
  .select('some_column,other_column')

select ('칼럼명,칼럼명') 처럼  안에 같이 써주면된다.

 

그 외 방법도 api docs 에 친절하게 나와있으니 참고해보자!