[FEPL05 / TIL] Day 08 (2편) - 밟으실 수...수수수파베이스

(이 TIL은 수퍼노바 한 곡 반복을 통해 작성되었음)

 

 

✏️ 오늘 배운 것

Draw.io

• 모델링한 데이터를 E-R 다이어그램으로 옮기기

Supabase

• Supabase
• E-R 다이어그램을 바탕으로 스키마 만들기
• Supabase를 Next.js에 연동하기

 

🙂‍↕️ 이미 알고 있던 것

진짜 둘다 처음 봤음. 저게 뭐야 몰랐어 나는...

 

💡 새로 알게된 것

Draw.io

Flowchart Maker & Online Diagram Software

 

Draw.io는 온라인에서 무료로 온갖 다이어그램을 그릴 수 있는 서비스이다.

작년 졸작할 때 데이터베이스 설계 문서로 ERD를 그릴 때 이걸 알았으면 참 좋았을 텐데....

 

 

내가 그린 ERD 보고 가세요.

 

Supabase

 

Supabase는 Firebase의 대체재로 나온 PostgreSQL에 기반한 오픈소스 데이터베이스 호스팅 서비스이다.

데이터베이스, Auth, Storage 서비스를 제공한다.

 

Supabase에 테이블 생성하기

프로젝트 페이지  ➡️ Database

 

 

Database Management ➡️ Tables

 

 

테이블, 속성, 제약조건 설정

 

이곳에서 테이블의 이름과 컬럼, 그리고 컬럼의 타입과 제약조건을 설정할 수 있다.

CSV 파일을 import 하는 기능도 지원한다. 꽤 괜찮은듯?

 

Next.js에 Supabase DB 셋업하기

이어서 가장 중요한, 서버리스 Next.js 프로젝트를 수행하기 위해 DB를 셋업해보자.

 

1. Supabase 데이터베이스 개설

 

Dashboard에서 먼저 Organization을 만들자. New organization을 클릭해 새 조직을 개설할 수 있다.

 

 

조직의 이름과 타입, 플랜을 선택해 조직을 개설하자.

나는 이미 만들어 놓은 것이 있으므로 새로 만들지는 않았다.

 

생성한 조직 페이지에 들어가면 프로젝트를 생성할 수 있다.

 

 

조직을 생성할 때와 마찬가지로 프로젝트 이름, 비밀번호, 지역 같이 간단한 정보를 기입하면 된다.

이 역시 나는 이미 만들어둔 것이 있으므로 새로 만들지는 않았다.

 

 

2. Next.js 프로젝트에 supabase 라이브러리 설치

 

✅ 처음부터 supabase와 함께 만들기

create-next-app을 통해 Next.js 프로젝트를 개설할 때부터 supabase를 이용하려 할 때에는 아래와 같이 시작할 수 있다.

npx create-next-app -e with-supabase

 

✅ 이미 개설되어 있는 프로젝트에 supabase 라이브러리 설치하기

이미 개발을 진행중인 Next.js 프로젝트에 supabase를 사용하고 싶다면 아래와 같이 설치할 수 있다.

 npm i @supabase/ssr @supabase/supabase-js
 //혹은 yarn add

 

3. Next.js .env 환경변수 설정

.env 환경변수 파일에 Project URL과 Anon Key를 넣어주어야 한다.

NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

 

 

프로젝트 페이지 메인에서 Connect를 클릭하면 모달창이 열린다.

 

 

App Frameworks 탭에서 자신이 사용하는 프레임워크와 라우터 종류를 선택한 다음, 아래 .env를 복사해서 자신의 .env에 붙여넣어주면 된다. 이렇게 하면, Next.js 프로젝트에서 Supabase를 사용할 준비를 마쳤다.

 

Next.js에서 Supabase DB 테이블에 접근하기

아주 간단하다. 아래는 Next.js의 App router에서 서버 컴포넌트 기준으로 supabase를 통해 menus 테이블에서 메뉴 리스트를 가져와 화면에 렌더링하는 예제다.

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

const Page = async () => {
  const supabase = createClient();
  const { data: menus, error } = await supabase.from('menus').select();

  if (error) {
    return <div>에러: {error.message}</div>;
  }

  return (
    <div>
      {menus?.map((menu) => (
        <div key={menu.id}>{menu.name}</div>
      ))}
    </div>
  );
};

export default Page;

 

supabase 라이브러리의 createClient를 생성해 .from('테이블명').select()로 테이블의 데이터를 가져온다. 

error 객체는 트랜잭션 시 발생하는 오류를 넘겨준다.

 

 

🤔 아직 모르는 것

select 이외의 트랜잭션.

본격적으로 프로젝트에 들어가기 전에 앞서, 간단하게 Supabase에서 테이블을 생성하고 Next.js에서 select 하는 예제만을 다루셨기 때문에 아직 insert나 delete 같은 기타 DML에 대해서는 더 알아봐야 한다. 어차피 프로젝트를 진행하면서 서비스를 개발하다 보면 무조건 해당 트랜잭션들을 사용해야 할 일이 많기 때문에... 그 과정에서 차차 알아가고 그제서야 TIL을 작성해보려고 한다.

 

💭 느낀 점

서버리스 DB 서비스는 보통 Firebase만을 사용해오던 과거였는데, 대체재라고 하니 뭔가 더 나은듯한 느낌적인 느낌이 드는 것은 어쩔 수가 없나보다. 

 

기존까지 진행한 팀프로젝트에서는 팀 내에 백엔드와 DB를 다루는 팀원이 따로 있었고, 무조건 DB 서버를 따로 둔 프로젝트를 진행했기 때문에 내가 직접 시스템의 데이터를 모델링하고 그것을 DB로 만들어 API를 작성할 일이 없었는데, 멋사 프로젝트는 결국 프론트엔드 부트캠프라 우리가 직접 DB까지 구축을 해야한다는 점은 나름 긴장이 되는 포인트.

 

하지만 개발에 관해서는 엄격하게 나누는 것보다 '프론트엔드가 중점이다', '백엔드가 중점이다' 같이 주력이 있고 대체로 다른 분야도 할 줄 알아야 한다고 생각하기 때문에, 흥미깊게 강의를 들을 수 있었다.