싸고, 빠르게 데이터베이스를 만드는 방법: Supabase

Supabase의 특징

효율적으로 개발할 수 있습니다.

• 반복적인 백엔드 CRUD 엔드포인트 구축을 줄여주는 SDK를 제공합니다

• 사용자 가입, 로그인을 편리하게하는 supabase Auth 기능을 제공합니다.

• 인프라를 설정할 필요 없이, 웹페이지에서 프로젝트 활성화가 가능합니다

사용자 인터페이스가 편리합니다.

• SQL 편집기와 테이블 Admin을 제공하여 웹에서도 쉽게 데이터를 보고 확인 할 수 있습니다.

• supabase Auth를 사용한다면 이메일 템플릿, Oauth Provider 혹은 유저를 관리할 수 있는 기능을 웹에서 쉽게 처리할 수 있습니다.

RLS로 데이터 보호가 가능합니다

• 각 상황별로 RLS를 설정하여 권한을 엄격히 부여할 수 있습니다 이를 통해 사용자나 그룹 별로 어떤 데이터 행에 접근할 수 있는지 정밀하게 제어할 수 있습니다.

다양한 기능

• AI를 위한 벡터 임베딩, 비디오 이미지 저장소, CRUD한 데이터를 가공해서 API화하는 Edge 함수실시간 데이터 처리 등 AWS 인프라 구축 없이 손쉽게 사용할 수 있습니다.

Next.js에서 Supabase 사용하기

supabase에서 DB 셋팅하기

• 링크로 이동하여 프로젝트와 Database를 셋팅합니다.

• 프로젝트로 이동하여, 좌측에 아이콘을 클릭하여 SQL Editor로 진입합니다

• 아래의 SQL을 입력하여 최초 데이터를 주입합니다

-- Create the table
 create table notes (
   id serial primary key,
   title text
 );

 -- Insert some sample data
 insert into notes (title)
 values
   ('Today I created a Supabase project.'),
   ('I added some data and queried it from Next.js.'),
   ('It was awesome!');

Next.js App 생성하기

• supabase에서 작성한 template를 기반으로 Next.js 프로젝트를 초기화합니다

npx create-next-app -e with-supabase

환경 변수 추가하기

• .env.local.example → .env 파일로 이름을 변경합니다

• 변경된 파일에 project url과 anon key를 추가합니다. 링크에서 확인 가능합니다.

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

supabase를 통해 데이터 호출하기

• app/notes/page.tsx 파일을 생성합니다

import { createClient } from '@/utils/supabase/server';
  import { cookies } from 'next/headers';

  export default async function Notes() {
		
    const cookieStore = cookies()
		// 클라이언트를 생성
    const supabase = createClient(cookieStore);
    // 클라이언트에서 query
		const { data: notes } = await supabase.from("notes").select();
    return <pre>{JSON.stringify(notes, null, 2)}</pre>
  }

• select 안의 문법은 기존에 사용하는 sql 문법과 비슷합니다. 좀 더 상세한 사용법이 알고 싶다면 링크를 참조해주세요

프로젝트를 실행하기

• npm run dev 명령어를 통해 프로젝트를 실행합니다

• http://localhost:3000/notes 를 접속합니다

• DB에 저장해 두었던 notes 테이블에 있는 데이터가 렌더링 된 것을 확인할 수 있습니다 🎉🎉🎉

장단점 분석

• 장점:



• 비용 효율적: 초기 비용이 낮고, 초기 서비스가 어느정도 규모가 크더라도 왠만해선 유료 플랜을 사용할 일이 없습니다.
• 빠른 개발: 간단한 sdk 통합으로 빠른 개발이 가능합니다. full-stack으로 개발한다면 백엔드 개발을 최소화하실 수 있습니다.
• 확장성: 클라우드 기반으로 필요에 따라 쉽게 확장할 수 있습니다. 뿐만 아니라 지원되는 다양한 기능들로 인해서 빠르게 가설 검증이 가능합니다.

• 단점:
• 애매한 type generator: 공식 페이지에서 지원하는 type generator를 써봤지만, 1:1 관계 혹은 복잡한 join에서 타입이 제대로 생성되는 경우가 있었습니다.
• 보안 고려사항: 클라이언트에서 rendering 하는 경우, API key가 외부로 노출됩니다. 이를 방지하기 위해 모두에게 공개된 API가 아닌 경우라면 RLS 설정을 반드시 해주어야 합니다.

결론

프로젝트 github

• 파크골프 가자

• 하우스 노트

• 슈차 파인더