전체 글

수파베이스 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..

Sharp를 사용하지 않고 이미지를 10px로 리사이즈하고 Base64로 변환하는 작업을 클라이언트 측에서 수행하려면 HTML5 Canvas API를 사용할 수 있습니다. 이 방법은 이미지의 크기 조정을 수행하고 결과를 Base64로 인코딩하는 데 사용할 수 있습니다.다음은 클라이언트 측에서 이 작업을 수행하는 방법입니다:1. 이미지 로드 및 Canvas를 사용한 크기 조정 및 Base64 변환 함수const loadImage = (src: string): Promise => { return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = "anonymous"; // CORS가 필요한..

모든 옵션 사용시 검색 액션이 두 번 들어가는 구조입니다.옵션 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_t..

이미지를 10px 사이즈의 base64 문자열로 변환하는 함수를 작성하기 위해, 먼저 이미지를 불러와서 크기를 조정한 후 base64 형식으로 인코딩해야 합니다. 서버 사이드에서 이미지를 처리하기 위해 sharp 라이브러리를 사용할 수 있습니다. 이를 Next.js API 라우트를 통해 구현할 수 있습니다.다음은 이미지를 10px 사이즈로 변환하고 base64 문자열로 반환하는 API 라우트를 작성하는 방법입니다:1. sharp 라이브러리 설치먼저 sharp 라이브러리를 설치합니다.npm install sharp2. API 라우트 작성src/pages/api/getBase64.ts 파일을 생성하고 다음 코드를 추가합니다:import type { NextApiRequest, NextApiResponse }..

nextjs 14버전에서 pwa 를 셋업하는 방법에 대해 알아보았습니다.1. next-pwa 설치yarn add next-pwa yarn add -D webpack2. next.config.mjs 수정아래와 같이 수정합니다.import withPWAInit from "next-pwa";const withPWA = withPWAInit({ dest: "public",});/** @type {import('next').NextConfig} */const nextConfig = {};export default withPWA(nextConfig);3. 퍼블릭에 manifest.json/public 폴더에 아래와 같이 manifest.json 파일을 작성합니다.{ "name": "My Next.js P..

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..

1. 라이브러리 설치리액트 인터섹션 옵저버 설치npm install react-intersection-observer탠스택쿼리 설치npm install @tanstack/react-query @tanstack/react-query-devtools2. 탠스택쿼리 프로바이더 설정프로바이더 만들기"use client";import { isServer, QueryClient, QueryClientProvider } from "@tanstack/react-query";import { ReactQueryDevtools } from "@tanstack/react-query-devtools";function makeQueryClient() { return new QueryClient({ default..

기본 세팅가장 먼저 supabase 기본 auth 를 보강해줄 users public table 이 필요합니다.  컬럼명타입용도입력방법외래키iduuidauth 스키마 연결자동입력(유니크)Ocreated_attimestampz작성일자동입력Xemailvarchar회원식별회원가입 시 자동입력Xnicknametext회원식별회원가입 시 자동입력Xavatartext마이페이지 렌더링회원가입 시 자동입력Xintroductiontext마이페이지 렌더링마이페이지에서 입력X 위와 같이 테이블을 생성하고, 아래 sql 을 적용합니다.-- 새로운 트리거 함수 생성CREATE OR REPLACE FUNCTION public.handle_new_user_custom()RETURNS TRIGGER AS $$ BEGIN INSERTI..

수파베이스를 사용한 인증/인가를 구현하면서 애를 많이 먹었습니다.특히나 자료들이 대부분 조금 오래된 버전들이 많아서 더욱 힘들었습니다. 예를들어 나름 1년~6개월 전쯤에 작성된 자료임에도 Page 라우터를 사용하는 자료라거나,혹은 use client 를 사용해서 처리해야만 하는 클라이언트 사이드 로직을 알려주는 경우가 많았습니다. 하지만 공식홈페이지 자료에는 불친절하긴해도 어찌저찌 방법이 거의 다 나와있긴했고이를 참고하여 이메일 로그인, 비밀번호 찾기, 소셜로그인(깃헙, 구글, 카카오)을 구현하는데 성공했습니다. 과정을 복기하며 하나하나 메모해두려고 합니다.Step 1. Supabase clientNext.js 에서 Supabase 를 최적으로 사용하기 위해서는,이제Supabase Client 를 두 가..