현재 Next.js Styling 부분까지 시청하였으나, 기존의 사전 렌더링 부분이 이해가 가지 않아 다시 수강한 후 질문드립니다.일단, 제가 정리한 사전 렌더링 과정은 이와 같습니다.유저가 브라우저를 통해 서버에게 초기 접속 요청을 보낸다. 서버는 서버 측에서 리엑트 앱을 실행시켜서 모든 리엑트 앱의 컴포넌트를 HTML로 변환한다.이 변환된 HTML을 브라우저에게 보내준다.변환된 HTML을 받은 브라우저는 HTML을 화면에 렌더링한다. 이때 유저는 완성된 화면을 볼 수 있다. 이렇게 유저가 요청후에 1차적으로 화면에 요소를 볼 수 있게 되는 시간을 FCP(First Contentful Paint)라고 한다.그러나 지금은 html만 브라우저에게 보내진 상태이며, 페이지 이동, 버튼 클릭 등등의 상호작용을 수행하는 자바스크립트 코드는 아직 html에 담겨지지 않은 상태이다.그러므로 유저에게 1차적으로 화면에 렌더링된 이후에 후속으로 서버에서 자바스크립트를 Bundling하여서 브라우저에게 보내준다.브라우저는 이 번들링된 자바스크립트 파일을 실행한 후에 기존에 1차적으로 화면에 렌더링된 html과 자바스크립트의 로직을 연결하게 된다. 이러한 과정을 hydration이라고 한다.유저가 초기 요청부터 hydration 까지 종료된 시간을 TTI(Time To Interact)라고 한다.페이지 이동은 hydration 과정에서 받아온 bundle 자바스크립트 파일을 실행해서 현재 보여지는 컴포넌트를 교체하는 방식으로 CSR과 똑같은 방식으로 처리한다.결론적으로 제가 궁금한 부분은,처음에 html로 변환할때 "jsx 부분만" 변환하나요?아니면 처음에 html로 변환할때 "jsx 부분만" 변환하지 않나요? 처음에 html로 변환할때 next.js의 "모든 Jsx 부분"을 변환하여 브라우저에게 전달하나요?아니면, 처음에 html로 변환할때 next.js의 모든 Jsx 부분이 아니라, "지금 요청한 페이지의 부분의 jsx만" html 변환하여 브라우저에게 전달하나요? hydration이라는 과정에서는 자바스크립트 파일 뿐만 아니라 "스타일 코드나 다양한 이미지 파일, json 파일"도 전달하여 기존에 쏴준 html에 연결시켜 주는 것인가요?아니면 지금 요청한 페이지에 연관된 "자바스크립트만" 번들링해서 hydration을 해주는 것인가요? 저의 질문이 조금 장황할 수도 있을 것 같지만 양해부탁드립니다.

앱 라우터에서 RSC Payload파일은 초기 접속 요청 이후에페이지 이동이나 프리패칭시일때만 서버에서 받아오는걸까요?아니면 초기 접속 요청시에 초기 접속 페이지가 서버 컴포넌트로 되어있으면 초기 접속 요청때도 rsc payload파일을 서버에서 받아오나요?  

안녕하세요. Next에서 Tanstack-query 를 사용하실 때 궁금한게 있어서 질문드립니다.QueryClientProvider를 생성하실 때 아래와 같이 진행하신 다음에 layout.tsx 에서 감싸주고 있는데,QueryClientProvider에 use client를 사용하게 되면 결국 모든 하위 컴포넌트가 클라이언트 컴포넌트가 되는게 아닌가요?즉, layout.tsx 부터 모든 컴포넌트가 전부 클라이언트 컴포넌트로 사용되는게 맞는건가요...?'use client'; import React, { ReactNode, useState } from 'react'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; function RQProvider({ children }: { children: ReactNode }) { const [client] = useState( new QueryClient({ defaultOptions: { // react-query 전역 설정 queries: { refetchOnWindowFocus: false, retryOnMount: true, refetchOnReconnect: false, retry: false, }, }, }), ); return ( <QueryClientProvider client={client}> {children} {/* 개발 모드일때만 데브툴 사용*/} <ReactQueryDevtools initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'} /> </QueryClientProvider> ); } export default RQProvider;  

서버에서 사전렌더링(js 실행)할때 모든 react 컴포넌트들을 html로 변환한다고 하셨는데 서버에서 렌더링할때는 특정 경로에 있는 js만 html으로 렌더링 하는게 아니라 프로젝트의 모든 js코드를 html으로 렌더링하고 js bundle파일만 특정 경로에 있는 js bundle파일을 받아오는게 맞나요?

// auth.ts import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ credentials: { username: { label: "Username", type: "text", placeholder: "jsmith" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); // route.ts export { GET, POST } from "@/auth"; 각종 커뮤니티 글을 보긴했지만,, 해당 에러는 보이지 않아서 문의 남깁니다.  서버쪽 에러는 [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror[auth][cause]: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.authorize (webpack-internal:///(rsc)/./src/auth.ts:31:38) at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:241:39) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:66:24) at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:127:34) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55759 at async eO.execute (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:46527) at async eO.handle (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:57093) at async doRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1345:42) at async cacheEntry.responseCache.get.routeKind (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1555:40) at async DevServer.renderToResponseWithComponentsImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1475:28) at async DevServer.renderPageComponent (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1901:24) at async DevServer.renderToResponseImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1939:32) at async DevServer.pipeImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:914:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/next-server.js:272:17) at async DevServer.handleRequestImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:810:17) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:339:20 at async Span.traceAsyncFn (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/trace/trace.js:154:20) at async DevServer.handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:336:24) at async invokeRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:173:21) at async handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:350:24) at async requestHandlerImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:374:13) at async Server.requestListener (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/start-server.js:141:13)[auth][details]: { "code": "ECONNREFUSED", "provider": "credentials"}이렇게 발생하고 있습니다. 신 버전인 만큼 .env AUTH_SECRET=woong작성 해놨고 .env local 같은 경우는 NEXT_PUBLIC_API_MOCKING=enabledNEXT_PUBLIC_BASE_URL=http://localhost:9090작성해놨습니다. 잘 해결이 안되서 글 남깁니다. 

안녕하세요. NextJS 14 App Router로 개발중인 프로젝트가 있습니다. 사용자 편의성을 위해 페이지네이션 관련 상태값이나 사용자가 검색한 값을 쿼리스트링에 저장하는 훅을 만들어서 훅 내부에서 상태값을 받아 URLSearchParams로 쿼리스트링을 세팅해서 router push를 하거나 usePathname이나 useSearchParmas를 사용해서 쿼리스트링 값을 읽어서 상태값으로 업데이트하고 데이터 페칭을 하고 있습니다.메인 메뉴들 전반적으로 이 훅을 사용중이여서 페이지 컴포넌트에 'use client'를 입력해줘야 하는 상황인데, 그러면 제가 사용자 편의성을 위해 쿼리스트링에 값을 저장하는 방식 때문에 SSR을 사용할 수 없는 상황인지 궁금합니다.그리고 이런 편의성을 제공하면서 SSR을 하려면 다른 방법이 있을까요?

7.4 PlayListCarousel - 1​ 강의의 6분 15초를 보시면,<div className="relative left-[-45px]">부분이 있는데요.left-[-45px]을 해야 화살표가 보이게 되는데, 이게 왜 그런질 모르겠습니다. 근데 제가 질문 드리고싶은 것은, 저 코드가 어떤 원리로 작동되는지가 아닙니다. 이럴때는 스스로 그냥 계속 문서를 참고하든 개발자도구를 참고하든 이해 될때까지 파고드는게 맞는 방법인지 여쭤보고 싶습니다.이것 말고도 제가 어려웠던 부분에 대한 예시를 들자면,1) components 폴더에 저장되는 것들과components/elements 폴더에 저장되는 것들의 차이를 정확히 모르겠음.2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음.3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음.4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음.이런 어려움이 있었습니다. 혹시 공부법 조언 부탁드려도 될까요? 

완강 후 Next로 프로젝트를 만들어 보며 질문 드립니다.제가 쿠키를 활용할 일이 있어 Nest api 요청에 쿠키를 담아 보냈었습니다. 쿠키가 잘 도착 하는 상황은 postman요청, 브라우저에서 nest api 직접 요청Next 페이지 에서는 쿠키가 도착하지 않았습니다. 완강 후 Next에서는 최대한 static하게 만들면서도 동적으로는 소통할 수 있도록 만드는 것이 Next가 추구하는 방향이라 이해 하였고, 최대한 static하게 만들었습니다. 쿠키가 도착하지 않아 한참을 실랑이를 하였는데 생각을 해 보니 서버컴포넌트에서 client로 cookie를 저장 한 다는 것이 말이 되지 않다는 것을 알았습니다. 찾아 보니 미들웨어라는 것이 있었고, 서버에서 쿠키를 내리는 것이 아니라 api응답을 받기 전 미들웨어에서 client에 쿠키를 심는 방법이 있더라구요. 근데 client에서 쿠키를 심더라도 static한 페이지로 만들어진 페이지에서 다음 요청에 쿠키를 서버로 전송하지 않기 때문에 쿠키를 활용해 서버와 뭔가의 소통이 불가능 하다고 느껴졌습니다.제 질문이 이해가 가실지 모르겠지만..Next에서 보통 서버와 쿠키를 활용한 상호작용을 할때 어떤 방식을 통해 하는지궁금합니다.  

 라이트하우스 tbt가 늠어요 fcp와 tti의 사이 시간이라는데 client 컴포넌트도 몇개없는데 왜이럴까요 ?만약 해결하려면 어떻게해야하나요

제가 작년에 구매하여 section 10 정도 까지 듣다가 중단했었는데요,, 그땐 싸이월드만들기 이런 강의가 없던거같은데 강의가 개정된걸까요..? 어디서부터 다시 들어야할지 모르겠네요 ..

  지금 여기까지 구현 했는데이렇게 순서 바꾸기를 해야 되는데 잘안됩니다혹시 원인이나 해결 방법 아시나요?https://okky.kr/questions/1516211그리고 이렇게 데이터가 복잡할 경우 프론트에서 데이터 가공해서 디비로 보내는게 어쩔수 없다고 보시나요 아니면 조금 과잉이라고 보시나요? 그점도 궁금합니다

안녕하세요CSR 경험만 있다보니, 프론트 서버에 로그인한다는 개념이 뭔가 와닿지가 않아서요백엔드 서버에 쿠키로 인증이 되는데, 왜 프론트 서버에 로그인하는게 필요할까요?클라이언트 사이드만 있을 때랑 뭔가 다른 느낌이네요..ㅠ

login버튼을 클릭했을 때 처음에 login페이지에 갔다가 replace로 인해서 i/flow/login으로 갈 때 인터셉팅 라우팅이 적용되어 페러렐 라우트를 사용한 (.)i/flow/login으로 이동하게 되는것 까지 이해하고 적용을 시켰고 이동은 잘 하지만 아래와 같은 에러가 발생합니다.아래는 저의 LoginModal.tsx 코드입니다."use client"; import { useState } from "react"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(); const [password, setPassword] = useState(); const [message, setMessage] = useState(); const router = useRouter(); const onSubmit = () => {}; const onClickClose = () => { router.back(); }; const onChangeId = () => {}; const onChangePassword = () => {}; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } 저의 폴더 구조는 아래와 같습니다. 

AWS에 정적페이지 동적페이지 분리해서 배포했는데 https://backendonline.codebootcamp.co.kr/graphql 이주소로 API 요청하면은 CORS 에러납니다. 해당 주소로 API 요청하는게 잘못된걸까요 본강의에서 ??

안녕하세요, 먼저 좋은 Next.js 강의 해주셔서 정말 감사합니다. 덕분에 개념을 잘 이해할 수 있었습니다.Next.js에서 자체적으로 제공해주는, fetch 메소드의 다양한 캐싱 기능에 대해 매우 강력하다고 느꼈습니다. 실제로, 현재 리액트 생태계에서, 캐싱 기능을 제공해주는 Tanstack-Query를 상당히 많이 사용하는 것으로 알고 있는데, Next.js와 캐싱 기능이 겹쳐 잘 활용하지 않은지 궁금합니다.1. Tanstack Query를 만약 사용한다면, InfiniteScroll 이나, 자체적으로, 제공해주는 로딩, 에러처리 mutation과 같은 강력한 기능을 활용할 수 있다고 보는데, Next.js의 캐싱과, Tanstack Query의 캐싱 기능이 겹쳐, 이 경우에는 어떤 식으로 합리적으로, 판단하고 실제 현업에서는 둘이 같이 사용하는 경우가 많은지 궁금합니다!2. axios.create을 통해, 자체적으로 헤더나 baseUrl를 구성하거나, interceptor를 통해, refreshToken을 관리하는등 유용한 기능을 활용했는데, Next.js Fetch에도 이러한 기능을 제공하는지 궁금합니다!3. fetch와, tanstackQuery를 둘다 활용한다면, 어떠한 기준으로 구분하여, 활용하는지 상당히 궁금합니다, tanstack-query 하나로만, 활용하는게 더 좋은 방식인지도 궁금합니다!!!

깃에서 코드 다운받는데 프리즈마 폴더가 없고 수파베이스에도 아무것도 안올라와있는데 맞나요 ㅠ강의랑 다르게 다운받았는데 폴더가 엄청 많고 프리즈마 파일은 없고 ..어떤걸 열어서 작업해야하나요?

login 시 let setCookie = response.headers.get('Set-Cookie'); 가져오려고 할 때 response.headers에는 뜨는데 samesite 때문에 cookie를 가져올 수 없습니다.  개발자도구에서 samesite 에러 어떻게 해결할 수 있을까요??아래와 같이 수정했는데 같은 오류가 발생합니다. if (setCookie) { const parsed = cookies.parse(setCookie); cookies().set('connect.sid', parsed['connect.sid'], { sameSite: 'None', secure: true }); } 

안녕하세요 강사님 강의를 보면서 따라하는 도중에오타가 없는거같은데 오류가 발생해서 질문드립니다.value값을 onChange 있는곳에 써야하는데 쓰지 않아서 발생하는 문제인거 같은데 해당 오류 때문에 TextArea도 정상적으로 css부분이 적용되지 않습니다.

안녕하세요 선생님~ 2.1 강의 5분 30초부터 질문드립니다!작업 파일에 새로운 폴더를 하나 만들고, 그 폴더를 열어서 선생님과 모든 것을 똑같이 했는데 저는 `npx create-next-app@14 section02`라고 치니까 맨 아래 제가 첨부한 것과 같은 에러가 떴어요! gpt 검색해서 `mkdir C:\Users\wlgp1\AppData\Roaming\npm` 경로를 수동으로 하나 만들고 다시 하니까 터미널에서 "뭐 설치해야 하는데 계속할거냐"고 질문해서 y 눌렀더니 그 다음부터 다시 선생님과 동일하게 타입스크립트 사용할 거냐고 질문이 나왔습니다~ (이후 동일) 문제는 해결되었지만, 무엇이 달라서 선생님과 차이가 난 것인지가 궁금합니다! ```PS C:\workspace\onebite-next> npx create-next-app@14 section02 npm error code ENOENT npm error syscall lstat npm error path C:\Users\wlgp1\AppData\Roaming\npm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\wlgp1\AppData\Roaming\npm' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\wlgp1\AppData\Local\npm-cache_logs\2024-09-30T04_18_06_975Z-debug-0.log```

안녕하세요. 조은님, 강의 잘 듣고 있습니다 :)PPR 적용하기 전에는 서버에 문제가 없었는데, PPR 적용 후 예상치 못한 현상이 발생하여 여러 가지 방법으로 해결해보려고 이것저것 시도하고 있는데 아직 해답이 없네요. PPR 커밋하고 푸쉬한 것을 취소하고 이전 상태로 되돌렸지만, 여전히 에러가 납니다. T_T 지금도 찾아보는 중입니다. 같이 고민해주시면 감사하겠습니다. { "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@types/node": "20.11.17", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "@vercel/analytics": "^1.1.3", "@vercel/postgres": "^0.10.0", "@vercel/speed-insights": "^1.0.9", "geist": "1.2.2", "next": "^14.2.13", "next-mdx-remote": "^4.4.1", "react": "18.2.0", "react-dom": "18.2.0", "sugar-high": "^0.6.0", "typescript": "5.3.3" }, "devDependencies": { "autoprefixer": "^10.4.20", "postcss": "^8.4.35", "tailwindcss": "3.4.13" } }