섹션6 헤더 마크업 - zustand 적용에 오류가 발생합니다

zustand가 특정 버전 부터는 항상 반환 객체가 새로 만들어 지면 리렌더링이 되도록 수정되었는데요.useModelStore에서 샐렉터 함수(state => ({ ... })는 매번 새로운 객체를 반환 하기 때문에 내용이 같아도 새로운 참조가 생성되어 이전과 다르다고 판단해 무한 리렌더링이 일어나게 됩니다.따라서 아래 처럼 각각 가져오시거나 맨아래 링크를 참고해서 useShallow 를 사용해보시면 해결될것으로 보입니다!const model = useModelStore(state => state.model);const updateModel = useModelStore(state => state.updateModel); https://zustand.docs.pmnd.rs/guides/prevent-rerenders-with-use-shallow

page loading... 이 안보입니다.

먼저 loading이 안보이는 가장 유력한 이유는 캐시인데요.제 예상으로는 Reqeust Memoization으로 fetch는 같은 요청을 다시 만나면 메모리에서 결과를 즉시 반환하게 돼서 혹시나 이전에 호출이 되었다면 로딩이 안보이고 바로 렌더링 될 수 있습니다. 그 외에도 아래 사진 처럼 next.js는 여러가지의 캐시를 지원하고 있으니 공식문서를 한번 확인해보시면 좀 더 도움이 되실 거 같습니다 :)(사진).공식문서: https://nextjs.org/docs/app/guides/caching

Streaming 관련 질문

안녕하세요~ page loading 로딩 이후에 로딩이 안보이는 이유는 아래 공식문서에서 확인할 수 있는데요!nextjs에서는 기본적으로 request memoization 하기 때문에 동일한 요청에 대해서는 캐시를 해서 DashboardPage에서 호출한 이후 Card에서 호출할때는 캐시가 되어 바로 보여지는것으로 생각이됩니다! 실제로 제가 코드 받아서 대시보드쪽을 주석을 하고 나서 테스트를 해보았을 때는 잘 나오는 것으로 확인했습니다!(사진)(사진)

loading이 동작하지 않습니다.

/dashboard 에 있는 loading.tsx 말씀하신거 맞나요? 제가 수강생님이 주신 github 에서 clone 해서 테스트 해보았을 땐 아래처럼 잘 나오는걸 확인했습니다 🙂 혹시 /dashboard 에서 확인한게 맞으신지 혹은 첫 로딩이후엔 캐시로 안 보일 수 있으니 테스트 하실 때 강력 새로고침으로 테스트 해보시면 될 거 같습니다(사진)

Runtime Error

signup.ts 는 서버 액션이기 때문에 'use client' 가 아니라 'use server'를 작성해주셔야 합니다!추가적으로 에러가 나는 이유에 대해 좀 더 설명드리면db.insert(user).values({name, email, password: hasehdPassword});위와 같이 db 를 사용할 땐 데이터 베이스에 접근해야하기 때문에 DATABASE_URL 이 필요하게 됩니다.그리고 Next.js 에서는 클라이언트에서 환경 변수에 접근할 때, "NEXT_PUBLIC_" 을 앞에 붙여줘야 가져올 수 있는데요. DATABASE_URL 의 경우 데이터 베이스 연결을 위한 환경변수이기 때문에 서버에서만 사용하기 위해 NEXT_PUBLIC을 붙이지 않았고 그렇기에 현재 'use client'라고 선언되어 있는 파일에서 환경 변수를 가져올 수 없어 에러가 나는 것입니다. 앞으로 동일한 에러가 발생할 때에 DATABASE_URL 에 문제가 없다면 클라이언트에서 서버에서만 접근할 수 있는 환경 변수에 접근하지 않았는지(ex: db 를 조작하는 코드) 1차적으로 의심 해보시길 추천 드립니다.참고: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

Route Handler 에서 Post 코드 작성해봤는데 계속 에러가 납니다 ㅠㅠ

아래 AI 댓글에 답변을 달았네요 ㅠㅠ 다시 답변에 달겠습니다!안녕하세요!아마 이번에 nextjs 를 설치하고 따라오셨다면 15 버전이 설치되셨을거에요!15버전부터는 params 가 async 로 바뀌어서 해당 부분에 대한 처리를 하셔야합니다!새소식에 적어 놓긴 했는데 다시 한번 안내해드릴게요!!아래와 같이 수정하시면 잘 되실겁니다route.tsimport { NextResponse } from "next/server"; // params 는 async 이기 때문에 Promise 로 감싸서 타이핑 type Params = Promise; export async function POST(request: Request, segmentData: { params: Params }) { const userData = await request.json(); // params을 사용할 때 역시 await를 붙여주시면 됩니다. const params = await segmentData.params; console.log("server user data", userData); console.log("server params", params.testId); return NextResponse.json( { message: "성공적으로 생성하였습니다." }, { status: 201 } ); } page.tsximport { use } from "react"; // page 역시도 params 부분은 Promise로 감싸줍니다. type Params = Promise; export default function TestDetailPage(props: { params: Params }) { // client page 에서는 await를 사용할 수 없으므로 react에서 새로 추가된 use hook으로 받아주시면 됩니다. const { testId } = use(props.params); const handleSubmit = async () => { const response = await fetch("/api/test/1234", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: "test name", email: "test email" }), }); const data = await response.json(); console.log("client data", data); }; return ( 테스트 디테일 페이지: {testId} 전송 ); } 바뀐 부분에 대해서는 아래 링크를 참고해주세요!https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page

섹션7 사이드바 &대화페이지 연동 9분50초경 질문

(사진) revalidatePath 에 대해 공식문서를 보면 위 사진 처럼 revaliatePath() 안에 들어가는 path 는 url path 가 아니라 filesystem path 를 넣는걸 볼 수 있습니다. 따라서 host 는 무관하며 app(root) 부터 하위 filesystem, route segment 에 맞게 path를 넣어주시면 됩니다.

섹션7 사이드바 &대화페이지 연동 3분50초경 질문

안녕하세요! 질문 주신 내용에 답변을 하기 위해서 먼저 next.js 에서 렌더링이 어떤 과정을 통해 이루어지는지를 먼저 설명드려야할 거 같습니다. nextjs 에선 서버에서 2단계 클라이언트에서 3단계에 걸쳐 렌더링이 일어나게 되는데요. 그 과정은 아래와 같습니다.서버리액트는 서버 컴포넌트를 react server component payload(RSC Payload) 의 형태로 먼저 렌더링하게 됩니다.RSC Payload 는 압축된 바이너리 표현으로 아래와 같은 정보를 포함하고 있습니다.서버 컴포넌트 렌더링 결과물클라이언트 컴포넌트가 렌더링될 위치와 해당 자바스크립트 파일에 대한 참조를 위한 placeholder서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 모든 소품그리고 이 rsc payload 와 javascript instructions 을 사용해 서버에서 초기 html 생성해 클라이언트에 보냅니다.클라이언트클라이언트는 초기 html 를 즉시 표시하고 이 초기 html 은 non-interactive 하고 초기 로드에만 사용됩니다.클라이언트에서 rsc payload 를 사용해 클라이언트 컴포넌트를 채워넣고(reconcile) dom을 업데이트 합니다.서버에서 받은 javascript instructions 을 사용해 클라이언트 컴포넌트에 hydrate 합니다. 위와 같은 렌더링 과정을 거치는데요. 과정을 보면 클라이언트 컴포넌트는 서버에서 "클라이언트 컴포넌트가 렌더링될 위치와 해당 자바스크립트 파일에 대한 참조를 위한 placeholder" 의 정보만 가지고 있기 때문에 클라이언트 컴포넌트 내부가 어떻게 구현되어 있는지, 어떻게 렌더링이 되는 지 서버에서는 알지 못합니다. 따라서 그 하위에 있는 컴포넌트 역시도 자연스럽게 클라이언트 컴포넌트로 처리하게됩니다. 하지만 props로 받은 서버 컴포넌트는 상위(서버컴포넌트)에서 받기 때문에 이미 렌더링된 결과가 props로 들어오게 되고 rsc payload에는 이 props 정보도 있기 때문에 서버 컴포넌트를 유지하면서 받을 수 있게 됩니다. 아래 코드를 보면 좀 더 이해하시기 쉬울 거 같아요.export default function ClientComponent({ children, }: { children: React.ReactNode }) { const [count, setCount] = useState(0) return ( setCount(count + 1)}>{count} {children} )} import ClientComponent from './client-component' import ServerComponent from './server-component' // Pages in Next.js are Server Components by default export default function Page() { return ( // 이렇게 children 으로 들어오는 컴포넌트는 상위 서버 컴포넌트에서 렌더링을 마친 후 // props 로 들어오기 때문에 서버 컴포넌트로 유지할 수 있습니다. )} 참고: https://nextjs.org/docs/app/building-your-application/rendering/server-components#how-are-server-components-renderedhttps://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components