1. Supabase
Supabase는 파이어베이스 대안 오픈 소스 프로젝트이다.
파이어베이스와 같이 편리하며 다른 점은 관계형 데이터베이스를 제공한다.
- SQL 쿼리로 작성하면 테이블 스키마를 쉽게 작성할 수 있다.
- 데이터베이스 내부 데이터를 엑셀 시트와 같이 확인할 수 있다.
1.1 supabase 설치
yarn add @supabase/supabase-js
프로젝트에 supase를 설치하면 이제 초기화를 할 수 있다.
자신의 프로젝트 주소와 API 키를 넣어주면된다.
API Docs > Introduction 탭을 통해 자신의 주소와 키를
확인할 수 있다.
supabse 설정하는 코드는 db.ts를 만들어 따로 관리해준다.
supase server와 key 관련 데이터는 .env 파일에 저장한다.
📁 src 👉 📁 app 👉 📁 api 👉 db.ts
import { createClient } from '@supabase/supabase-js';
import { Database } from '../../types/supabase';
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY as string;
export const supabase = createClient<Database>(supabaseUrl, supabaseKey);처음 세팅된 예약 테이블은 캠프 구역 테이블 없이 캠프 테이블만
설계되어 있었으며 camp_id만 외래키로만 연결되어 있었다.
하나의 캠프에 여러 개의 캠프 구역이 존재하는데
배열 형태로 데이터를 넣는 것은 권장하지 않는다고 한다.
➡️ 최대한 중복된 데이터는 잘게 나누는 것이 좋기 때문에
캠핑 구역 테이블을 따로 생성한다.
- 하나의 캠프 테이블에는 여러 개의 캠핑 구역을 가질 수 있다. ( 1:n )
👉 1:n 관계인 경우, n에 해당하는 camp_area 테이블에서 camp 테이블의 id값을 외래키로 참조할 수 있다.
👉 1:1 관계의 경우, 두 테이블에 각각 기본키끼리 서로
연결해주면 된다.
❓ 외래키란?
외래키는 두 테이블 사이의 관계를 연결해준다. ➡️ 참조 가능
참조 테이블 id 컬럼을 외래키로 지정하면 기준 테이블에서
기본키로 지정된 컬럼과 연결할 수 있다.
➡️ 따라서 camp_area 테이블에서 camp 테이블의 id 컬럼을 외래키로 설정한다.
예약 테이블에서 예약 정보를 가져올 때 캠핑장 이름과 캠핑장 구역 이름이 필요하다. 이때 캠핑장 구역 id만 외래키로 설정하면
캠핑장 구역 테이블에서 외래키로 설정된 camp_id를 접근할 수 있으므로 캠핑장 구역 id만 외래키로 연결한다.
1.3 supabse에서 데이터 가져오기
각 테이블에 필요한 데이터 속성을 넣고 연관있는 데이터끼리
외래키로 연결을 했다면 이제 데이터를 가져와보자.
나는 예약 페이지 부분을 맡고 있어 예약 정보가 담긴 데이터를 사용자에게 보여줘야한다.
예약 정보에 보여줄 데이터는 캠핑장 이름, 객실 이름, 인원 수,
체크인/ 체크아웃 시간, 총 결제 금액이다.
supabse 또다른 장점은 API Docs를 통해 자신이 만든 테이블을
클릭하면 데이터 읽기/추가/수정/삭제 관련 코드를 바로 참고할 수 있다.
 |  |
|---|
👉 참조 테이블이 존재한다면 참조 테이블에 연결된 외래키를 통해
관련 참조 테이블 데이터도 같이 불러올 수 있다.
외래키를 통해 가져올 데이터는 캠핑 구역 이름과 캠프 이름이 필요하다. 예약 테이블에서 외래키로 설정된 컬럼이 camp_area_id 이므로 id 값은 넣어주고 필요한 캠프 구역 이름 컬럼도 추가한다.
또한 캠핑장 이름도 필요하기 때문에 캠핑장 구역 테이블에서 참조한
캠프 테이블의 이름을 접근해줘야 한다.
camp_area(id,name,campName:camp(name))
camp_area: 예약테이블에서 참조하는 테이블camp: 캠핑 구역 테이블에서 참조하는 테이블
💡캠프 이름은 캠핑 구역 테이블과 연결되어 있으므로 camp_area() 괄호 안에서 캠프 테이블을 참조해야한다!
예약 정보에 필요한 데이터 가져오는 코드
const { data, error } = await supabase
.from('reservation')
.select(`people,check_in_date,check_out_date,fee,camp_area(id,name,camp(name))`,
);
👉 캠핑장 구역 이름과 캠프 이름 모두 잘 가져오는 것을 확인할 수 있다.
