Spotify 프로젝트의 백엔드 서버 구축은 Supabase를 활용한다.
지금까지 실무에서 항상 백엔드 개발자와 협업하며 일을 해왔기 때문에, 백엔드 관련 작업을 직접 해본적이 없고 지식도 부족하다.
하지만 혼자 진행하는 프로젝트다 보니 백엔드 작업까지 다 해야하기 때문에... BaaS를 사용해보자 한다!
BaaS
- Backend as a Service
- 프론트엔드 애플리케이션에 백엔드 서비스를 제공하기 위해 사용하는 모델이다.
여러가지 BaaS가 있지만 그중에서도 Supabase를 사용할 것이다.
참조 - Supabase가 뭐예요?
1. Supabase 프로젝트 생성하기
일단, Supabase에 접속하여 로그인을 진행한 후, Dashboard를 클릭한다.
나는 미리 생성해둔 프로젝트와 Organization이 있어 위와 같이 보이지만 Supabase에 처음 접속했으면 빈화면이 보이는게 정상이다.
상단에 New project 버튼을 클릭하면 다음과 같은 화면이 확인될 것이다.
위 필드를 모두 채운 후 Create new project를 클릭하면 프로젝트 생성이 완료된다.
'Project setting > CONFIGURATION > API'에 접속하면 Project URL과 Project API keys를 확인 할 수 있다.
이 값들을 복사하여 생성한 .env.local 파일에 붙여넣는다.
NEXT_PUBLIC_SUPABASE_URL = Project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY = anon public key
SUPABASE_SERVICE_ROLE_KEY = service_role key
각각 위와 같은 key값을 넣어주면 된다.
2. 테이블 생성하기
SQL editor는 별도의 third-party 프로그램을 사용하지 않아도 SQL 쿼리를 웹 페이지에서 작성, 저장 및 실행까지 할 수 있게 한다. SQL editor에서 제공하는 Templates과 Quick start를 사용하면, 테이블 스키마를 간단하게 생성할 수 있는데 한번 살펴보도록 하자.
Quick start에서 'Stripe Subscriptions'를 사용해보도록 하겠다.
2-1. Quick start 활용하기
'Stripe Subscriptions'를 클릭하면 테이블이 자동으로 생성되는데, 생성된 테이블 중에서 users를 한번 살펴보겠다.
users 테이블에는 id, full_name, avatar_url, billing_address, payment_method가 담기고, 오직 유저가 본인인 경우에만 유저 데이터를 볼 수 있고, 수정할 수 있음이 확인된다.
그 외에도 customers, products, prices 등 필요한 여러가지 테이블을 제공하고 있어, Quick start를 활용해 손쉽게 테이블을 생성할 수 있다.
그 다음 우측 하단에 Run 버튼을 클릭하면 성공이라는 메세지가 뜨게 된다. 이렇게 간단하게 테이블 생성이 완료되었다. 생성된 테이블은 Table Editor에서 확인할 수 있다.
2-2. 커스텀 테이블 생성하기
Quick start를 통해 테이블을 간단하게 생성해보았으니, 이제는 직접 테이블을 생성해보도록 하자.
Table Editor에서 New table 버튼을 클릭하면 다음과 같은 화면이 나타난다.
테이블 생성시에 컬럼도 추가가 가능한데, 하단에 Add column 버튼을 클릭하여 원하는 name과 type을 지정할 수 있다.
컬럼 네임 오른쪽 버튼을 눌러 원하는 컬럼에 Foreign key(외래 키) 등록도 가능하다.
** Foreign key(외래 키)란?
두 테이블 사이의 관계를 연결해준다. 즉, 참조 테이블 id 컬럼을 외래키로 지정하면 기준 테이블에서 기본키로 지정된 컬럼과 연결할 수 있다.
2-3. RLS policy 설정
생성한 테이블의 RLS policy를 설정해보자.
상단에 Add RLS policy 버튼을 클릭하면 다음과 같은 화면이 보일 것이다.
현재 songs 스키마는 public 상태임을 알 수 있다. 오른쪽에 Create policy 버튼을 클릭해보자.
여기서도 템플릿을 통해 간단하게 설정값을 수정할 수 있다.
설정값을 저장하면 다음과 같이 내가 지정한 policy 설정값을 확인할 수 있다.
바로 위의 liked_songs 테이블은 인증된 사용자만 등록이 가능하고, 사용자 id에 맞는 사용자만 삭제가 가능하도록 설정되어 있음을 알 수가 있다.
3. Storage 버킷 생성하기
다음으로 이미지를 저장할 버킷을 생성해보도록 하겠다.
Storage 메뉴에서 왼쪽 상단에 New bucket 버튼을 클릭한다.
Name of bucket에 버킷 이름을 입력해주고, Public 여부도 체크해준다.
추가로 업로드 하는 이미지의 용량 제한을 걸어주거나, 업로드하는 파일 종류도 지정이 가능하다.
Storage도 테이블과 마찬가지로 policy 세팅이 가능하니 필요에 따라 설정을 해주면 된다.
4. 프로젝트에 Supabase 설치하기
다음으로 Supabase를 설치하고, REST API에서 타입스크립트 타입을 생성해보자.
타입스크립트를 사용하면 API 응답 데이터의 타입을 컴파일 타임에 체크할 수 있어 런타임 오류를 방지할 수 있으므로 개발 중 오류를 줄일 수 있으며, 코드 가독성과 유지보수를 쉽게 할 수 있다.
타입을 적용하기 위해서는 Supabase의 Dashboard에서 타입을 직접 생성하고 다운로드 하는 방법도 있지만, 지금 이 프로젝트에서는 Supabase CLI를 사용하여 타입 생성해보도록 하겠다.
https://supabase.com/docs/guides/api/rest/generating-types
위의 공식문서에 들어가보면 타입 DB를 세팅하는 방법이 아주 친절하게 나와있다.
4-1. Supabase 설치하기
먼저 Supabase를 설치해보자.
npm i supabase@">=1.8.1" --save-dev
# or
yarn add supabase@">=1.8.1"Supabase가 설치가 되고 나면 로그인을 진행해야 한다.
npx supabase login
로그인 명령어를 입력하면 아래와 같이 브라우저를 오픈하라고 나오는데 엔터를 누르면 자동으로 브라우저가 오픈된다. 혹시 오픈이 되지 않는 경우 아래의 url로 직접 이동하면 된다.
키가 생성되었다는 안내문구가 뜨면 굳이 위의 화면까지 다 확인하지 않아도 에디터에 자동으로 토큰값이 입력되니 에디터로 바로 돌아가도 된다.
4-2. TypeScript 타입 생성하기
npx supabase init
npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts
위의 명령어를 입력후, types_db.ts 파일이 생성되었다면 정상적으로 TypeScript 타입 생성이 완료된 것이다.
