[React] Day_76 최종 프로젝트 관련 내용정리

이 어마무시한 기록(?)을 보아라!

 

기능 구현 우당탕탕 만들고 있는 림졍...

우선 작성 페이지보다.. 채팅이 우선순위라 채팅친구를 손보고 있는디

채팅 관련 트리거 사용 및 스키마 설정으로 오전에 우다다다 회의하고

새로운 방법(?)에 관해 하루쥉일 Supabase랑 동거동락했다 ^-^)7

그래도 오늘 팀원들 덕에 빡집중해서 구현 다 했다... (와! SQL 지옥 탈출!)

내가 과연 건드리는게 맞긴 하지만..

여튼 시작합니다 정리. 레츠고

 

 

Supabase - Scheduling 기능, Next.js에서 활용 가능 여부 테스트 일지 - (1)

내가 살다살다 SQL에 손을 대다니... 🤦🏻‍♂️

 

아 암튼 그렇다고 ㅋㅋ

 

Intro

해당 일지를 작성한 이유에 대해 간단하게 적어보자면...

채팅(일명 훈수방) 관련 기획이 나왔을 때, 구현하려는 기능 중에

인기 채팅방 (우리는 피버타임이라고 부른다.)라는 기능이 있는데..

해당 조건에 대한 세세한 기준을 정하지 못한 상태라

오늘 튜터님과의 회의를 통해 어떻게 만들 것인지 결정하기로 한다.

 

밑에 더 있긴 한데 ... 그만 알아보기로 하자.

 

그렇게 튜터님이 주신 내용을 간단하게 정리하자면..

분당 채팅 수를 체킹하는건 좋지만, 트리거를 활용해서 적용을 시킨다..?

과다한 API 요청이 필요해지는 상황이기에.. 실시간 대신에

특정 시간에 체크할 수 있는 스케쥴링이라는 기능을 사용해보기로 한다.

(그렇게 림졍에게 주어진 공식문서.)

 

이제 그럼.. 자, 작업을 진행해보자. (부제: 내가 웃는게 웃는게 아니여....)

 

테스트 과정

1. 프로젝트 생성하기

 

우선 새롭게 터미널에서.. next.js를 파주고..

우리 프로젝트랑 동일한 구조랑 동일한 스키마를 짜서

해당 기능을 구현해보기로 했다.

그렇게 시작된 대대적인 공SA.

 

뚱땅뚱땅 스키마 완!

 

- 스키마 제작 SQL

-- users 테이블
CREATE TABLE users (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    nickname TEXT NOT NULL,
    email TEXT UNIQUE NOT NULL,
    profile_image TEXT
);

-- chatrooms 테이블
CREATE TABLE chatrooms (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    title TEXT NOT NULL,
    leader_id UUID NOT NULL,
    image_url TEXT NULL,
    created_at TIMESTAMPTZ DEFAULT NOW(),
    CONSTRAINT fk_leader FOREIGN KEY (leader_id) REFERENCES users(id) ON DELETE CASCADE
);

-- participants 테이블
CREATE TABLE participants (
    room_id UUID NOT NULL,
    user_id UUID NOT NULL,
    PRIMARY KEY (room_id, user_id),
    CONSTRAINT fk_participant_room FOREIGN KEY (room_id) REFERENCES chatrooms(id) ON DELETE CASCADE,
    CONSTRAINT fk_participant_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
);

-- messages 테이블
CREATE TABLE messages (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    created_at TIMESTAMPTZ DEFAULT NOW(),
    content TEXT,
    user_id UUID NOT NULL,
    room_id UUID NOT NULL,
    chat_img_url TEXT,
    CONSTRAINT fk_message_user FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
    CONSTRAINT fk_message_room FOREIGN KEY (room_id) REFERENCES chatrooms(id) ON DELETE CASCADE
);

-- auth.users.id 매핑 (Supabase 인증 사용자와 연동)
ALTER TABLE users
ADD CONSTRAINT fk_auth_users FOREIGN KEY (id) REFERENCES auth.users(id) ON DELETE CASCADE;

 

(추가) 채팅에서 이미지가 업로드가 가능하게끔 제작되게끔 만들기 위해...

img_url이라는 칼럼을 별도로 추가해줬다. (이걸 까먹고 말 안할 뻔했다;;;;)

Ye가 준.. 테이블 예시를 토대로 만들었다..(1)

 

 

2. Fever-time 관련 테이블 스키마 작성

 

튜터님이 주신 테이블 예시를 바탕으로 아래와 같은 스키마를 구현해보고자 했다.

• room_id는 chatrooms의 id와 연동될 것
• room_id 바로 옆 칼럼의 경우, 시간 당 채팅의 개수로 작성될 것
• 생성은 타임스탬프 쓰기!

Ye가 준.. 테이블 예시를 토대로 만들었다..(2)

 

그래서 생성된 테이블 생성 SQL은 다음과 같다.

-- fever_time_rooms 테이블 생성
CREATE TABLE fever_time_rooms (
    id SERIAL PRIMARY KEY,                     -- 고유 식별자
    room_id UUID NOT NULL,                     -- 참조할 room_id
    chat_per_hour TEXT,                        -- 시간당 채팅 개수 (텍스트로 수정)
    created_at TIMESTAMPTZ DEFAULT now(),      -- 생성 시간 (기본값: 현재 시간)
    
    -- 외래 키 설정: room_id는 chatrooms 테이블의 id를 참조
    CONSTRAINT fk_room
    FOREIGN KEY (room_id)
    REFERENCES chatrooms (id)
    ON DELETE CASCADE                          -- chatroom 삭제 시 함께 삭제
);

 

완성된 테스트..용 DB 스키마! (와아아)

 

추가) 잊지말자. 스키마 변경되면 type도 다시 갱신해줘야 한다는거.

 

왜 계속 오류가 나지? 으잉??? 하면서 봤더니

알고보니.. 스키마의 이름이 변경되어서.. 기존 코드에 맞지 않아가지고 오류를 발생하지 않나..

(기존 내용과 스키마의 형태가 달라진 것을 체킹하지 못했음.)

갑자기 업로드 시간은 다르게 나오질 않나.. (그래서 created_at은 timestamptz로 변경해줬다.) 

여튼 그래서 결론은 스키마 변경할 때 type도 계속 눌러줘야 한다는거..

 

Supabase 패키지가 있다고 가정 하고 type을 자동으로 생성하는 방법을 아래에 간단하게 정리하도록 하겠다.

 

 

Project Type 자동 생성 방법!

 

1. Supabase Login

npx supabase login

 

해당 명령어를 입력하게 되면, 아래의 창이 뜨게 되는데

 

Enter를 누르면 Supabse 사이트에 접속되며 토큰이 발급된다.

이 토큰을 Vs Code에 넣어서 다시 Enter를 누르면 로그인은 끝!

성공적으로 로긘이 된 모습!

 

2. Supabase 파일 생성

npx supabase init

 

Supabase Client가 존재하더라도 다시 초기화를 시켜 타입 안정성 및 데이터 동기화를 보장하기 위해

init 명령어 작업을 통해 새롭게 파일을 생성한다.

 

이게 보인다면 성공한겁니다 ^-^)b

 

 

3. types 폴더에 supabase.ts 파일 생성 (타입 자동 생성)

 

해당 명령어의 경우, src 내부에 types라는 폴더 생성해야 작동되는 명령어이니 참고하자.

(src 밖의 최상단 경로다? 그럼 앞에 있는 src만 빼주면 됨 ㅇㅇ!)

npx supabase gen types typescript --project-id <프로젝트 고유 ID> --schema public > src/types/supabase.ts

 

프로젝트 고유 ID는 Supabase - Project Settings - API 에 들어갔을 때 보이는 Project URL의 가려진 부분이니 참고하자.

(알기 쉽게 이미지도 첨부하도록 하겠다.)

 

저어기 (가려진) 녹색 부분을 넣어주면 된다!

 

명령어가 제대로 입력되었다면, 아래와 같이 나올 것이다.

 

바로 이렇게 말이다.

 

 

마무리 -  나머진 내일 적을게요.

 

히히 신...난..다

 

생각보다 스키마 관련해서 적을게 많아지다보니..

스케쥴링 관련 이야기는 내일... 적어보는거로 ~.~...

오늘은 이쯤에서 마무리지어야겠다! 꾿!

 

 

오늘의 KPT 회고

 

Keep: 끝까지 킵고잉하는 림졍 칭차내!

Problem: TIL 정리.. 밀린거 해야겠지?

Try: TIL 정리.. 내일부터 시작한다.