isLoading 값이 바뀌는 시점(동작 순서)이 궁금합니다.

isLoading이 useState로 선언한 변수가 아닌데도 로딩 컴포넌트에서 버튼으로 다시 그려주나요?https://github.com/dodokyo/yt-music-clone/blob/main/app/playlist/page.tsx로딩 변수가 아닌데 로딩 컴포넌트가 그려지는 경우는 위 page.tsx가 로딩 되는 동안 loading.tsx가 렌더링 되는 경우 입니다.page.tsx 는 await로 중간에 비동기로 처리 되는 부분이 있습니다. " const playlist = await getPlaylistById(Number(props.searchParams.list));" 이 부분이죠.위 비동기 처리가 빠르게 처리되긴 하지만, 그 동안 페이지가 보여주어야 하는 컴포넌트는 loading.tsx라고 약속한것이 next.js 입니다. 내부적인 동작원리는 React suspense 라고 강의에서 전달드린바 있습니다. ~ 답변 드리고 나니 질문의 정확한 의도를 잘 모르겠어서 다시 남겨주시면 더 정확한 답변 가능합니다.

4.6강 초기 로딩 속도 케이스 비교

강의 오류 부분 죄송합니다. 결론적으로 아래 케이스 1,2,3 으로 봐주시면 됩니다. 사용자의 입장에서 첫 페이지를 보는데 과연 얼마나 시간이 걸리는지 테스트 해보는 상황입니다.해당 케이스를 나누는데 Root Layout 과 그 외 Page Layout의 로딩 타임을 구분해서 생각 후 첫 페이지가 얼마 후 보여지는지 생각하면 됩니다. Case1 - Root Page Loading 4s + Home Page Loading 2s=> 첫 페이지를 보는데 4초가 걸립니다.Case2 - Root Page Loading 2s + Home Page Loading 4s=> 첫 페이지를 보는데 2초가 걸립니다. 그러나 Home Page는 여전히 로딩 중 입니다. Case3 - Root Page Loading 2s + Home Page Loading 2s=> 첫 페이지를 보는데 2초가 걸립니다. 그 즉시 Home Page 도 바로 보입니다.

Sidebar & Header 컴포넌트 등 레이아웃 설정 방식

시멘틱 태그를 적용시키면 아래처럼 작성해도 좋습니다. {children}

Sidebar & Header 컴포넌트 등 레이아웃 설정 방식

안녕하세요. ~ 나중에 RootLayout에 Player가 하나 추가 됩니다. {children} 나중에 (Site) 루트 페이지는 다음 모습이구요. import React from "react"; import Category from "./components/Category"; import PagePadding from "@/components/PagePadding"; import PlayListCarousel from "@/components/PlayListCarousel"; import { dummyPlaylistArray, getPlaylistById } from "@/lib/dummyData"; import UserIcon from "@/components/UserIcon"; const page = async () => { const dummyPlaylistArray1 = [...dummyPlaylistArray]; const dummyPlaylistArray2 = [await getPlaylistById(1)]; const dummyPlaylistArray3 = [await getPlaylistById(2)]; const dummyPlaylistArray4 = [await getPlaylistById(3)]; return ( } title="다시 듣기" subTitle="도도" /> ); }; export default page; RootLayout에 아래처럼 해주셔도 상관없습니다.단, 모든 Layout에서 사용하는 Root Layout 이므로 데이터 패칭을 최소화 하여 빠른 로딩을 하도록, 최대한 간결하게 작성하는게 좋습니다. ~ {children}

useCallback의 디펜던시 배열에 supabase 넣는 이유?

질문의 의도는 아래처럼 함수 인자로 userId를 전달하는 경우 인가요? 가능 합니다만 supabase auth를 이용하지는 못합니다.const getUserInfo = useCallback(async (userId) => { const result = await supabase.(profile db 등).getUserById(userId); if (result?.data?.user) setUser(result?.data?.user); }, [supabase]);const getUserInfo = useCallback(async () => { const result = await supabase.auth.getUser(); if (result?.data?.user) setUser(result?.data?.user); }, [supabase, userId]);위 처럼 userId가 의존성 배열에 들어가도 의미는 없습니다.질문의 의도를 잘 모르겠네요. ㅠㅠ 의존성 배열은 특정 변수가 바뀌는것을 캐치 하느냐 안하느냐 판단하면 됩니다. 특정 변수가 바뀌는데 이를 캐치했다라면 변경된 최신의 변수와 함께 useCallback, useMemo등이 갱신됩니다. 그렇지 않다라면 예전의 낡은 변수, 인스턴스를 보고 있겠죠?

getUser 에 갑자기 serverComponent가 추가된 이유?

사용처가 분명한 함수라면 가능합니다.! 개인적으로는 서버액션은 serverComponent 및 클라이언트 컴포넌트 2곳에 모두 사용가능하도록 만드는게 좋아서 이에 대한 분기 처리 인자를 남겨두었죠. 엄밀히 말하면 SSR 과정에서 해당 함수 호출은 일반 함수 호출 입니다. -> 쿠키 조작 불가능. CSR 과정에서 해당 함수 호출은 서버액션 호출 입니다. -> 쿠키 조작 가능.

getUser 에 갑자기 serverComponent가 추가된 이유?

사용처가 분명한 함수라면 가능합니다.! 개인적으로는 서버액션은 serverComponent 및 클라이언트 컴포넌트 2곳에 모두 사용가능하도록 만드는게 좋아서 이에 대한 분기 처리 인자를 남겨두었죠. 엄밀히 말하면 SSR 과정에서 해당 함수 호출은 일반 함수 호출 입니다. -> 쿠키 조작 불가능. CSR 과정에서 해당 함수 호출은 서버액션 호출 입니다. -> 쿠키 조작 가능.

serverComponent=false일 때 쿠키 세팅을 하는 이유?

안녕하세요.!next.js에서 serverComponent는 서버에서 동작하나 쿠키를 조작은 불가능합니다. 그래서 방어책으로 해당 로직이 들어간거죠.현재 프로젝트에서는 createServerSideClientRSC, createServerSideMiddleware 사용하지 않더라도 나중에 헷갈릴 수 있는 부분이여서 미리 정의를 했습니다.서버컴포넌트에서 쿠키를 조작하면 next.js에서 애러를 던져줍니다. 프레임워크단에서 막아두었어요. +GPT 답변 안녕하세요! 질문 주신 내용을 각각 정리해서 설명드릴게요. 주제는 모두 Supabase와 Next.js에서 서버 컴포넌트(Server Components), 쿠키 조작, 그리고 createServerSideClient 함수 관련입니다. 🔹 1. createServerSideClient에서 serverComponent = false일 때 쿠키 세팅을 하는 이유 serverComponent = false는 보통 Middleware나 Server Actions가 아닌 곳에서 서버 컴포넌트를 사용하는 경우를 뜻합니다. 이 때 쿠키를 세팅하는 이유는 다음과 같습니다: 👉 Supabase Auth 관련 쿠키(sb-access-token, sb-refresh-token)를 response header에 세팅 Supabase의 세션 기반 인증은 쿠키를 통해 access token을 관리합니다.createServerSideClient는 Supabase 클라이언트를 만들고, 이 과정에서 인증 정보를 포함하는 쿠키를 response에 추가로 세팅합니다.serverComponent = false인 경우, response 객체에 접근할 수 있기 때문에 세션 갱신(refresh)이 필요한 경우 쿠키를 갱신할 수 있습니다. 📌 정리: 로그인/로그아웃 외에도 세션이 만료되었을 때 자동으로 갱신(refresh)하는 과정에서 쿠키 갱신이 필요합니다.이 쿠키는 클라이언트 측에서 useSession이나 supabase.auth.getSession()으로 유저 정보를 불러올 때 사용됩니다. 🔹 2. createServerSideClientRSC, createServerSideMiddleware 함수는 왜 정의되어 있지만 사용되지 않나요? 이 함수들은 상황에 따라 사용할 수 있도록 미리 정의되어 있는 경우가 많습니다. 💡 의미: createServerSideClientRSC: 서버 컴포넌트 전용으로 만든 클라이언트 생성 함수 (응답 쿠키 조작 불가능)createServerSideMiddleware: Next.js Middleware 환경에서 사용할 Supabase 클라이언트 생성용 함수 직접 쓰지 않더라도 필요할 수 있는 구조이기 때문에, 공통적인 클라이언트 생성 로직을 모듈화해둔 형태로 보면 됩니다. 🔹 3. 서버 컴포넌트에서 쿠키를 조작하면 어떤 오류가 발생하나요? Next.js의 서버 컴포넌트(Server Components)에서는 다음과 같은 제한이 있습니다: ❌ 쿠키 조작 불가능 set-cookie 같은 헤더를 조작할 수 없습니다.따라서 Supabase 세션이 갱신되더라도 Set-Cookie를 응답에 추가할 수 없어 세션 갱신이 브라우저에 반영되지 않습니다. 🔥 대표적인 오류/문제: 로그인을 했는데도 클라이언트 측에서 인증 상태가 유지되지 않음새로고침 시 로그아웃된 것처럼 보임Supabase 클라이언트가 null 세션을 반환함 ✅ 결론 구분설명serverComponent=false에서 쿠키 세팅세션 갱신 시 브라우저에 쿠키를 반영하기 위함쿠키 사용처로그인/로그아웃, 자동 세션 갱신 등 클라이언트 인증 상태 유지createServerSideClientRSC, createServerSideMiddleware상황에 따라 쓸 수 있도록 정의되어 있음 (모듈화 목적)서버 컴포넌트에서 쿠키 조작 불가 이유Next.js Server Component는 응답 헤더를 직접 조작할 수 없음 필요하시면 예시 코드나 구체적인 사용 케이스도 함께 도와드릴게요!

수파베이스 인증 토큰에서 개인정보 지우는 법?

supabase에서 JWT payload 정보를 커스텀 할 수 있는 방법은 없는것으로 압니다. 쿠키값은 httpOnly 로 JS로 접근은 불가능 합니다.~ 왠만하면 로그인한 유저만 email 등의 정보를 아는거죠. 쿠키의 값은 디코딩 하면 보이지만, 변조는 불가능합니다. 적어도 조작될 위험은 없는거죠. 사용자가 로그인한 기기가 아니라면 타인의 기기에서 개인정보는 따로 노출되지 않습니다. !

Server Actions CRUD 로직, RLS 테스트 권한 error

npx supabase login혹시 로그인이 풀리지 않으셨나요?( 다시 시도해보세요! )