블로그를 만들기 위해 supabase를 활용하기

1. supabase 프로젝트 만들기

기존에는 supabase 프로젝트를 단독으로 생성했지만. vercel에서 제공하는 기능을 통해 연동하면 더 편하기 때문에 vercel에서 supabase db생성 하기를 참고해서 다시 셋팅해주세요..ㅠ

Supabase Link

회원가입 하신 뒤 organization만드는것 부터 시작합니다.

1.1 supabase organization 만들기

1.2 project 만들기

완성 이렇게 보입니다.

위 카드를 클릭하고
좌측 메뉴 탭에서 Table Editor를 선택합니다.

화면 중앙에 Create a new table 버튼을 누르면 테이블을 만들 수 있습니다.

2. DB구조와 테이블 만들기

블로그의 기능은게시글(posts), 태그(tags), 조회수(view_counts)이다.

게시글은 생성일, 수정일, 제목, 본문(nullable), 썸네일(nullable), 부제목(목록에서 보이는 요약, nullable) 컬럼을 갖고

태그는 이름, 생성일 컬럼을 갖는다.

조회수는 게시글 id와 조회일시 컬럼을 갖는다. 조회수는 게시글과 n:1관계이므로 게시글 id를 게시글 테이블에서 외래키로 가져와준다.

게시글과 태그의 관계는 n:n(다대다) 관계이므로 둘 사이에 맵핑테이블 게시글_태그를 만들어주고 게시글 id와 태그 id를 외래키로 가져온다.

테이블 생성 순서는 게시글,태그,조회수,게시글 태그 맵핑테이블순서로 생성하면 된다.

supabase의 SQL Editor에 아래 쿼리를 입력하면 자동으로 생성된다!
(테이블을 생성 한 뒤 이곳를 눌러 이동한뒤 이어서 진행하면된다.)

CREATE TABLE posts (
    id bigint PRIMARY KEY,
    created_at timestamp with time zone DEFAULT now() NOT NULL,
    updated_at timestamp with time zone,
    title text DEFAULT '' NOT NULL,
    body text DEFAULT '' NOT NULL,
    subtitle text DEFAULT '',
    thumbnail text DEFAULT ''
);

CREATE TABLE tags (
    id bigint PRIMARY KEY,
    created_at timestamp with time zone DEFAULT now() NOT NULL,
    name text DEFAULT '' NOT NULL
);

CREATE TABLE posts_tags (
    id bigint PRIMARY KEY,
    post_id bigint NOT NULL,
    tag_id bigint NOT NULL,
    FOREIGN KEY (post_id) REFERENCES posts (id) ON DELETE CASCADE ON UPDATE NO ACTION,
    FOREIGN KEY (tag_id) REFERENCES tags (id) ON DELETE RESTRICT ON UPDATE NO ACTION
);

CREATE TABLE view_counts (
    id bigint PRIMARY KEY,
    viewed_at timestamp with time zone DEFAULT now() NOT NULL,
    post_id bigint,
    FOREIGN KEY (post_id) REFERENCES posts (id) ON DELETE SET NULL ON UPDATE NO ACTION
);

2.1 테이블 생성

테이블을 만드는 화면은 아래와 같다.

Name은 컬럼의 이름(영어로 작성) Description은 테이블에 대한 설명으로 선택 사항이다.
Columns에서 컬럼을 추가하고 삭제 할 수 있다.
컬럼 항목 오른쪽의 기어 아이콘을 클리하면 추가 옵션을 선택할 수 있는데 nullable, unique, Define as Array이다.
또한 기본값 입력창의 오른쪽 버튼을 눌러보면 기본값을 NULL이나 empty string으로 설정할 수 있다. text인경우 empty string인 것이 나중에 프론트에서 처리하기 좋지 않을까 해서 empty string으로 설정해놓았다.

2.2 외래키 설정

아래 foreign keys에서는 외래키 설정을 할 수 있다.

외래키를 만드는 방법은 외래키와 연결할 컬럼을 먼저 만든뒤 Add foreign key relation으로 관계를 맺어준다.
위 사진은 view_counts 테이블의 post_id 컬럼을 posts테이블의 id와 연결해주는 예시이다. Scheme는 public 스키마, reference 할 테이블은 posts입니다.

2.2.1 참고하고 있는 키 변경시 동작 설정

외래키가 업데이트 되면 선택 할 수 있는 옵션은 아래와 같다.
No action: 참조된 값이 변경되면 외래 키가 존재하는 상태에서는 변경을 허용하지 않습니다.
Cascade: 참고하고 있는 키가 삭제되면 외래키도 변경한다.
Restrict: 참고하고 있는 키를 변경 할 수 없도록 강제한다.

2.2.2 참고하고 있는 키 삭제시 동작 설정

외래키가 삭제 되면 선택 할 수 있는 옵션은 아래와 같다.
No action: 참조된 값이 삭제되려 하면 삭제를 허용하지 않습니다.
Cascade: 참조된 값이 삭제되면 외래키도 삭제한다.
Restrict: 참조된 값이 삭제 할 수 없도록 강제한다.
Set default: 참조된 키가 삭제되면 기본값으로 변경한다.
Set NULL: 참조된 키가 삭제되면 NULL로 변경한다.

참고
view_counts테이블의 post_id컬럼은 참고하고 있는 키의 삭제시 Set Null을 설정했다.
이유는 view_counts의 합으로 블로그 전체 조회수를 참고하거나 히스토리를 확인 할 수 있을텐데 글이 삭제 됐더라도 view_counts의 데이터는 의미가 있기 때문에 삭제하지 않고 NULL로 변경했다.

참고
posts_tags테이블의 post_id는 참고하고 있는 키의 삭제시 Cascade로 설정했고 post가 삭제되면 맵핑테이블의 데이터도 사라지는것이 맞다고 생각했습니다.
tag_id는 district로 설정하여 tag가 먼저 삭제되는 일은 없습니다. 맵핑테이블에 데이터가 모두 사라져야 tag가 삭제될 수 있습니다.

그럼 아래와같은 스키마를 확인할 수 있다. (좌측 메뉴탭 > database > Schema Visualizer)