Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 타입스크립트
- react router dom
- JavaScript
- revalidatepath
- tailwind
- 리액트
- 프론트엔드
- reduxtoolkit
- 토이 프로젝트
- 토이프로젝트
- TypeScript
- 그리디
- react pattern
- 프로그래머스
- 스택
- 코테
- Supabase
- 리액트 라우터 돔
- 리액트 패턴
- React Query
- tanstack query
- 리덕스
- 자바스크립트
- Form
- React
- 코딩테스트
- styled component
- 코어자바스크립트
- Next.js
- 동적계획법
Archives
- Today
- Total
느려도 한걸음씩
Supabase - (3) 테이블간 관계 설정(foreign key) 본문
저번 포스트에서는 cabins, guests 테이블을 생성했다. 이번 포스트에서는 사용자가 숙박을 예약할 때 필요한 bookings 테이블을 만들고, 이 테이블에서 Foreign Key(외래 키)를 이용해 다른 테이블과 데이터를 연결하는 방법을 알아보자.
아래는 bookings 테이블의 설정 화면이다. 사용자가 예약한 객실과 그에 대한 부가 정보가 저장되는 테이블이며, 맨 아래에 있는 두 개의 필드(cabinId, guestId)를 이미 존재하는 테이블의 데이터와 연결해볼 것이다.
테이블 이름 옆의 아이콘을 클릭하면 외래 키를 설정할 수 있는 창이 나타난다.
테이블 이름 옆에 아이콘을 클릭하면 외래키를 설정하는 창이 나온다
먼저 cabins 테이블을 선택하고, 그 테이블의 어떤 필드를 외래 키로 사용할지 선택한다. bookings 테이블에서는 숙소 ID가 필요하므로 cabinId를 외래 키로 설정했다.
같은 방식으로 guestId도 설정한다. guests 테이블을 선택한 후, 외래 키로 사용할 필드로 guestId를 지정해주면 된다.
외래 키 설정이 완료된 후, 실제 데이터를 삽입해 bookings 테이블에 새로운 행(row)을 추가해보았다. 원하는 guestId와 cabinId를 입력하니, bookings 테이블 안에 guests 테이블의 데이터가 잘 연결된 것을 확인할 수 있다.
이처럼 외래 키를 사용하면 하나의 테이블에서 다른 테이블과 관계를 설정하여, 보다 구조화된 데이터베이스를 만들 수 있다.
'FE develop > Supabase' 카테고리의 다른 글
Supabase - (6) Storage bucket 만들기 (0) | 2025.04.10 |
---|---|
Supabase - (5) React 프로젝트에 Supabase 연결하기 (0) | 2025.04.10 |
Supabase - (4) 데이터 접근 권한 설정하기(RLS) (0) | 2025.04.10 |
Supabase - (2) Table 만들기 (0) | 2025.04.08 |
Supabase - (1) Supabase란? (0) | 2025.04.08 |