전체 글

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

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