안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다. afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지?? 2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.
App router를 사용해서 상용화를.목표로 하는 서비스를 만들기에는 아직 무리일까요? 라이브러리가 호환이 안되는것들이 많다고 들어서 page router를 쓸지 고민이되네요 예전보다는 많이 안정화되었다고 듣기는 했는데 page router에 비해 리스크가 크지않을지 궁금합니다
이런 상황에서는 어떻게 해야할까요? 강사님은 queryFn 함수를 별도로 분리하는 방식인데, 해당 함수내에서는 token을 호출할 수 없을것입니다. 그렇다면 제가 생각하기에 가능한 방법은 querykey에 포함시켜서 함수에서 호출하는 방법인데... 그렇게되면 token이 필요한 모든 함수의 key 배열에 토큰을 추가시켜야 하는 작업을 해야합니다. 하지만 이것보다 더 좋은 방법이 있을지 잘 모르겠습니다. axios 같은 경우에는 전역적으로 header에 default로 넣는다거나 하는 방법이 있는데, fetch로 하는 경우에는 위의 방법이 최선일까요?
안녕하세요 제로초님 강의 구매해서 따라가고 있는 수강생입니다 해당 강의에 2분44초 경을 보면 루트 레이아웃에 body안에 "루트레이아웃" 문구 넣고 localhost 3000을 보시면 정상적으로 동일하게 바뀌어 있는데 하지만 그 상태에서 브라우저 창을 새로고침을 할 경우 아래와 같은 에러가 뜨더라구요 =============== Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching text node for "루트 레이아웃" in <body>. See more info here: https://nextjs.org/docs/messages/react-hydration-error =============== 서버와 클라이언트간의 매치가 되지 않아 하이드레이션이 실패했다고 하는데 next dev를 통해 재 실행을 해도 동일합니다 브라우저에서 정상적으로 텍스트 변경이 되었지만 왜 이러한 충돌이 나는걸까요 ~?
"use client"; import {useQuery, useQueryClient} from "@tanstack/react-query"; import {getUserPosts} from "../_lib/getUserPosts"; import Post from "@/app/(afterLogin)/_component/Post"; import {Post as IPost} from "@/model/Post"; type Props = { username: string; } export default function UserPosts({ username }: Props) { const { data } = useQuery<IPost[], Object, IPost[], [_1: string, _2: string, _3: string]>({ queryKey: ['posts', 'users', username], queryFn: getUserPosts, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const user = queryClient.getQueryData(['users', username]); console.log('user', user); if (user) { return data?.map((post) => ( <Post key={post.postId} post={post} /> )) } return null; } import {QueryFunction} from "@tanstack/query-core"; import {Post} from "@/model/Post"; export const getUserPosts: QueryFunction<Post[], [_1: string, _2: string, string]> = async ({ queryKey }) => { const [_1, _2, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}/posts`, { next: { tags: ['posts', 'users', username], }, cache: 'no-store', }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to fetch data') } return res.json() } 기존 강의에서의 코드입니다. 제 생각에는 둘 다 타입을 지정해 줘야 할 필요가 있나? 라는 생각이 들어서 getUserPosts의 타입만 설정해봤는데, useQuery부분에서도 data 타입, key에 대한 타입, fn에 타입 모두 정상적으로 적용이 되는 거 같습니다. "use client"; import Post from "@/app/(afterLogin)/_component/Post"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { getUserPosts } from "../_lib/getUserPosts"; type Props = { username: string; }; export default function UserPosts({ username }: Props) { const { data } = useQuery({ queryKey: ["posts", "users", username], queryFn: getUserPosts, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const user = queryClient.getQueryData(["users", username]); console.log("user", user); if (user) { return data?.map((post) => <Post key={post.postId} post={post} />); } return null; } import { Post } from "@/model/Post"; import { QueryFunction } from "@tanstack/query-core"; export const getUserPosts: QueryFunction< Post[], [_1: string, _2: string, username:string] > = async ({ queryKey }) => { const [_1, _2, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}/posts`, { next: { tags: queryKey, }, cache: "no-store", }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }; 이런식으로 약간 변형을 줘봤는데 기존의 코드 타입 지정과 차이가 있을까요? 바꾼 부분은 UserPost에서 타입 지정은 모두 없애줬고, getUserPosts에서 next tags에 queryKey를 그대로 할당했습니다. (간혹 tags의 규칙상 queryKey에서는 가능해도 안되는 경우도 있다고 강의에서 말씀해주셨는데, 대부분의 경우에는 가능하기 때문에 대부분은 이렇게 충분하고 그런 경우에만 별도로 바꿔주면 될 거라고 생각했습니다.)
이전 질문에서 SEO가 필요없는 경우 보통 클라이언트에서 데이터를 가져오는게 더 좋다. 라는 답변을 받았습니다. 그런데 어떤게 서버에서 데이터를 가져오는거고, 어떤게 클라이언트에서 데이터를 가져오는건지가 매우 헷갈리고 있는 상황입니다. react-query를 사용할 때 query가 있는 컴포넌트에 "use client"가 있다면 클라이언트 데이터 fetch라고 보면 될까요? 그렇다면 수업 내용 중 client 컴포넌트에서 데이터를 가져온건 PostRecommends 부분이 유일한가요? 다른 react-query 부분은 모두 "use client"가 상단에 없습니다. (거기에 signup 정도...?) 기존의 서버 컴포넌트에서 데이터를 가져오려고 하는데, SEO가 필요 없어 클라이언트 컴포넌트를 선택하고 싶다면, 위에 "use client"를 일부로 적어서 클라이언트 컴포넌트로 만들면 되는게 맞을까요? (데이터 페치 이전에는 함수 같은 것들이 있어서 반드시 바꿔야 되는 경우에만 "use client"를 썼기에, 필수적인게 아닌 제가 선택적으로 바꾸면 되는것인지 헷갈리네요) 컴포넌트 함수에 async를 쓰는 경우도 안쓰는 경우도 있는데, 이건 서버/클라이언트는 무관하게 단순히 async/await를 쓰기 위해 사용하는걸까요? 요즘 질문이 많이 생기네요... 항상 감사합니다.
https://nextjs.org/docs/app/building-your-application/routing/route-handlers 궁금한 점이 있어 의견 여쭈어 보려고 글 남깁니다! 공식 문서를 읽어보니 route handlers로도 백엔드를 구현할 수 있는데 MSW 사용 이유는 배포 모드일때는 라우트 핸들러를 적용한 폴더를 삭제를 해줘야하니까 번거롭기 때문에 사용하는 이유도 있다? 라고 봐도 될까요?
안녕하세요 제로초님. 인터넷창에 직접 주소를 입력하거나 새로고침 시 뒤에 배경화면이 사라지는 것에 대하여 질문있습니다. 먼저 <Link href='/i/flow/signup' className={styles.signup}> 를 클릭 시에는 인터셉터 라우팅이 트리거 되어 src/app/(beforeLogin)/layout.tsx 에 있는 children으로 인해 배경화면에 main컴포넌트가 보여지며 인터셉터된 @modal 은 modal부분에 보여집니다. 그런데 직접 주소창에 /i/flow/signup' 를 입력하여 접근하거나 새로고침하면 배경화면에 main컴포넌트가 사라지게 되는데 이것의 이유는 직접 접근할 때 인터셉에 걸리지 않게되고, childrend에는 i/flow에 있는 폴더들이 보여지며 defalut.tsx가 배경화면으로 보여지기 때문인가요?
CSR에서의 data fetch와 suspense 안에 있는 서버컴포넌트의 data fetch는 어떤 차이가 있을까요? SSR이 아닌 CSR을 써야 하는 상황은 위처럼 데이터가 큰 상황들인데, 어차피 suspense를 이용하면 서버에서 fetch가 끝나야 렌더링이 되는게 아니라 로딩으로 되다보니 CSR 대신 suspense를 이용하면 되는거 아닌가 싶습니다. 어떤 차이가 있는지 잘 모르겠어요. CSR을 써서 더 좋은 상황이 어떤게 있을지 모르겠습니다.
상위 컴포넌트에서도 useSearchParam을 사용해야 하고, 하위 컴포넌트에서도 useSearchParam을 사용해야 하는 이러한 상황에서, 해당 값을 prop으로 전달할지, 독립적으로 호출할지 고민이 됩니다. 이 정도의 요소는 굳이 prop으로 전달하지 않고 다시 호출해도 유의미한 리소스 차이는 없겠죠?
클라이언트에서는 useSession인데, 서버에서는 어떻게 불러오나요? getSession이나 getServerSession을 쓰면 되는거 같은데, 그냥 서버 컴포넌트 페이지에서 const A=await getSession()으로 해버리면, 그 다음 console.log(A)에서 pending이 나오더라구요... 서버에서 세션을 호출해서 특정 동작을 하기 위해서는 어떻게 조작해야 할까요? api에 따로 만들어서 route handler을 써야 할까요...? 이 방법도 어려움을 겪고 있긴해서 가장 좋은 방법이 뭔지 궁금합니다.
