Dynamic Page로 설정되는 기준 중에서 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을때가 있다고 말씀해주셨습니다. 그리고 웬만하면 Static Page로 만드는 것이 성능 측면에서 좋다고 하셨습니다. 하지만 예를 들어, 거의 모든 페이지에서 header나 footer 컴포넌트를 공통 컴포넌트로 쓰고있고, 그 컴포넌트에서 쿠키를 통해 어떤 값을 세팅한다면 Static Page는 거의 없을 것으로 판단이 되는데 따로 해결방안이 있을까요? Dynamic Page로 설정되는 기준 중에서 아래와 같이 캐시되지 않는 data fetching을 사용하는 경우가 있다고 하셨는데 async function Comp() { const response = await fetch('...') return <div>...</div> } async function Comp() { const response = await fetch('...', {cache : "no-store"}) return <div>...</div> } 아래와 같이 revalidate로 캐시 옵션이 세팅되었을때는 Static Page로써 적용이 되는 것이지요? 그 이유가 해당 time이 지났을때는 데이터캐시에 있는 값이 stale되었다고 판단이 되어 캐싱되어있는 값을 가져오지않고 새로운 값을 가져오기 때문이라고 보면 되는걸까요? async function Comp() { const response = await fetch('...', { next: { revalidate: 3 } }) return <div>...</div> }
getServerSideProps 함수 내부에서 context.query.q로 데이터를 불러오는데, 이러한 querystring을 활용하는 요청 또한 사전 렌더링으로 처리를 할 수가 있나요? 초기 접속 요청(인덱스 페이지)에서 서버는 유저가 querystring을 입력하기 전까지는 querystring의 값을 모르지 않나요? 어떻게 context.query.q도 사전 렌더링의 SSR 방식으로 처리를 할 수가 있나요?
img 태그를 사용할 때처럼 이미지 사이즈를 따로 작성하지 않고 그 공간의 크기에 따라 자동으로 이미지 사이즈가 적용되는 방법은 없을까요? 예를 들어 화면이 줄어들면 리스트 아이템들도 사이즈가 줄어들어 이미지 사이즈도 자동으로 줄어들게 되는 것처럼 그 부모에 맞춰(이때 부모도 사이즈 고정x) 사이즈가 자동으로 변하도록 하는 방법이 있는지 궁금합니다
안녕하세요 제로초님! 제로초님 강의 보면서 개인 프로젝트 해보고 있는 수강생입니다. 현재 로그인과 회원가입 페이지를 인터셉트와 패러렐 라우트를 이용했는데, (저의 현재 폴더 구조입니다.) app/ ├── layout.tsx ├── page.tsx // 메인 페이지 ├── @modal/ │ ├── (.)login/ │ │ │ └── page.tsx // 로그인 모달 페이지 │ ├── (.)signup/ │ │ │ └── page.tsx // 회원가입 모달 페이지 // 프로필 수정 모달 페이지 │ ├── [...catchAll]/ │ │ └── page.tsx // 모달을 닫기 위한 catch-all 라우트 ├── (auth)/ │ ├── login/ │ │ └── page.tsx // 로그인 페이지 │ ├── signup/ │ │ └── page.tsx // 회원가입 페이지 └── 기타 페이지들... 회원가입이 되면 메인 페이지('/')로 이동하게 했는데 router.push, replace로는 경로는 이동이 되나 모달이 닫히지 않는 문제가 있었습니다. 그래서 catch-all route를 이용해서 특정 경로에 매칭되지 않으면 모달이 닫히도록 null을 반환하였습니다. // catch-all route export default function ModalCatchAll() { console.log('CatchAll triggered'); return null; } 그런데 router.push('/') 메인 홈페이지인 '/' 경로로 이동을 해도 catch-all route가 실행되지 않았는데, 메인 경로 외에 게시글 라우트로 router.push('/foster') 경로를 변경했더니 catch-all route가 실행이 되었습니다. router.back 말고도 push나 replace를 사용하고 싶어서 catch-all route를 사용했는데 메인 홈 경로는 안되고 다른 경로로 이동시킬 때는 catch-all route가 왜 적용되는지 모르겠어서 질문 남깁니다..
현재 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 하나로만, 활용하는게 더 좋은 방식인지도 궁금합니다!!!
