전체 글

webp 로 변환이 필요해사용자가 만약 몇십메가짜리 이미지를 넣으면 어떡할 것인가?라는 문제에서 이미지를 webp로 변환하는 로직을 작성해보았습니다. 서버로 파일을 보내면 라우트핸들러에서webp로 변환하고 수파베이스에 저장하는 단순한 방법입니다.클라이언트 에서일단 useState 든 뭐든 File 이 변수에 저장되어 있어야 합니다.const formData = new FormData();formData.append('imageFile', imageFile);const payload: StoryData = formData;mutate(payload); 클라이언트에서는 위처럼 처리합니다.애초에 form 태그를 쓰고 있다면 new FormData(여기에 e.target 넣을것) 요렇게 하면 될 것 같고아니라면..

Lazy LoadingLazy loading은 Next.js에서 애플리케이션의 초기 로딩 성능을 개선하는 데 도움을 주며, 경로를 렌더링하는 데 필요한 JavaScript의 양을 줄여줍니다. 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시킬 수 있으며, 필요할 때만 클라이언트 번들에 포함되도록 합니다. 예를 들어, 사용자가 모달을 열려고 클릭할 때까지 모달의 로딩을 지연시킬 수 있습니다. Next.js에서 lazy loading을 구현하는 두 가지 방법이 있습니다:next/dynamic을 사용한 동적 가져오기React.lazy()와 Suspense를 사용기본적으로 서버 컴포넌트는 자동으로 코드 분할이 되며, 스트리밍을 사용하여 서버에서 클라이언트로 UI 조각을 점진적으로 전송할 수 있습니다. La..

Supabase를 사용하여 데이터를 가져온 후, 변경된 값을 업데이트할 수 있습니다. 그러나 데이터 객체를 직접 수정하기보다는 새로운 객체를 만들어서 업데이트하는 것이 더 안전합니다. 다음은 그 예제입니다:데이터를 가져와 필요한 필드를 업데이트합니다.업데이트된 데이터를 Supabase를 통해 upsert로 저장합니다.아래는 코드 예제입니다:import { useState, useEffect } from 'react';import { createClient } from '@supabase/supabase-js';import { Tables } from '@/types/supabase.ts'import useAuth from "@/context/auth.context.ts"const supabase = cr..

실시간 채팅 메시지를 로컬 상태가 아닌 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 문서 어디에도 없습니다. 공식적으로 없는 것 같습..

state와 UI를 리턴하는 커스텀 훅이 필요해우리에겐 state와 UI(컴포넌트)를 리턴하는 커스텀 훅이 필요합니다. 여기서 state는 전역상태로 관리되면 안되는 상황이므로커스텀 훅에서 리턴하는 state 는 독립적이어야 합니다. 또한 비슷한 UI를 반복적으로 사용해야 하는데 렌더링해야하는데이터종류는 2가지(여정테마/버디즈성향)인 상황입니다. 따라서 커스텀 훅의 리턴은 named export가 될 수 없으므로 객체가 아닌 배열어야 합니다.그렇다면 [컴포넌트, 스테이트] 이렇게 반환하기만 하면 될 것 같습니다.리턴할 컴포넌트먼저 리턴할 컴포넌트를 atoms 레벨에 만들었습니다.type PreferThemeProps = { selectedTheme: string[]; handleThemeCha..

처음 생각한 다이나믹 헤더 의사 코드export default function Page({ params, searchParams,}: { params: { slug: string } searchParams: { [key: string]: string | string[] | undefined }}) { return My Page}Next.js 에서 slug 와 query string 을 가져올 수 있는 위 코드를 사용해서layout.tsx 혹은 page.tsx : (서버컴포넌트 겠죠..? 아마) 에서동적으로 주소에따라 MobileHeader.tsx 컴포넌트로 넘겨주는 props 를 다르게 한다!위 방법은 동적 라우팅에서만 사용가능! 따라서 middleware 설정 추가확인해보니 위 방법은 동적 라우팅..

팔로잉을 측정하는 방법을 추가하기 위해 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..

Enum?다음과 같은 배열이 있을때, 이것을 Enum 으로 처리할지 그냥 Union type 으로 할지 의사결정이 필요했습니다.export const buddyThemes = [ '계획', '즉흥', '빨리빨리', '느긋느긋', '촬영', '감상', '깔끔쟁이', '자연인', '가성비', '가심비',];export const tripThemes = [ '도시', '자연', '유명맛집', '로컬맛집', '힐링', '액티비티', '쇼핑', '관광',];TypeScript에서는 enum을 사용하여 이러한 배열을 기반으로 enum 타입을 만들 수 있다고 합니다.다음은 두 배열을 기반으로 만든 enum 타입의 예시입니..