[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"], }), ]); }, },

pgAdmin의 Post 데이터를 전부 삭제한 후 다시 기록하고 싶어서 Post 내부 데이터를 전부 선택/삭제(휴지통 버튼 클릭)한 후 PSQL Tools에 COMMIT을 입력하라고 정보가 있어서 실행에 옮겼는데 갑자기 9090페이지가 아예 안돌아가네요(로그인 안됨, API문서 접근불가 등등) ㅠㅠ 어떻게 방법없을까요

안녕하세요. 강의를 마치고 혼자 구현을 해보고 있는데, 로그인과 인증 관련해서 궁금한 부분이 있습니다.프론트에 로그인한 유저인지의 판단을 미들웨어에서 auth함수로 next 서버를 통해 하고있는데,로그인 후에 접속 가능한 페이지를 이동할때마다 무조건 서버에 체크를 해주어야 하나요?데이터 페칭은 리액트 쿼리를 설명하며 말씀해주신것 처럼 컨텐츠에 따라 판단해서 캐싱하고 새로 받아오고의 개념이 이해가 되었는데, 세션체크라고 해야 할까요? 로그인 후에 이 유저가 로그인이 되어있는지에 대한 체크를 서버에 얼마나 자주 해주어야 하는지 모르겠습니다.현재는 미들웨어에서 로그인이 필요한 페이지에 auth함수를 호출하여 프론트 서버에서 체크를 하고, api를 호출할때는 쿠키에 next-auth의 세션 토큰과 서버에서 발급한 세션 아이디를 담아서 서버에서 로그인과 인증 확인을 하고있는것으로 이해를 했습니다. 현재는 혼자서 nestjs를 통해 jwt 토큰 2개 (access,refresh)을 발급해서 구현을 해보고있는데, 로그인이 필요한 페이지로 이동한다면 무조건 미들웨어에서 토큰 확인을 서버를 통해 해주어야 하는건가 잘 모르겠어서 질문 드립니다..강의 정말 잘 듣고 도움이 많이 됐습니다. 감사합니다.

이전 faker 를 사용했을 때 이미지가 바뀌는 문제때문에 getPostRecommend 함수 부분에 cache : "force-cache" 를 작성하셨었는데 실제 데이터를 받아오는 현시점에선 cache:"no-store" 를 작성하는게 맞을까요 ?

안녕하세요! 강의 도중 궁금한게 생겨 여쭤보기 위해 질문 드립니다!다름이아니라, 서버 액션과 api route의 차이가 속도 말고 어떤 때에 서버 액션을 써야하고, api route를 사용해야하는지 여쭤보고싶습니다!찾아본 바로는 서버 액션은 POST, PATCH 등 폼 제출 시에 사용하는 것이라는데, 폼 제출 시에는 무조건 서버액션을 사용하는 것이 맞는지, 아니라면 단지 개발자 판단 하에 사용하면 되는 것인지 여쭤보고싶습니다!

로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우,미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다./ / middleware.tsimport { NextResponse } from "next/server"; import { auth } from "./auth"; export { auth } from "./auth"; export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect(`http://localhost:3000/i/flow/login`); } } export const config = { matcher: ["/compose/tweeet", "/home", "/explore", "/messages", "/search"], }; 로그인 이 후 쿠키를 삭제를 통해 세션을 없애고 클라이언트 네비게이션을 통해 페이지 이동을 하면 미들웨어의 세션 검사에 걸려 redirect가 진행됩니다. /i/flow/login 페이지로 url이 변경되긴 했지만 병렬 라우트 및 인터셉팅 라우트로 인한 간섭이 있어 제대로 된 page를 찾지 못하는 것으로 보이는데 정확한 원인을 알 수 없어 문의 드립니다.

안녕하세요, 클론코딩 강좌 따라하던중 오류가 나는데 강사님 깃헙 클론해서 완성본 봐도 같은 오류가 나는것 같은데 무슨오류일까요..?

loading.tsx나 Suspense를 사용했을 때, Next의 Streaming이 동작하여 병렬적으로 미리 준비된 컴포넌트는 사용자의 브라우저에서 먼저 보이게 되고, fetch가 완료된 이후에 서버에서 데이터를 클라이언트로 보내줘서 사용자가 보이는걸로 알고 있습니다.하지만, 개발자 도구 Network 탭을 확인해본결과 새로고침을 하였을 때, loading.tsx나 Suspense를 사용을 모두 빼고서 prefetchQuery와 HydrationBoundary, useQuery만을 사용했을 시 Streaming 동작 방식처럼 fetch문 실행이 완료되기 전에 미리 NavMenu나 글자 같이 정적인 요소들이 fetch가 끝나기 전에 이미 브라우저에 도착해있는걸 확인하였습니다.하지만, 딱 한가지 다른 점은 후자 같은 경우는 정적인 컴포넌트가 브라우저에 도착했음에도 화면에 보이질 않고, 전자 같은 경우는 로딩창이나 다른 정적인 요소들은 이미 화면에 미리 보입니다.그렇다면, Next 15 공식문서에 있는 fetch 실행이 끝날때까지 HTML 파일을 서버 사이드에서 렌더링 하는 것이 Blocking 된다는 논리가 이해가 되질 않습니다. (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)위의 코드는 /home의 추천탭을 기준으로 확인하였습니다.이러한 현상이 발생하는 원인이 무엇인지 알 수 있을까요?

안녕하세요.강의 잘 시청중입니다. 진행 하고있던 도중 궁금한게 생겼습니다. 섹션2 - 로그인 모달에서 발생하는 문제 해결하기(router.replace) 4:06 경에 개발자 도구쪽을 보면 x개수가 빠르게 늘어나는것을 보실 수 있을텐데,제 기준에서는 저 때 무한 새로고침이 되고있더라구요. next.js콘솔에서는 GET 요청으로 /i/flow/login이 계속 되고있고 제가 직접 새로고침을 하거나 페이지를 벗어나면 멈추는데, 저 뒤로 강의 내용에 맞게 useRouter를 사용하면 문제는 없지만 저런 현상이 벌어진 이유가 궁금합니다. 혼자서 이것저것 바꿔가면서 해봤는데 /login -> redirect -> (인터셉팅 라우트)/i/flow/login 형태만 되면 계속 새로고침 되는 이유를 도무지 모르겠는데 원인이 너무 궁금해요

안녕하세요! 강의 수강 중 헷갈리는 게 있어 질문 드립니다!!다름이아니라, 강의 초반에 프로필 페이지가 SSR인 것과 prefetchQuery를 사용하는 것에 이해를 했는데, 왜 하위 컴포넌트인 UserInfo에서 다시 userQuery를 통해 데이터를 가져오는지 모르겠습니다!서버사이드 환경인 page.tsx에서 데이터를 가져오기 위해 PrefetchQuery를 사용하는 것으로 알고있는데, 그렇다면 UserInfo에서 useQuery를 통해 데이터를 가져오는 것이 아닌 데이터를 props로 넘겨줄 수 있는게 아닌가 싶습니다!혹시 최상위 page에서 prefetchQuery를 통해 데이터를 먼저 가져와야 그 하위 컴포넌트들 내부의 클라이언트 컴포넌트에서 useQuery를 통해 데이터를 가져올 수 있는건가요?그렇다면 prefetchQuery없이 클라이언트 컴포넌트에서 userQuery만 사용해도 되나요?

쌤하트나 리포스트를 누를 때 마다가끔씩TypeError: data.pages.map is not a function 이런 에러 PostRecommend 섹션에 뜨는데 이런 경우가 종종 발생할까요 ?

재게시를 클릭하면 Reposts 부분과 count부분을 수정하고 unShift함수를 사용해서 pages[0]에 글정보를 추가하게 되는데 재게시를 클릭할 때 마다 pages[0]에 {user:{},Original:{}} 부분이 계속 추가되는게 맞나요 ?인피니트쿼리는 한 페이지당 최대 10개의 객체를 받아오는 것으로 알고있는데 인피니트 쿼리랑은 상관 없는건가요 ?

안녕하세요! 강의 잘 듣고 있습니다!다름이 아니라, 수강 중 여쭤볼게 있어 질문 드립니다..!5:44초쯤에 app/api/auth/[...nextauth].ts 의 이 경로 폴더명들은 next-auth를 사용하려면 무조건 저 경로여야할까요?예를들어, app/api/login/[...nextauth].ts 등 다른 경로는 불가능한가요?꼭 /api/auth/[...nextauth]의 경로를 바라보도록 설계해야 하는지 궁금합니다!

[username] 슬러그 / 즉 유저 프로필 페이지에서 params값을 받아서 유저정보를 불러오는데 params의 값을 출력해보니 값이 나오긴하는데 인코딩된 값이 나옵니다 ㅠㅠencodeURIComponent 함수를 사용한 적이 없는데 왜 이렇게 나오는지 궁금합니다