Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 강의 5:15초 부터의 설명에 조금만 더 자세히 설명해주시면 감사할것 같아서요! "이러한 파람즈도 프라미스로 가져와야겠죠 우리가 최신을 사용하고 있기 때문에 다시 generateMetadata 함수를"라고 스크립트(영상자막)는 나와 있는데, 이유를 설명하는 파트가 잘 안 와닿아서 혹시 설명해주실 수 있나요? 직관적으로 생각하면 export generateStaticParams에서 slug 를 params으로 가져오는데 시간이 걸리니까, 기다려야 하니까 await 으로 params를 기다리는건 알겠는데, 'params'가 왜, 어떻게 해서 Promise 타입인지 궁금합니다. 너무 두서없었네요. 정리하자면 1.왜 params 가 Promise 객체 타입인지, 코드 어디에서, 어떻게 해서 Promise 객체 타입이 되었는지 궁금합니다. 2. 혹시 params 가 Promise 객체 타입인 이유는, 그저, [slug]폴더로 동적페이지로 정의되었으니, 컴포넌트로 들어오는 입력값 {params}는 [] 안에 들어간 변수값이 들어오는 건가요? 그래서 그냥 nextjs 스펙상 무조건promise 로 params 가 주어지게 되는건가요? 너무너무 헷갈려서 그런데, 동적라우팅/정적 라우팅 별, 그리고 Clientside /serverside 별로 4가지로 나누어서 params 가져오는 방법을 설명해주실수 있나요? 너무너무 헷갈리네요.... 동적/정적라우팅에 따라 나뉘나요, client/server 에 따라 나뉘나요? 후자인걸로 생각하고 있긴 한데 맞는지 너무 헷갈리네요.. 감사합니다! 좋은 하루 되세요!
put, patch, delete 메서드의 경우 options (사전 요청) 을 보내게 된다고 하셨는데요. 물론, 설명 주신것처럼 "Access-Control-Max-Age" 를 통해서 캐싱을 하는 방법도 있겠지만, get 과 post 요청만 사용하는게 (사전 요청을 하지 않으니) 좀 더 효율적인 방법이 될수 있을까요?
안녕하세요 강사님. 08-14 강의 도입부에서 FormView는 ModelForm클래스가 아닌 Form클래스에 대한 일반적인 패턴을 구현하는데 사용한다고 말씀 주셨고 코드에서도 db저장 로직을 직접 구현해 주셨는데요. FormView에서도 form_class를 ModelForm으로 지정하면 좀 더 간결한 것 같은데 혹시 FormView에서 ModelForm을 사용하면 안되는 이유가 있을까요? [코드 예시] ㄴ강의 내 #1. FormView 활용에 나오는 오른쪽 코드에서 form_class를 ModelForm으로 만들어 form_valid를 오버라이딩 하였습니다. class PostCreateView(FormView): form_class = PostForm template_name = "blog/post_new.html" success_url = "/admin/" def form_valid(self, form): form.save() return super(PostCreateView, self).form_valid(form)
서버로부터 받아오는 Posts를 <PostList/> 컴포넌트에서 상태로 관리하는데, 이것은 전역 상태로 관리하지 않는 이유가 있을까요? postStore에서 getTotalPages를 할때, 고정된 값 100을 사용했는데, 실제 서비스라면 어떻게 처리해야하나요? postStore에서 posts.length와 같은 전체 개수를 알아야할것같은데.
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요, 잘 학습하고 있는 학생입니다. 강의 따라가면서, streaming 파트는 다 적용을 했습니다. 소개 탭에서 홈 탭으로 이동 시에 태그목록과 포스트리스트도 skeleton 로딩페이지 잘 적용됩니다. '홈'을 눌렀을때, 기존의 '로딩 되는 중에 아무 변화 없이 사용자를 마냥 기다리게 함'에서 현재의 '로딩 되는 중에 skeleton 보여줌으로써 로딩되고 있음을 나타내줌'으로의 개선은 사용자 경험에 있어서, 정말 효과적인 방법이라고 느꼈습니다. 다만, 문제가 있습니다. '홈' 을 눌러 이동하는 경우말고, 태그 목록에서 나머지 'css'태그, 'git'태그 등등 이를 직접 클릭해서 이동하는 경우에는 streaming 이 적용되지 않습니다. 예를 들어, 홈을 클릭한 상황에서는 skeleton ui가 잘 나타나지만, 그렇게 홈으로 이동한 상황에서 다른 태그(css,Git 등)로 다시 이동하는 상황에서는 적용되지 않고 그대로입니다. 이를 해결하기 위해선 어떻게 해야 하나요?
안녕하세요 강사님 좋은 강의 잘 듣고 있습니다! useSuspenseQuery를 사용 중에 고민이 생겨서 질문 드립니다. 제가 구현하고 있는 프로젝트의 대부분 API는 인증이 필요합니다. refresh token 은 http only 쿠키로 관리하고, access token 은 쿠키에 저장하고, 요청 헤더에 넣어 인증을 하고 있습니다. useSuspenseQuery 를 사용하는 페이지에서 SSR 단계에 401 에러가 발생합니다. 이후 CSR 전환 시에는 정상적으로 데이터를 불러와 화면은 최종적으로 렌더링됩니다. 해당 페이지를 dynamic import 로 CSR 강제하면 401이 발생하지 않습니다. 제가 추정한 원인은 클라이언트 컴포넌트 내부라도 초기 렌더링 시 SSR 패스에서 useSuspenseQuery 가 실행되어 서버에서 API 요청이 발생. 이때 공통 axios 인스턴스가 클라이언트 전용 방식으로 쿠키를 읽어 헤더에 토큰을 주입하도록 구현되어 있어, 서버 환경에서는 토큰을 읽지 못해 401이 발생하는 것으로 판단했습니다. 해결을 위해 시도한 방법 prefetchQuery + useSuspenseQuery 조합으로, prefetchQuery 단계에서 next/headers 를 통해 서버 환경에서 토큰을 읽어 주입하면 401이 사라졌습니다. 다만, 모든 useSuspenseQuery 호출 지점마다 prefetchQuery 를 추가하는 것은 과도하다고 느껴 대안을 모색 중입니다. 질문 사항 왜 SSR에서 실행되나요? 클라이언트 컴포넌트 내부에서 호출하는데도 useSuspenseQuery 가 SSR 렌더링 단계에서 동작하는 메커니즘을 정확히 이해하고 싶습니다. useSuspenseQuery 의 단점/주의점 강의에서는 주 사용을 권장해 주셨는데, 모든 데이터 관리에 useQuery 대신 useSuspenseQuery 사용하는게 좋은건지 실제 서비스에서 고려해야 할 단점이나 주의사항이 궁금합니다. 401을 피하는 권장 패턴 제 환경처럼 서버에서 토큰을 읽지 못해 401이 나는 경우, 제가 시도한 방법 인 prefetchQuery 적용 외에 권장되는 표준 패턴이 있을까요? prefetchQuery 를 여러 곳에서 사용할 때의 리스크 여러 페이지/쿼리에서 prefetchQuery 를 널리 적용하면 TTFB 지연, 직렬화된 캐시의 HTML 페이로드 증가, 중복 호출 등의 문제가 커질 수 있을까요? 그렇다면 적절한 적용 기준이나 완화 전략이 궁금합니다. 그리고 어떤 기준으로 prefetchQuery 를 적용하면 좋을지도 궁금합니다. 문서와 블로그, GPT 등을 찾아봤지만 명확히 정리하기 어렵고, 제가 질문을 드릴 수 있는 최고 전문가라고 생각하여 의견을 여쭙니다. 긴글 읽어주셔서 감사합니다! 아래 에러가 발생하는 예시 코드 첨부 드립니다. (APage를 CSR로 강제하면 에러 미발생) import Spinner from "@/components/common/spinner/Spinner"; import A from "@/components/pages/A"; import { Suspense } from "react"; import { ErrorBoundary } from "react-error-boundary"; interface APageProps { params: { id: string; }; } export default async function APage({ params, }: APageProps) { const { id } = params; const parsedId = parseInt(id); return ( <ErrorBoundary fallback={<div>에러가 발생했습니다</div>}> <Suspense fallback={<Spinner fullscreen />}> <A id={parsedId} /> </Suspense> </ErrorBoundary> ); } "use client"; import { useGetAList } from "@/api/A/queries/useGetAList"; interface AProps { id: number; } export default function A ({ id }: AProps) { const { data: probiomeList } = useGetAList(id); // 생략 import { queryKeys } from "@/constants/queryKeys"; import { UseSuspenseQueryCustomOptions } from "@/types"; import { useSuspenseQuery } from "@tanstack/react-query"; import { getAList } from "../A"; import { AList } from "@/types/A"; export function useGetAList( id: number, queryOptions?: UseSuspenseQueryCustomOptions<AList> ) { return useSuspenseQuery({ queryFn: () => getAList(id), queryKey: [ queryKeys.A.BASE, queryKeys.A.GET_A_LIST, id, ], ...queryOptions, }); }
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!
안녕하세요. 강의 잘 보고 있습니다. 웹 페이지 중 List영역의 검색창에 단어를 입럭할 때 마다 getAnalyzed() 함수가 호출되는 이유가 궁금합니다. 저의 부족한 실력으로나마 추측을 했을 때, 검색창에 해당하는<input>태그에 입력이 발생할 때 마다 search라는 내부 state의 값이 바뀌게 되어 랜더링이 다시 진행되고, 이에따라 getAnalyzed()가 실행되는 것 같습니다. 답변 기다리겠습니다. 감사합니다!
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
remark-gfm 설치 이후 모든 css 가 망가지고 글자와 이미지만 렌더링 되는데 뭐가 문제일까요? global css 에서 import 한것도 아니고 영상과 같이 Plugin 으로 했어요. next-mdx-remote 깃헙 보니까 업데이트도 1년 지났고 버그 로그 많던데 그거 때문이려나요? https://github.com/hashicorp/next-mdx-remote next 공식문서에서도 next-mdx-remote 는 더이상 없고 next-mdx-remote-client 만 있던데 그거 쓰면 되는걸까요?
