![]()
내배캠 수료짧다면 짧고 길다면 긴 부트캠프가 내일이면 끝납니다.til 은 계속 해서 작성할 예정이고기존에 작성했던 것들은 분류작업을 해보려고 합니다.시원섭섭합니다.supabase.rpc내배캠 막바지에 supabase.rpc 라는 메서드를 사용할 일이 있었습니다.sql 을 몰라서 생소한 기능이었는데 gpt 쌤에게 물어본 내용을 정리합니다. Supabase에서 supabase.rpc 메서드는 PostgreSQL의 저장 프로시저(Stored Procedure) 또는 사용자 정의 함수(User-defined Function)를 호출하는 데 사용됩니다. 이를 통해 복잡한 로직을 데이터베이스 내에서 실행하고, 결과를 가져올 수 있습니다.1. 함수 생성먼저 PostgreSQL에서 함수를 생성해야 합니다. 예를 들어,..
![]()
openai api 로 이미지 생성 후 supabase 에 쓰기(route handler)대략 아래와 같이 하면 됩니다.근데 한번 생성할 때 마다 돈나가고 10달러 충천해놔야 합니다.if (!tripImageFile && mode === 'new' && tripData) { const openai = new OpenAI({ apiKey: OPEN_AI_SECRET_KEY, }); // [서울/경기, 서울시] 이런 값입니다 대충 const [continent, country] = tripData.trip_final_destination?.split(' ') || []; // OpenAI를 사용하여 이미지를 생성 const imageGeneration = a..
![]()
supabase 를 사용하다 보니 데이터를 join 해서 가져오면 매우 편리한 경우가 많았습니다.그런데 방법의 의미를 정확하게 몰라서 gpt 쌤한테 하나하나 물어봤습니다.첫번째 질문supabase 에서 데이터를 join 해서 가져오는 방법에 관해 질문이 있어요. 첫번째 사례는 다음과 같고요.await supabase .from('stories') .select('*, buddies:story_created_by (*)') .order('story_created_at', { ascending: false });두번째는 다음과 같아요.await supabase .from('trips') .select('*, contract:contract!contract_contract_trip_..
![]()
실시간 채팅 메시지를 로컬 상태가 아닌 Supabase 테이블에 저장하기 위해서는 메시지를 전송할 때마다 Supabase 데이터베이스에 삽입(insert) 작업을 수행하고, 채팅 페이지가 로드될 때 메시지를 불러와야 합니다. 이를 위해 다음과 같은 작업을 수행할 수 있습니다:메시지 전송 시 Supabase 테이블에 저장: 사용자가 메시지를 전송할 때, Supabase 테이블에 메시지를 저장합니다.메시지 불러오기: 채팅 컴포넌트가 마운트될 때 Supabase 테이블에서 메시지를 불러옵니다.먼저, Supabase 클라이언트 설정을 하고 메시지를 저장하고 불러오는 기능을 추가합니다."use client";import supabaseClient from "@/supabase/supabaseClient";impo..
![]()
5. useMutation 을 위한 세팅route handler 를 향해 fetch 를 날릴건데,이것을 useMutation 으로 처리하고자합니다.먼저 mutationFn 에 들어갈 함수를 만듭니다.export async function postNaverLogIn(): Promise { if (!window.location.hash) return null; const hash = window.location.hash.substring(1); const params = new URLSearchParams(hash); const accessToken = params.get('access_token'); const url = '/api/auth/callback/naver'; t..
![]()
supabase OAuth 는 naver provider 미지원!! 상황은 이러합니다.supabase auth 를 쓰고 있다.그런데 supabase auth 는 naver Provider 를 지원하지 않는다...하지만 naver login 구현도 하고 싶다!여기에 더해 우리는 기본 auth 스키마만 쓰는 것이 아니라유저를 커스텀하기 위한 buddies 테이블도 public 에 두고 있습니다.따라서 아래와 같이 되는 것이 가장 좋겠죠네이버 로그인시 auth 스키마에 insert 될 수 있다면sql trigger 에 따라 자동으로 buddies 테이블에는 insert된다.하지만 역시 쉽지않습니다. auth 스키마에 직접 insert 하는 방법은supabase 문서 어디에도 없습니다. 공식적으로 없는 것 같습..
![]()
팔로잉을 측정하는 방법을 추가하기 위해 buddy_following_counts와 buddy_follower_counts 두 컬럼을 각각 업데이트하는 로직을 작성해야 합니다. 여기서는 buddy_following_counts는 사용자가 팔로우하는 사람의 수, buddy_follower_counts는 사용자를 팔로우하는 사람의 수를 의미합니다.트리거 함수에서 팔로우 및 팔로잉 수를 모두 업데이트하도록 코드를 수정하겠습니다.테이블 및 트리거 설정먼저 buddies 테이블에 buddy_following_counts와 buddy_follower_counts 컬럼을 추가합니다.ALTER TABLE buddiesADD COLUMN buddy_following_counts INT DEFAULT 0,ADD COLUMN..
![]()
auth.users 를 보강하기위해 public.users 생성supabase auth 를 사용할 경우, auth.users 스키마만으로는프로젝트 필요한 정보들을 모두 컨트롤 할 수 없습니다. 그래서 보통 users 같은 테이블을 하나 만들어서 쓰는 것이 보통이라고 합니다.그래서 저희도 이에 해당하는 buddies 테이블을 만들었습니다. 하지만 문제는 유저가 회원가입 혹은 소셜로그인을 하여auth.users 에 로우가 추가되어도, 직접 만든 buddies 테이블(public.buddies) 에는로우가 자동으로 추가되지 않는다는 점입니다. 그래서 이를 해결하기 위해 간단한 SQL 사용해보기로 했습니다.auth.users 변경시 자동으로 users 테이블에 로우를 추가처음에는 아래 정도의 로직을 생각했습니다..
![]()
SQL로 테이블 만들기최종프로젝트는 여지껏 진행해본 프로젝트에 비해 규모가 큽니다..당연히 테이블 수도 많고 서로 연결된 테이블도 많습니다. 우리는 4일동안 기획회의를 진행하면서 DB 테이블 구조에 대한 고민을 정말 많이 했습니다.백엔드 전문에게는 이정도 규모는 정말 작은 규모에 속하겠지만,프론트엔드인 우리에게는 새로운 도전에 가까웠습니다. 그리하여, 노션에 표로 정리함과 동시에 drawsql 이라는SQL schema 작성을 도와주는 사이트를 같이 이용했습니다. 이 사이트의 장점은, 시각적으로 보면서 작성한 SQL 을 SQL파일로 export 해준다는 것입니다. 대략 이런 식의 구조를 만들고 SQL 로 export 한 뒤 좀 더 다듬었습니다.(두개의 테이블이 더 있지만, 해당 테이블은 팀원분께서 직접 ..
![]()
수파베이스 auth 를 사용할 때, auth.users 스키마에 row 추가시(즉 회원가입시)자동으로 custom users(프로젝트별로 이름은 다를것) 테이블에 auth.users 스키마에 추가되는 데이터를 가져오는 방법을 연구했습니다.SQLCREATE OR REPLACE FUNCTION public.handle_new_user_custom()RETURNS TRIGGER AS $$BEGIN-- 아래 buddy 어쩌구는 프로젝트에 맞게 수정하면 됩니다.INSERT INTO public.buddies (buddy_id, buddy_email, buddy_nickname, buddy_profile_pic)VALUES ( NEW.id, NEW.email, NEW.raw_user_meta_dat..
![]()
모든 옵션 사용시 검색 액션이 두 번 들어가는 구조입니다.옵션 1 따로 가고요.(옵션1 고성능 검색이 가능할 경우 시도 - 자동완성, 등등)옵션 1 - 키워드 옵션 2~9 따로 갑니다.(아래는 완전일치)옵션 2 - 지역? - trip_destination옵션 3 - 일시? - trip_start_date / trip_end_date옵션 4 - 선호성별? - trip_wanted_sex 옵션 5 - 경비? - trip_cost 옵션 6 - 인원수? - trip_max_buddies_counts 옵션 7 - 만남장소? - trip_meet_location (만약에 속도느리면 인덱싱 걸고...)(아래2개는 세개 중 한개라도 일치하는것 다 가져온다음에, 가능하면 우선순위로 필터링)옵션 8 - 테마? - trip..
![]()
Step 7. 프로바이더 로그인 버튼 예시"use client";import useAuth from "@/hooks/useAuth";import { showAlert } from "@/lib/openCustomAlert";import { usePathname } from "next/navigation";import { FcGoogle } from "react-icons/fc";function GoogleLogInButton() { const { loginWithProvider } = useAuth(); const pathname = usePathname(); const handleClickGoogle = async () => { if (pathname === "/recove..
![]()
여기에서 이어집니다.Step 4. signup & login & logout 라우트 핸들러 작성이메일회원가입 / 로그인 / 로그아웃 용 라우트 핸들러를 작성합니다.회원가입 / 로그인 로그아웃시에는 여기로 요청날리면 됩니다.(3편 콘텍스트api 활용 에서 자세히 설명)// api/auth/signup/route.tsimport { createClient } from "@/supabase/server";import { NextRequest, NextResponse } from "next/server";export async function POST(request: NextRequest) { const data = await request.json(); const name = data.name a..
![]()
리액트에서 Context API를 사용하지 않고 Tanstack Query를 사용하여 Supabase의 인증 상태를 관리하고 확인하는 방법은 다음과 같습니다.1. Tanstack Query 설정import { QueryClient, QueryClientProvider, useQuery } from 'react-query';import { supabase } from './supabaseClient';const queryClient = new QueryClient();function App() { return ( );}2. 인증 상태 확인const fetchSession = async () => { const { data: { session }, error } = await ..
![]()
좋은말할 때 Tanstack Query 쓰자험난했던 팀플 주간이 끝이 났습니다.리덕스 createAsyncThunk 와 extraReducer 연습은 아주 제대로 했지만그냥 웬만하면 tanstack query 를 쓰자는 교훈? 을 얻었습니다.기억하기 위해 supabase의 table, auth 관련 메소드를 정리하면서 한 주를 마치려 합니다.Supabase 메서드 정리table 메서드Supabase는 Postgres 데이터베이스를 기반으로 하며, 다양한 테이블 관련 메서드를 제공합니다.다음은 Supabase의 테이블 관련 주요 메서드들에 대한 설명입니다:1. 데이터 삽입 (Insert)const { data, error } = await supabase .from('table_name') .inser..
