안녕하세요!저는 fetch를 사용하지않고 axios를 사용해봤는데요!서버에서 prefetch한 데이터가 초기에 useQuery에 값이 없는 이슈가 있어서 디깅을 해보다가 ReactQueryProvider에서 선언한 queryClient와 Home.tsx에서 선언한 queryClient가 달라 캐시한 값을 가져오지 못한다고 생각하는데 혹시 맞을까요? "use client"; import { useState } from "react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { isProduction } from "@/app-src/shared/env"; export const ReactQueryProvider = ({ children }: React.PropsWithChildren) => { const [queryClient] = useState( () => new QueryClient({ defaultOptions: { queries: { staleTime: Infinity, gcTime: Infinity, }, }, }) ); return ( <QueryClientProvider client={queryClient}> {children} {!isProduction && <ReactQueryDevtools initialIsOpen={false} />} </QueryClientProvider> ); }; import { PostIndex } from "@/app-src/post/[slug]"; import { API_PATH } from "@/app-src/shared/apis"; import { getPost } from "@/app-src/shared/apis/post/get-post"; import { dehydrate, HydrationBoundary, QueryClient, } from "@tanstack/react-query"; const PostPage = async ({ params }: { params: { slug: string } }) => { const { slug } = params; const queryClient = new QueryClient(); // 서버에서 미리 데이터를 패칭 await queryClient.prefetchQuery({ queryKey: [API_PATH.POST(slug)], queryFn: () => getPost(slug), }); const a = queryClient.getQueryData([API_PATH.POST(slug)]); console.log(a, "a"); // 데이터 직렬화 const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <PostIndex /> </HydrationBoundary> ); }; export default PostPage;"use client"; import { API_PATH } from "@/app-src/shared/apis"; import { getPost } from "@/app-src/shared/apis/post/get-post"; import { useQuery } from "@tanstack/react-query"; import { useParams } from "next/navigation"; export const PostIndex = () => { const { slug } = useParams<{ slug: string }>(); const { data } = useQuery({ queryKey: [API_PATH.POST(slug)], queryFn: () => getPost(slug), }); // 초기에 없음 -> 패칭 -> 있음 console.log(data, "data"); return ( <div> <div>{data?.title}</div> </div> ); };만약 제가 생각한게 맞다면 어떻게 해결해야할까요?

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요. Nextjs 개념을 다시 공부를 하고 있는데 헷갈리는 부분이 있어서 글을 작성하게 되었습니다.우선 App Router 강의에서 이해 한 내용으로는 초기접속시 서버컴포넌트들은 사전랜더링 작업시 실행이 되면서 HTML로 만들어져서 브라우저로 보내지고 이후에 JSBundle 있다면 JSBundle이 내려가져서 하이드레이션이 이루어진다라고 알고 있습니다. 공식문서 Full Page Reload Client영역 2번 문장이 내용 입니다.https://nextjs.org/docs/app/building-your-application/rendering/client-components#full-page-loadFull page loadThen, on the client:The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.그런데 해당내용으로 보면 RSC Payload는 클라이언트와 서버컴포넌트 트리를 재조정하는데 사용되어진다라고 하는거 같은데 RSC Payload값도 FullPage리로드시에 내려오는걸까요? 그리고 저기서 말하는 서버컴포넌트 트리라고 말하면 초기에 내려주는 사전랜더링 HTML을 말하는지 궁금합니다. 감감사합니다.

제목과 같습니다!SSG와 SSR을 동시에 사용할 수 없을 뿐더러요새는 하나의 페이지에 정적인 데이터만 존재하는 페이지는 거의 없다고 생각하거든요 떄문에 과연 프리패칭은 하고 싶지만 정적인 데이터가 너무 커서 SSG를 선택하는 경우의 수가 얼마나 있을까?? 하는 추측이 드는데요.저의 이런 추측이 충분히 가능성 있는 의문인지 궁금합니다!

전공자따라잡기 데이터베이스 공부중에 mysql 대신 이 강의 할때 깔았던 postgreSQL로 연습해보려고 하다가 질문드립니다서버그룹 우클릭 -> register -> server 하면 사용자 이름으로 된 기본db와 함께 zcom이 항상 같이 생성되는데 이 zcom db 생성안되게 하려면 어떻게 해야하나요?

제목 그대로입니다.

강의 너무 잘 듣고 있습니다.현업에서 next.js 15 기반으로 큰규모의 프로젝트인 wms (창고관리 시스템)을 구현 예정중에 있습니다.mssqlreact18 / next14typescriptmaterial UI사용예정중에 있습니다.혹시 위와 같은 프로젝트에서 추천해주실만한 상태관리 도구가 있으실까요? redux, zustand, recoil등 선택지가 많은데 선뜻 선택하기가 쉽지 않네요 ㅠ 

현재 페이지 라우터 강의까지 듣고 궁금한 점이 생겨서 질문드립니다!Q1. 다음과 같은 상황일 때, book페이지는 어떤 렌더링 방식이 적합한가요? SSG, SSR, ISR 모두 완벽히 맞아 떨어진다는 생각이 들지 않아 질문드립니다데이터 변경 가능성이 적고, 관리자 서비스를 통해 데이터가 변경되나, 변경 시점이 명확하지 않은 경우on-demand revalidation 사용이 안되는 경우 (next12)Q2. 만약 on-demand revalidation을 사용할 때, 별도의 서비스에서 일어난 요청을 기준으로 렌더링을 해야한다면 그 요청이 일어났음을 알 수 있는 방법이 있나요?

각 페이지에 레이아웃을 덮어씌워 보내는 함수인 getLayout이라는 메소드는 저희가 정의한 커스텀 메소드인데이 메소드가 받는 page라는 인자는 어떻게 현재 페이지가 되는지 모르겠습니다. 떄문에 app.tsx에서 해당하는 Component(접속한 페이지)의 getLayout이라는 메소드가 없을 경우에 (page)=> page라는 함수를 리턴시켜 기본의 페이지를 리턴한다는 맥락도 또한 이해가 가지 않습니다.page라는 인자는 도대체 왜 현재페이지라고 인식해서 오는지요ㅠㅜ

동료들과 협업할때 CSS를 작성하는 방법을 module로 할지 Styled-Component로 할지 고민인데요. module로 하면 className에 계속 "style." 접두사를 넣어주어야 한다는 불편함이 있고 Styled-Component를 쓰게 되면 하나의 파일에 줄이 길어지는 단점과, 스타일링을 코드 한줄 넣고싶어도 하나의 스타일 컴포넌트를 만들어야 한다는 단점이 있더라고요. 강사님꼐서는 module을 추천하시기에 module을 강의에 넣으신걸까요??

카카오 로그인 까지 구현 후vercel에 배포 까지 한 상태이고 아직 도메인은 등록 하지않았습니다만집에서 할 때는 vscode로 로컬 서버를 열어놔서 몰랏었는데 로컬 서버를 열어놨을 때는 잘되지만밖에서 제가 vercel에 배포한 사이트를 들어가서 카카오 로그인을 시도해보니 localhost에서 연결을 거부했습니다. ERR_CONNECTION_REFUSED 에러가 나오는데 어디가 문제 인걸까요? ㅠ

강의를 따라하는 도중 이런 에러를 만났습니다 에러 경로를 보고 찾을려고 하는데 node_modules\oidc-token-hash\lib\shake256.js (3:1)가 어딘지를 잘 못찾겠습니다

포트원 사이트에 나와있는 내용이랑 인강내용이랑 코드가 전혀다릅니다.인증 결제 연동하기 (portone.io)바뀐거 같은데 어떤것으로 공부해야 하나요

Dynamic Page로 설정되는 기준 중에서 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을때가 있다고 말씀해주셨습니다.그리고 웬만하면 Static Page로 만드는 것이 성능 측면에서 좋다고 하셨습니다. 하지만 예를 들어, 거의 모든 페이지에서 header나 footer 컴포넌트를 공통 컴포넌트로 쓰고있고, 그 컴포넌트에서 쿠키를 통해 어떤 값을 세팅한다면 Static Page는 거의 없을 것으로 판단이 되는데 따로 해결방안이 있을까요?  Dynamic Page로 설정되는 기준 중에서 아래와 같이 캐시되지 않는 data fetching을 사용하는 경우가 있다고 하셨는데 async function Comp() { const response = await fetch('...') return <div>...</div> }async function Comp() { const response = await fetch('...', {cache : "no-store"}) return <div>...</div> }아래와 같이 revalidate로 캐시 옵션이 세팅되었을때는 Static Page로써 적용이 되는 것이지요? 그 이유가 해당 time이 지났을때는 데이터캐시에 있는 값이 stale되었다고 판단이 되어 캐싱되어있는 값을 가져오지않고 새로운 값을 가져오기 때문이라고 보면 되는걸까요?async function Comp() { const response = await fetch('...', { next: { revalidate: 3 } }) return <div>...</div> }    

getServerSideProps 함수 내부에서 context.query.q로 데이터를 불러오는데, 이러한 querystring을 활용하는 요청 또한 사전 렌더링으로 처리를 할 수가 있나요? 초기 접속 요청(인덱스 페이지)에서 서버는 유저가 querystring을 입력하기 전까지는 querystring의 값을 모르지 않나요? 어떻게 context.query.q도 사전 렌더링의 SSR 방식으로 처리를 할 수가 있나요?

img 태그를 사용할 때처럼 이미지 사이즈를 따로 작성하지 않고 그 공간의 크기에 따라 자동으로 이미지 사이즈가 적용되는 방법은 없을까요?예를 들어 화면이 줄어들면 리스트 아이템들도 사이즈가 줄어들어 이미지 사이즈도 자동으로 줄어들게 되는 것처럼 그 부모에 맞춰(이때 부모도 사이즈 고정x) 사이즈가 자동으로 변하도록 하는 방법이 있는지 궁금합니다

안녕하세요 제로초님! 제로초님 강의 보면서 개인 프로젝트 해보고 있는 수강생입니다. 현재 로그인과 회원가입 페이지를 인터셉트와 패러렐 라우트를 이용했는데,(저의 현재 폴더 구조입니다.)app/ ├── layout.tsx ├── page.tsx // 메인 페이지 ├── @modal/ │ ├── (.)login/ │ │ │ └── page.tsx // 로그인 모달 페이지 │ ├── (.)signup/ │ │ │ └── page.tsx // 회원가입 모달 페이지 // 프로필 수정 모달 페이지 │ ├── [...catchAll]/ │ │ └── page.tsx // 모달을 닫기 위한 catch-all 라우트 ├── (auth)/ │ ├── login/ │ │ └── page.tsx // 로그인 페이지 │ ├── signup/ │ │ └── page.tsx // 회원가입 페이지 └── 기타 페이지들...   회원가입이 되면 메인 페이지('/')로 이동하게 했는데 router.push, replace로는 경로는 이동이 되나 모달이 닫히지 않는 문제가 있었습니다. 그래서 catch-all route를 이용해서 특정 경로에 매칭되지 않으면 모달이 닫히도록 null을 반환하였습니다.// catch-all route export default function ModalCatchAll() { console.log('CatchAll triggered'); return null; } 그런데 router.push('/') 메인 홈페이지인 '/' 경로로 이동을 해도 catch-all route가 실행되지 않았는데, 메인 경로 외에 게시글 라우트로 router.push('/foster') 경로를 변경했더니 catch-all route가 실행이 되었습니다. router.back 말고도 push나 replace를 사용하고 싶어서 catch-all route를 사용했는데메인 홈 경로는 안되고 다른 경로로 이동시킬 때는 catch-all route가 왜 적용되는지 모르겠어서 질문 남깁니다..

혹시 SSG의 빌드 타임이라는 것이 무엇인가요?npm run build를 할때의 순간을 빌드 타임이라고 하신 것 같은데,빌드 타임이 있으면 왜 SSR에서 html로 js를 변환하고 그러는 것인가요?빌드 타임에 다 변환 시켜놓으면 되는 것 아닌가요?

현재 Next.js Styling 부분까지 시청하였으나, 기존의 사전 렌더링 부분이 이해가 가지 않아 다시 수강한 후 질문드립니다.일단, 제가 정리한 사전 렌더링 과정은 이와 같습니다.유저가 브라우저를 통해 서버에게 초기 접속 요청을 보낸다. 서버는 서버 측에서 리엑트 앱을 실행시켜서 모든 리엑트 앱의 컴포넌트를 HTML로 변환한다.이 변환된 HTML을 브라우저에게 보내준다.변환된 HTML을 받은 브라우저는 HTML을 화면에 렌더링한다. 이때 유저는 완성된 화면을 볼 수 있다. 이렇게 유저가 요청후에 1차적으로 화면에 요소를 볼 수 있게 되는 시간을 FCP(First Contentful Paint)라고 한다.그러나 지금은 html만 브라우저에게 보내진 상태이며, 페이지 이동, 버튼 클릭 등등의 상호작용을 수행하는 자바스크립트 코드는 아직 html에 담겨지지 않은 상태이다.그러므로 유저에게 1차적으로 화면에 렌더링된 이후에 후속으로 서버에서 자바스크립트를 Bundling하여서 브라우저에게 보내준다.브라우저는 이 번들링된 자바스크립트 파일을 실행한 후에 기존에 1차적으로 화면에 렌더링된 html과 자바스크립트의 로직을 연결하게 된다. 이러한 과정을 hydration이라고 한다.유저가 초기 요청부터 hydration 까지 종료된 시간을 TTI(Time To Interact)라고 한다.페이지 이동은 hydration 과정에서 받아온 bundle 자바스크립트 파일을 실행해서 현재 보여지는 컴포넌트를 교체하는 방식으로 CSR과 똑같은 방식으로 처리한다.결론적으로 제가 궁금한 부분은,처음에 html로 변환할때 "jsx 부분만" 변환하나요?아니면 처음에 html로 변환할때 "jsx 부분만" 변환하지 않나요? 처음에 html로 변환할때 next.js의 "모든 Jsx 부분"을 변환하여 브라우저에게 전달하나요?아니면, 처음에 html로 변환할때 next.js의 모든 Jsx 부분이 아니라, "지금 요청한 페이지의 부분의 jsx만" html 변환하여 브라우저에게 전달하나요? hydration이라는 과정에서는 자바스크립트 파일 뿐만 아니라 "스타일 코드나 다양한 이미지 파일, json 파일"도 전달하여 기존에 쏴준 html에 연결시켜 주는 것인가요?아니면 지금 요청한 페이지에 연관된 "자바스크립트만" 번들링해서 hydration을 해주는 것인가요? 저의 질문이 조금 장황할 수도 있을 것 같지만 양해부탁드립니다.

앱 라우터에서 RSC Payload파일은 초기 접속 요청 이후에페이지 이동이나 프리패칭시일때만 서버에서 받아오는걸까요?아니면 초기 접속 요청시에 초기 접속 페이지가 서버 컴포넌트로 되어있으면 초기 접속 요청때도 rsc payload파일을 서버에서 받아오나요?  

안녕하세요. Next에서 Tanstack-query 를 사용하실 때 궁금한게 있어서 질문드립니다.QueryClientProvider를 생성하실 때 아래와 같이 진행하신 다음에 layout.tsx 에서 감싸주고 있는데,QueryClientProvider에 use client를 사용하게 되면 결국 모든 하위 컴포넌트가 클라이언트 컴포넌트가 되는게 아닌가요?즉, layout.tsx 부터 모든 컴포넌트가 전부 클라이언트 컴포넌트로 사용되는게 맞는건가요...?'use client'; import React, { ReactNode, useState } from 'react'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; function RQProvider({ children }: { children: ReactNode }) { const [client] = useState( new QueryClient({ defaultOptions: { // react-query 전역 설정 queries: { refetchOnWindowFocus: false, retryOnMount: true, refetchOnReconnect: false, retry: false, }, }, }), ); return ( <QueryClientProvider client={client}> {children} {/* 개발 모드일때만 데브툴 사용*/} <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} /> </QueryClientProvider> ); } export default RQProvider;