전체 글

Auth session missing!수파베이스 auth 사용중에자꾸만 마주치는 auth session missing!이것을 해결하기 위해 별 방법을 다 써보고 했지만레딧이나 깃헙이슈에도 같은 문제를 겪는 사람들이 많은 걸 보니뭔가 수파베이스에 문제가 있는 것 같기도 합니다. 아무튼 서버측에서 날리는 fetch 의 결과가tanstack query 의 prefetch query 와 함께 쓸 때 미들웨어서는 getUser 가 잡히지만prefetch query에서는 안 잡힌다거나혹은 자꾸 있었다 없었다 하는 문제를 해결해보고자(십중팔구 auth session missing...)안되면 fetch를 할 때 쿠키를 직접 같이 배달해보자라고 생각했습니다.그래서 fetch 함수를 다음과 같이 작성했습니다.fetche..

얼러트 모달이 여기저기 필요해서서버, 클라이언트 관계없이 아무데서나 호출해서 쓸 수 있도록아래처럼 사용하고 있었습니다. 그런데 이 방법에 문제가 조금 있었습니다.그냥 써도 무방한 정도였지만 해결해보기로 하였습니다. 문제는 번들 사이즈가 너무 크다는 점 이었습니다.여기저기서 호출 하는 함수인데 무거우면 안될 것이라 판단했습니다.원래 버전원일을 찾아보니 createRoot 를 하기 위해 가져온ReactDom 이 번들사이즈가 132kb 정도로 무거웠습니다.그래서 이것을 제거하고 다른 방법을 사용하기로 했습니다.하지만 그러면 컴포넌트를 사용해서 아무데서나 body에얼러트 모달을 부착할 수가 없었습니다.import CustomAlert from '@/components/organisms/common/CustomA..

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 설정 추가확인해보니 위 방법은 동적 라우팅..