새 강의 구매 할인 어떻게 진행하면 되는건가여ㅛ?방법을 몰라서 문의드립니다.,

7-1 서버 액션 강의를 수강하는 중page.tsx:75 Server Error: Route "/book/[id]" used params.id. params should be awaited before using its properties.라는 문구와 함께 book > [id] 폴더의 page.tsx에서 404 오류가 발생하여 화면이 보여지지 않아 해결을 위해 다양한 시도를 해보던 중 해당 강의의 예제 코드(section7 - chapter1)를 가져와 사용했더니  (with-searchbar) > error.tsx에서(0 , util_delay__WEBPACK_IMPORTED_MODULE_3__.delay) is not a function Error위 와 같은 오류가 뜹니다. 어떻게 해결해야할까요?

안녕하세요 섹션4의 next-auth 를 수강하고있습니다. next-auth를 사용하는 이유가 무엇인가요?보통 백엔드에서 로그인 기능을 구현하는 것이 일반적이라고 알고 있습니다.next-auth는 백엔드가 로그인 기능을 구현하지 않았을 때 사용하는 것인가요? 아니면 이미 백엔드에서 구현한 로그인 API를 사용하기 위해서도 next-auth를 사용하는 경우가 있나요?

안녕하세요! Next 강좌를 보던 중 헷갈리는게 있어 질문을 올리게 되었습니다!다름이아니라, 현재 next15에서 getServerSideProps 등이 사라진걸로 알고있는데 그럼 서버사이드 렌더링을 서버 컴포넌트로 대체하는건지 여쭤보려고 합니다!서버사이드 렌더링과 서버 컴포넌트는 다른 개념이라고 알고있는데 결국 서버사이드 렌더링을 서버 컴포넌트를 이용해서 구현하는 것인지,, 그게 궁금합니다!

안녕하세요,혹시 최초 프로젝트 생성할때, nextjs15버전으로 설정되었는데 괜찮을까요?14로 다운그레이드 해야할까요?

회원가입후 회원가입완료되면 자동으로 메인페이지 이동해야 하는데, 라이디렉트가 안되고 있습니다.db는 확인해보니 제대로 전송되고 있고요.데이터 또한 정상적으로 200 떠서 넘김 처리한거 같은데 뭐가 말썽인지 모르겠습니다.기존꺼 듣다가 15로 업데이트 해서 패키지로 기존에 싹다 날리고, npm i로 다시 설치 했습니다. 그래도 안되서 문의드려요.1. env, 2.handler, 3.browser, 4.https, 5.auth 6.기타 컴포넌트 그대로 복사해서 붙여놨는데도 문제가있네요.그리고 추가로 가입하기 버튼후 새로고침 안하면 계속 대기중으로 표시되는것 같습니다.회원가입 시 프론트서버  회원가입 시 백엔드 서버(npm run start:dev)  회원가입시 브라우저콘솔( 이부분은 확인해보니 매우느리게 status가 200으로 처리가 되었네요) 확인사항: 방금 https://github.com/ZeroCho/next-app-router-15 으로 그대로 zip파일열어서 그대로 실행시켜 봤는데 제 코드랑 같은 현상이 일어나는걸로 봐서는 백엔드 혹은 백엔드와 상호작용에서 뭔가 문제가 있는것 같은데 혹시 문제해결을 알수있을까요?     *추가로 새로보시는 분들은 상관없는데,기존에 보시다가 변경되신 분들은 지금 강의 너무 혼란스럽습니다. 진행자 입장에서는 크게 변한게 없다고 하겠지만, 시청하는 입장에서는 패키지 버전부터, 기타 등등 이 바꼈고, 이해안가는 부분만 해당 강의를 시청할려고 다시 듣는데 기존꺼랑 새로운거랑 그냥 아예 섞여버려서 강의가 가독성이 지금 너무 떨어지고있습니다. 인트로부분에 15버전수정은 15버전이라고 기재한다고 했는데, 그것도 일부분만 하고 나머지도 슬쩍 변경이 됬는데, 아예 기존것처럼 해놔서 더 혼동이 오네요. 차라리 업데이트를 한번에 하시지 왜 진행도중에 하시는지 ..조금 불편합니다.. 나중에 참고해주시면 감사하겠습니다.

antd 편해서 적용하려는데 문제없나요?styled component 문제있다하셔서 css module로 커스텀하려는데 인라인 스타일로 커스텀하면되나요?

한입 잘라먹는 NEXT.JS 강좌 풀라우트 캐시 2 4분 30초 쯤에Suspense 를 사용하여 next run build 를 하는 과정이 있습니다그런데  Type error: Type '{ searchParams: { q?: string | undefined; }; }' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 32 | 33 | // Check the prop type of the entry function> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) {계속 이런 에러가 발생해서 구글링 해서 찾아보면 components 및 해당 app 폴더 안에 중첩되는 page.tsx 나 layout.tsx 가 존재하면 이러한 에러가 발생할수도 있다고 하여 각 폴더 마다 파일명을 변경하고 계속 빌드를 시도했지만 에러문구는 해결이 되지않고 있네요...위의 사진은 제가 현재 문제가 발생하고 있는 프로젝트의 전체 폴더 및 파일 구조입니다.어디가 문제일까요...ㅠ 답변 부탁드리겠습니다.

안녕하세요 강사님 좋은 강의 감사드립니다. 몇 가지 헷갈리는 점이 있어 질문드립니다. React (CSR)에서는 js Bundle시 요청 페이지 뿐만 아니라 모든 페이지의 자바스크립트 파일과 컴포넌트들을 불러오는 반면, Next (SSR)에서는 js Bundle시 모든 페이지가 아닌 요청페이지의 파일과 컴포넌트들을 불러온다.제가 이해한 게 맞을까요?2. 프리 페칭 시점은 js bundle후 -> 페이지에 접속한 후 -> "프리페칭" 이 시점이 맞을까요?(프리페칭 시점에 현재 페이지에서 이동할 수 있는 모든 페이지들의 자바스크립트를 사전에 불러온다.)3. next에서 js bundle시 요청페이지의 파일을 불러온다고 했는데, 요청페이지의 파일은 _app.tsx를 기준으로 하나요?

안녕하세요. 수강생 입니다. 좋은 강의 잘 수강하면서 열심히 공부하고 있습니다.노션 페이지 내용 관련으로 문의드립니다.[입문] 시작은 프리캠프 - 섹션 3 CSS의 기본과 싸이월드 실습 1CSS 사용방법 3가지 예시 이미지 중 해당 내용들에 대한 이미지가 이상해문의 남깁니다. 감사합니다. 

[입문] 시작은 프리캠프 - 섹션 2 HTML과 기술스택 이해하기 노션 페이지 내용 중 종속태그 예시 부분의 이미지에 태그 내용은 없고 글자만 표기되어 있습니다. 이 부분이 오류인지 확인 부탁드립니다. 

강의를 듣다가 궁금한 점이 생겨서 질문드립니다.브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [Creating a Supabase client for SSR](https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client)@supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다.클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근 서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요..import { getTodos as getTodosClient } from '@/apis/todos'; import { getTodos as getTodosServer } from '@/actions/todos'; export default async function page() { const todos = await getTodos...(); } // todos.ts import { createBrowserSideClient } from "@/lib/client/supabase"; export const getTodos = async() => { const supabase = await createBrowserSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }// todos.action.ts import { createServerSideClient } from "@/lib/server/supabase"; export const getTodos = async() => { const supabase = await createServerSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }

해당 강의에서 선생님이 설명해주시기로는,페이지라우터와 앱라우터의 차이로 인해 앱 라우터 버전에서는 리퀘스트 메모이제이션이 생겼다고 하셨습니다. 페이지라우터에서는, 트리의 최상단에서 api요청이 발생한다음에 해당 결과값을 각 컴포넌트에 나눠주는 구조이고, 앱 라우터는 모든 서버컴포넌트가 각각 api를 호출해야하는 구조라고 하셧는데, 제가 테스트 해본결과, 서버컴포넌트 끼리도 props로 데이터를 주고받을 수 있는것 같습니다. 그래서 햇갈리는 부분이 존재하는데요.  import "./globals.css"; import Link from "next/link"; import style from "./layout.module.css"; import { BookData } from "@/types"; function InnerFooter({ books }: { books: BookData[] }) { return <>{books[0].author}</>; } async function Footer() { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book` ); if (!response.ok) { return <footer>제작 @winterlood</footer>; } const books: BookData[] = await response.json(); const bookCount = books.length; return ( <footer> <footer>제작 @winterlood</footer> <div>{bookCount}개의 책이 존재함</div> <InnerFooter books={books} /> </footer> ); } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <div className={style.container}> <header> <Link href={"/"}>📚 ONEBITE BOOKS</Link> </header> <main>{children}</main> <Footer /> </div> </body> </html> ); } 제가 테스트 한 코드에서는 Footer 컴포넌트가 내부적으로 InnerFooter 컴포넌트를 호출하면서 데이터를 넘겨주고 있습니다.  선생님이 설명하신 부분이 제가 이해한 부분과는 다른걸까요?

문의드립니다.

주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요?그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요?이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.

기존에 프론트엔드 강의 수강생들에 대한 혜택은 없는건가요?? 거기는 이제 업데이트 안되는건가요?? 아 너무한데.....

안녕하세요!제가 강의를 모두 수강하고 프로젝트에서 리액트 쿼리를 통해 SSR을 적용하려고 하고 있습니다. 아래 코드는 fetchAPISever 함수를 통해 백엔드 api로부터 데이터를 요청하는 함수입니다. 이때fetchAPIsever 함수는 next/header의 cookies()를 통해 사용자의 토큰이 있으면 토큰을 넣어서 api를 요청하는 함수입니다.export const getBestAndPendingReviews = async (): Promise<ReviewePageResponse> => { const res = await fetchAPIServer('/api/review', 'GET'); if (res.code === 'SUCCESS') { return res.result; } throw new Error( `리뷰 페이지 데이터 불러오기 실패 ${res.code}-${res.message}`, ); }; 아래 코드는 리뷰 페이지에서 서버 사이드 렌더링으로 보여주기 위해 리액트 쿼리로 Hydration을 적용한 코드입니다.// src\app\reviews\page.tsx import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import ReviewDashboard from './_components/ReviewDashboard'; import { getBestAndPendingReviews } from './_lib/getBestAndPendingReviews'; export default async function ReviewsPage() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['reviews', 'best'], queryFn: getBestAndPendingReviews, }); const dehydrateState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydrateState}> <ReviewDashboard /> </HydrationBoundary> ); } ' <ReviewDashboard/> 컴포넌트에서 UserInfo 컴포넌트를 반환하도록 설정하고 useQuery 훅을 사용하려 했으나, fetchAPIServer 함수에서 next/headers 를 import하고 있어서 클라이언트 컴포넌트에서 사용할 수 없다는 에러가 발생했습니다. 그러면 SSR을 적용하기 위해서는 getQueryData를 사용해야하는 걸까요..?import { QueryClient } from '@tanstack/react-query'; import { ReviewePageResponse } from '../_lib/getBestAndPendingReviews'; export default function UserInfo() { const queryClient = new QueryClient(); const reviews = queryClient.getQueryData<ReviewePageResponse>([ 'reviews', 'best', ]); const { total } = reviews!; if (!reviews) return <p>리뷰가 없습니다.</p>; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; }   또는 useQuery를 쓰되 쿼리 함수를 Promise.Resolve()로 서버에서 전달 받은 데이터를 받는게 나은가 요? 'use client'; import { useQuery } from '@tanstack/react-query'; export default function UserInfo() { const { data: reviews, isLoading } = useQuery({ queryKey: ['reviews', 'best'], queryFn: () => Promise.resolve(), // 서버 데이터 재활용 }); if (isLoading) return <p>Loading...</p>; if (!reviews) return <p>리뷰가 없습니다.</p>; const { total } = reviews!; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; }

강사님 안녕하세요! 강의 수강 후 개인 프로젝트 진행중인데 페러렐 라우트 부분에서 막혀 질문남깁니다ㅜㅠ..default.tsx는 강의에서 진행해주신대로 return null;을 넣었습니다. (.next 캐쉬도 지웠습니다)// 폴더구조 app/ ├──(afterLogin) │ ├── _component │ │ ├── Header.tsx // header 컴포넌트 │ ├── @message │ │ ├── page.tsx │ │ ├── default.tsx │ ├── @modal │ │ ├── //...compose/[username] 등 폴더 │ │ ├── default.tsx │ ├── home │ │ ├── page.tsx // home 컴포넌트 │ ├── default.tsx │ ├── layout.tsx │ │ ├──(beforeLogin) │ ├── page.tsx │ ├── layout.tsx ├── layout.tsx // (afterLogin)/layout.tsx import { ReactNode } from "react"; import Header from '@/app/(afterLogin)/_component/Header'; type Props = {children: ReactNode, modal: ReactNode, message: ReactNode;}; export default function AfterLoginLayout({children,modal,message,}: Props) { return ( <div className="wrap"> <Header /> <div className="container">{children}</div> <div className="chatting">{message}</div> {modal} </div> ); }해당 이미지와 같이 layout에서 header/{children}/{message}/{modal}을 띄우고 싶은데 message부분이 나오고 있지 않습니다..! (그래서 afterLogin의 layout.tsx와 같은 상위요소에 default를 만들어도 똑같더라구요..)<질문>1. 제가 폴더구조를 잘못 짠 걸까요..?2. (afterLogin)/@message/default.tsx(default.tsx에서 @message/page.tsx를 import해서 진행해도 될까요? 요런식으로 하면 잘 노출이 됩니다..!)import Message from './page'; export default function Default() { return <Message /> }3. 아니면 header처럼 컴포넌트 형식으로 메시지창만 만든다음 onClick되면 -> 인터셉팅으로 가로채는것(/message/page.tsx)이 좋을까요?조언 부탁드리겠습니다..!! ĭ˄ĭ

데이터 캐시 설정을 force-cache 로 했을 때 이걸 갱신하기 위한 방법으로 revalidate 옵션을 주거나 revalidateTag, revalidatePath 등이 있다고 하셨는데요.그러면 RequestMemoization에 의해서 캐싱된 데이터는 브라우저 새로고침 등을 하면 다시 fetch 하면서 갱신이 되는건가요?RequestMemoization 에 의해서 캐싱된 데이터는 언제 갱신되는지 궁금합니다. 그런데 제가 이해한 바로는 유저가 처음 브라우저를 통해 애플리케이션에 접근해서 해당 url 에서 요청을 보냈을 때 특정 데이터를 페칭하는 함수가 여러 컴포넌트에 있어서 그 데이터를 불러오기 위한 요청을 한 번만 함으로써 서버에 요청이 가는 것을 줄여주는것이 RequestMemoization 이라고 저는 이해를 했는데요. 어차피 처음에 같은 데이터를 보여주기 위해 여러 번의 요청을 하는 것은 불필요한 네트워크를 타게 되고 성능상에 좋지 않으니까요.이런 경우라면 사실 RequestMemoization 은 캐싱된 데이터를 갱신할 필요가 없을 수도 있겠다는 생각이 듭니다.그래서 제로초님이 별다른 언급이 없으셨나? 하는 생각도 드네요. 감사합니다.

next.js 15 로 따라가면서 진행 중인데 리액트 쿼리를 설치하려고 하니 리액트19 가 아직 안정적이지 않아서 npm 설치할 때 충돌이 생긴다고 에러가 뜨는 것 같습니다.npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: z-com@0.1.0npm ERR! Found: react@19.0.0-rc-66855b96-20241106npm ERR! node_modules/reactnpm ERR! react@"19.0.0-rc-66855b96-20241106" from the root projectnpm ERR!npm ERR! Could not resolve dependency:npm ERR! peer react@"^18 || ^19" from @tanstack/react-query@5.62.7npm ERR! node_modules/@tanstack/react-querynpm ERR! @tanstack/react-query@"*" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.-------리액트 19 안정화 버전으로 업데이트 진행했습니다! 그랬더니 next 와 리액트19 사이에 에러가 발생해서 next 도 latest 로 업데이트 해주고 리액트 쿼리를 설치하니까 되네요!이 방법이 맞는지는 모르겠지만 일단 이렇게도 되긴 합니다!