현재 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을 해주는 것인가요? 저의 질문이 조금 장황할 수도 있을 것 같지만 양해부탁드립니다.
안녕하세요. 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파일을 받아오는게 맞나요?
안녕하세요. NextJS 14 App Router로 개발중인 프로젝트가 있습니다. 사용자 편의성을 위해 페이지네이션 관련 상태값이나 사용자가 검색한 값을 쿼리스트링에 저장하는 훅을 만들어서 훅 내부에서 상태값을 받아 URLSearchParams로 쿼리스트링을 세팅해서 router push를 하거나 usePathname이나 useSearchParmas를 사용해서 쿼리스트링 값을 읽어서 상태값으로 업데이트하고 데이터 페칭을 하고 있습니다. 메인 메뉴들 전반적으로 이 훅을 사용중이여서 페이지 컴포넌트에 'use client'를 입력해줘야 하는 상황인데, 그러면 제가 사용자 편의성을 위해 쿼리스트링에 값을 저장하는 방식 때문에 SSR을 사용할 수 없는 상황인지 궁금합니다. 그리고 이런 편의성을 제공하면서 SSR을 하려면 다른 방법이 있을까요?
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
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에서 보통 서버와 쿠키를 활용한 상호작용을 할때 어떤 방식을 통해 하는지궁금합니다.
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
지금 여기까지 구현 했는데 이렇게 순서 바꾸기를 해야 되는데 잘안됩니다 혹시 원인이나 해결 방법 아시나요? https://okky.kr/questions/1516211 그리고 이렇게 데이터가 복잡할 경우 프론트에서 데이터 가공해서 디비로 보내는게 어쩔수 없다고 보시나요 아니면 조금 과잉이라고 보시나요? 그점도 궁금합니다
안녕하세요, 먼저 좋은 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 }); }
안녕하세요 선생님~ 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" } }
