안녕하세요,수업 잘 듣고 따라가고 있습니다~~!! 다름이 아니라 , 아무래도 graphQL를 이용한것보다 취직하고싶은 회사에서 대부분REST API를 사용하는거같아 혹시 fetch 또는 axios를 사용하는 방법은 강의에 추가할 계획이 없으실까요?그리고 nextjs에서는 axios를 사용하는 대신에 fetch를 사용하는것이 맞을까요?

안녕하세요.프로젝트에서 error.tsx를 띄우는 예시로, 백엔드 서버를 종료하여 데이터를 받아오지 못하게 함으로써 error.tsx가 표시되는 경우를 다루셨습니다. 이때, "백엔드 서버를 종료해서 데이터를 받아오지 못하게 함"을 "페이지가 렌더링되지 못하게 함"으로 이해해도 괜찮은지 궁금합니다.이 질문을 드리게 된 이유는, 프로젝트에서 에러를 처리할 때 error.tsx나 에러 페이지를 띄우는 것 외에도 다양한 방식으로 에러를 처리할 수 있기 때문입니다. 예를 들어, 에러 모달을 띄운다거나, 다른 페이지로 이동시키는 등의 방법도 있습니다. 그래서 error.tsx가 어떤 종류의 에러에 대한 대비책인지 명확히 이해하고 싶습니다.저는 error.tsx가 예상치 못한 500번대 서버 에러와 같은 페이지나 컴포넌트 렌더링 실패를 처리하는 페이지라고 이해하고 있는데, 제 이해가 맞는지 궁금합니다.

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

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)이 좋을까요?조언 부탁드리겠습니다..!! ĭ˄ĭ