getPostRecommend() 함수 내부에서tags : ['post', 'recommends']로 설정이 되어있는데, queryClient.prefetch 함수나, useQuery 함수의 queryKey와 항상 동일하게 일치시켜야 하나요? 불러온 데이터를 캐싱할 경우, react-query에서만 관리를 키를 관리해도 되지 않을까요?

안녕하세요!좋은 강의 감사합니다이번 강의를 수강하며 개념적으로 궁금한 점이 있어서 질문드려봅니다. ISR로 블로그 글을 revalidate 시간을 24시간으로 많이 넣어둔다고 하셨습니다. 티스토리나 벨로그에선 기존 글을 수정하면 바로 업데이트가 됩니다. 제가 아는 지식으로 ISR을 하게 된다면 24시간 동안 수정해도 기존 데이터를 보여주어야 한다고 생각해서 ISR보단 SSR이 적합하다고 생각했습니다. ISR은 이러한 문제를 해결할 수 있는지 궁금합니다.블로그 글이나 뉴스같은 경우 대량의 데이터이기 때문에 그만큼 대량의 페이지가 HTML 파일로 생성되어 큰 용량을 차지할 것 같다는 생각이 들었습니다.이러한 부분은 어떻게 해결할 수 있는지 궁금합니다.ISR / SSG를 사용하는 페이지 경로로 Next/Link를 사용하여 접속할 경우 클라이언트 사이드 라우팅이 이루어진다고 알고 있습니다. 이 경우 미리 빌드된 HTML 파일을 렌더링하는 ISR/SSG의 장점이 사라지는 것처럼 보이는데, Next/Link에서 ISR/SSG를 사용할 때 어떤 이점이 있는지 궁금합니다.소중한 시간내어 읽어주셔서 감사합니다.

문제 발생: npm run start:dev 시 위와 같은 에러 발생Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1615:16) { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 }  문제 원인:Redis 연결 실패 → 애플리케이션이 Redis 서버(포트 6379)에 연결하려 했지만 거부됨.ECONNREFUSED 오류는 Redis가 실행되지 않거나, 접근할 수 없는 상태일 때 발생. 문제 해결:Redis 기본 설정은 IPv6 (::1)을 사용함.IPv4(127.0.0.1)로 강제 변경해 해결localhost가 아닌 127.0.0.1로 변경// .env 기존 코드 REDIS_URL=redis://localhost:6379 // .env 변경 코드 REDIS_URL=redis://127.0.0.1:6379 위 에러 만나고 애쓴 부분 공유합니다. 혹시 잘못된 해결 방법이라면 알려주시면 감사하겠습니다!

해당 강좌 default.tsx에서 기본 페이지로 사용시킬때 default.tsx를 처리해두고 빈페이지를 구성하는 형태를 사용하는 예제를 따라서 진행해보았는데요. 여기서 궁금한점이 page.tsx를 @modal에 하나더 유지시키고 return null 처리를 하는 컴포넌트를 두어도 똑같이 동작은 되는데, default.tsx를 좀 더 권장하는 이유가 있을까요?

아래가 제가 이해한 내용인데 맞을까요?요청 메모화ssr 요청 사이클 내에서만 페치 결과를 캐싱하여 중복 요청 방지 (한 서버 요청 사이클 끝나면 초기화)예를들어 Home컴포넌트와 자식 컴포넌트인 Header 컴포넌트에서 렌더링 시에 동일한 요청을 날렸다면 Home컴포넌트의 요청이 캐싱되고 Header 컴포넌트의 요청은 캐싱된 값 사용데이터 캐시한 ssr 요청 사이클 내 뿐만 아니라 서버에 전역적으로 유지되는 캐시요청 메모화와 다르게 서버 요청 끝나도 초기화되지 않고 지속됨즉, 여러 클라이언트 요청 간에도 유지됨A가 먼저 페이지 요청 → 백엔드에 요청 후 넥스트 서버에 데이터 캐싱B가 같은 페이지 요청 → 백엔드 요청 없이 넥스트 서버 캐시에서 데이터 반환결론즉, 요청 메모화는 렌더링 최적화, 데이터 캐시는 네트워크 요청 절약을 위한 것

Next.js에서 서버 컴포넌트는 서버에서 실행되기 때문에, useEffect 없이 컴포넌트 내부에서 직접 fetch 요청을 보낼 수 있는 것으로 알고 있습니다.또한, 서버 액션은 백엔드 없이 Next.js 풀스택 환경에서 DB에 직접 접근할 때 주로 사용하는 것으로 이해하고 있습니다.그렇다면, 별도로 백엔드가 존재하는 경우에도 서버 액션을 사용할 필요가 있나요? 그리고 실제로 현업에서도 백엔드가 따로 있을 경우에 서버액션을 사용하나요?감사합니다!

 useEffect(() => {   if (inView) {     hasNextPage &&fetchNextPage();   } }, [inView, hasNextPage, fetchNextPage]);이렇게 useEffect를 작성하셨는데 fetchNextPage를 useEffect의 의존성배열에 넣는 이유가 궁금합니다

레이아웃은 네비게이션을 해도 상태를 유지하고 렌더링을 하지 않는다라고 이해했습니다.그런데, 오른쪽 레이아웃을 만들면서 패러렐 라우트라던지 template를 쓰지 않고 (비록 컴포넌트를 분리하긴 했으나) 서버에서 데이터를 뿌려주는 미래를 상상하고 쭉 코드를 짜고 계시는 모습을 보면서,레이아웃이 서버 데이터는 변경사항을 화면에 반영해주는 것처럼 이해가 되었습니다.뒷부분은 수강하지 않았습니다. 제가 잘못 이해 중인가요? 

강의와 같이 구현한다면page.tsx 에서 데이터 fetchPostRecommends.tsx 에서 는 다시 데이터를 fetch 하지 않고 HydrationBoundary를 통해 넘어온 데이터를 사용이렇게 page.tsx 에서만 데이터가 fetch 되어야 맞는거지요 ?제가 구현한 소스코드에서는 getPostRecommends 쪽에 로그를 찍어서 확인해보니 page.tsx 에서도 한번 호출하고 PostRecommends.tsx 에서도 한번 호출해서 총 2번 로그가 찍히더라구요.이론대로라면 page.tsx 에서 1번 호출했을 때만 로그가 찍혀야 하는 것이 맞는거죠?아 강의는 " 클라이언트 react-query" 입니다.

라우터가 이동하면 상태가 초기화 됐던걸로 아는데, setCurrent는 왜 계속 유지가 되나요? 쉘로우 라우팅도 아닌데,,, 제가 잘못알고있나요?

const res = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, //cache: "force-cache", } );'/home'에서 포스팅 로딩 시또는 새로고침 시에 데이터를 최초 조회하는 시점에서cache: "force-cache"를 제거하면 포스팅이 노출되고포함하면 포스팅이 안 나오는 현상이 있는데어떤 이유인지 의심 가는 부분을 못 찾겠어서 질문 드립니다. cache: "force-cache" 주석처리데이터 존재 cache: "force-cache"빈 배열 

혹시 useQuery에 작성하는 queryKey와 queryFn함수에 작상하는 next.tags의 queryKey는 무슨 상관관계가 있는 건가요 ? 둘의 값이 무조건 같아야 하는 줄 알았는데 useQuery엔 searchParams / queryFn함수엔 searchParams.q로 작성하셔서 여쭤봅니다. (next.tags엔 문자열만 가능한 점은 알고있습니다 ! )

강의 진행 도중 생긴 에러는 아니고, 순수한 궁금증에 질문 남깁니다.제가 React 로 프론트엔드 개발은 항상 모든 컴포넌트를 화살표 함수로 작성했었습니다. 이를테면const Home = () => {}; export default Home; 이런식으로 작성하였는데요, 근데 상기 Nextjs 강의에서도 그렇고 다른 수많은 블로그 글들에서는 전통적인 함수 선언식을 사용하더라구요.  export default function Home() {}; 그 이유가 무엇일까요? 모두가 사용하는데는 이유가 있는거 같은데 관련 자료를 찾을 수가 없어서 질문드립니다. 혹시나 강제된 문법인가 싶어 해당 강의에서 사용된 페이지들을 화살표함수로 바꿔서 작성해봤는데 똑같이 에러 없이 잘 실행이 되더군요..

[username] 라우터의 page.tsx에 현재 들어온 유저정보를 받아오는 prefetchQuery랑 그 유저의 게시글을 받아오는 infinitePrefetchQuery가 있는데 두 번째 Query의 경우 서버 컴포넌트에서 실행되는 함수라 credential:"include"가 작동하지 않아 Cookie값을 따로 명시해줘야 하는걸로 알고있습니다. 근데 Cookie값을 따로 명시해주지않아도 게시글들이 잘 불러와지는데 이 과정이 궁금합니다

회원가입 후 로그인 된 상태로 home으로 이동하게 되는데 여기서 useSession정보가 업데이트 되지않아서 Props로 session정보를 넘겨주는 방식으로 사용하셨는데 다르게 처리하는 방법도 있을까요 ? 예를 들면 로그인 모달에서 했던 것 처럼 서버액션을 사용하지 말고 클라이언트 컴포넌트에서 fetch 를 처리한 후replace(/home) 시키는 방법이요 !

npm run start:dev 명령어를 실행을 할 시 아래처럼 타입 에러가 나오고 있는데, 어떻게 해결을 해야 할까요? ㅠㅠ error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'.13 where: args.where, ~~~~~src/prisma.extension.ts:25:23 - error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'.25 where: args.where, ~~~~~ 

우선 인터셉팅 라우팅을 버튼, 링크 등을 통해 이동 시 인터셉트된 page를 렌더링하고 새로고침이나 주소창을 통해 이동했을 때 정상(?)적인 page를 렌더링하는 것으로 이해했습니다. 인터셉팅 라우팅 폴더를 만들어야 할 위치가 궁금해서 /test1/test2 에서 Link태그를 통해 /test1 으로 이동할 때 새로고침 시 표시 되는 test1과 intercepted test1을 구분하는 코드를 작성했습니다 "(.)test1" 폴더 위치를 바꿔보면서 어떻게 동작하는 지 확인해보는 과정에서 이해가 되지 않는 부분이 있어서 질문드립니다. 이 폴더구조로 해야 작동하고, 이 폴더 구조는 작동이 안되는게 이해가 안됩니다.뭔가 (.), (..), (..)(..) 이런식으로 경로 지정이 가능하면 인터셉팅 라우팅 폴더는 어디 있든 상관없어도 될 것 같았는데... 아래 폴더구조가 작동을 안되니 디게 혼란스럽네요 ㅠㅠ

안녕하세요! 강의 잘 듣고 있습니다!강의 도중 마이크로 프론트엔드에 대해 여쭤볼게 있어 질문 드립니다!다름이아니라, 3개의 Next 앱을 같은 도메인 아래 뒤에 주소들로만 구분해서 하나로 묶는 마이크로 프론트엔드는 그렇다면 결국 레포지토리가 3개인가요??

 export default function PostArticle({ children, post }: Props) { const router = useRouter(); const onClick = () => { console.log(1); router.push(`/${post.User.id}/status/${post.postId}}`); }; return ( <article className={style.post} onClickCapture={onClick}> {children} </article> ); }이 부분에서 onClickCapture에 대한 질문이 있습니다.캡쳐링 단계에서 onClickCapture의 클릭함수가 실행된다면자식인 <Link> 영역을 눌러도 <article>의 onClickCapture가 캡쳐링 단계에서 먼저 동작하여 <Link> 태그의 href 경로가 아닌 router.push()로 동작 해야한다고 생각하였습니다.그러나 실제 <Link>태그를 클릭하면 콘솔에 1이 찍히지만 router.push() 경로가 아닌 <Link>태그의 href경로로 이동하더군요. 이 부분이 잘 이해가 안됩니다..

댓글, 재게시 기능 개발시 onSuccess 메서드 사용 부분에서 궁금한 점이 생겨 질문 드립니다.로직은 비슷해서 재게시 로직 첨부했습니다!!좋아요 기능과 마찬가지로 optimistic update 방식으로 보다 빠른 UI 변경을 보기 위해 사용하는건지 궁금합니다. 강의를 수강하다가 onMutate, onSuccess 메서드에서 optimistic update 방식이 혼재 되있어 댓글, 재게시 기능들은 onSuccess 함수에 invalidateQueries 메서드를 활용해 쿼리 상태를 최신으로 다시 가져오는 방식은 괜찮지 않을까, 또 제로초님 의견은 어떠신지 궁금점이 들어 질문 드립니다!! async onSuccess(response) { const newPost = await response.json(); setContent(""); setPreview([]); const queryCache = queryClient.getQueryCache(); const queryKeys = queryCache.getAll().map((cache) => cache.queryKey); queryKeys.forEach((queryKey) => { if (queryKey[0] === "posts") { const value: Post | InfiniteData<Post[]> | undefined = queryClient.getQueryData(queryKey); if (value && "pages" in value) { const obj = value.pages .flat() .find((v) => v.postId === parent?.postId); if (obj) { // 존재는 하는지 const pageIndex = value.pages.findIndex((page) => page.includes(obj) ); const index = value.pages[pageIndex].findIndex( (v) => v.postId === parent?.postId ); const shallow = { ...value }; value.pages = { ...value.pages }; value.pages[pageIndex] = [...value.pages[pageIndex]]; shallow.pages[pageIndex][index] = { ...shallow.pages[pageIndex][index], Comments: [{ userId: me?.user?.email as string }], _count: { ...shallow.pages[pageIndex][index]._count, Comments: shallow.pages[pageIndex][index]._count.Comments + 1, }, }; shallow.pages[0].unshift(newPost); // 새 답글 추가 queryClient.setQueryData(queryKey, shallow); } } else if (value) { // 싱글 포스트인 경우 if (value.postId === parent?.postId) { const shallow = { ...value, Comments: [{ userId: me?.user?.email as string }], _count: { ...value._count, Comments: value._count.Comments + 1, }, }; queryClient.setQueryData(queryKey, shallow); } } } }); await queryClient.invalidateQueries({ queryKey: ["trends"], }); // or async onSuccess() { console.log(queryClient.getQueryCache().getAll()); await Promise.all([ queryClient.invalidateQueries({ queryKey: ["posts", String(post?.postId)], }), queryClient.invalidateQueries({ queryKey: ["posts", String(post?.postId), "comments"], }), ]); }, },