풀 라우트 캐시가 이루어지는 과정을 잘 이해 했는지에 대한 질문이에요! 서버 컴포넌트 이면서 static page 일 경우, 빌드 타임 에 사전 렌더링 후 결과를 풀 라우트 캐시에 저장한다. 추가 요청시 풀 라우트 캐시에 저장된 페이지를 바로 렌더링한다. 클라이언트 컴포넌트 , dynamic page 일 경우 빌드 타임이 아닌 서버에서 사전 렌더링을 진행한다. 추가 요청 시 다시 사전 렌더링한 후 페이지를 렌더링한다. 추가로 풀 라우트 캐시 2 강의에서 Searchbar 컴포넌트는 useSearchParams 사용하고 있는데, 클라이언트 컴포넌트 이면서 동적함수를 쓰고 있어서 dynamic page 에 해당되는걸로 알고있어요. 근데 빌드 타임에 걸리는 이유가 무엇인가요? useSearchParams 같은 경우는 예외적인 걸로 봐야되는 걸까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요! 강의 수강 중 헷갈리는 게 있어 질문 드립니다!! 다름이아니라, 강의 초반에 프로필 페이지가 SSR인 것과 prefetchQuery를 사용하는 것에 이해를 했는데, 왜 하위 컴포넌트인 UserInfo에서 다시 userQuery를 통해 데이터를 가져오는지 모르겠습니다! 서버사이드 환경인 page.tsx에서 데이터를 가져오기 위해 PrefetchQuery를 사용하는 것으로 알고있는데, 그렇다면 UserInfo에서 useQuery를 통해 데이터를 가져오는 것이 아닌 데이터를 props로 넘겨줄 수 있는게 아닌가 싶습니다! 혹시 최상위 page에서 prefetchQuery를 통해 데이터를 먼저 가져와야 그 하위 컴포넌트들 내부의 클라이언트 컴포넌트에서 useQuery를 통해 데이터를 가져올 수 있는건가요? 그렇다면 prefetchQuery없이 클라이언트 컴포넌트에서 userQuery만 사용해도 되나요?
메인화면에서 SSR로 데이터를 받아오도록 구현한 상태입니다. (page router) 데이터가 많아서인지 페이지 접속 시 빈 화면이 출력되는데, 스켈레톤 UI를 적용해봐도 스켈레톤 UI가 표시되지 않습니다. 스켈레톤 UI는 CSR 환경에서만 사용할 수 있는 걸까요? 이런 경우에는 데이터를 CSR로 받아오고, 스켈레톤 UI를 적용하는 게 나을까요?
타입 포함된 버전을 설치한 후에도 타입에러가 계속 생기는데 버전이슈일까요.. "dependencies": { "@ant-design/icons": "^5.5.2", "@apollo/client": "^3.11.9", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "antd": "^5.21.6", "axios": "^1.7.7", "graphql": "^16.9.0", "lodash": "^4.17.21", "next": "12.1.0", "react": "17.0.2", "react-daum-postcode": "^3.2.0", "react-dom": "17.0.2", "react-infinite-scroller": "^1.2.6", "ts-node": "^10.9.2" }, "devDependencies": { "@eslint/js": "^9.18.0", "@graphql-codegen/cli": "^5.0.3", "@graphql-codegen/typescript": "^4.1.2", "@types/node": "17.0.2", "@types/react": "17.0.2", "@types/react-infinite-scroller": "^1.2.5", "eslint": "^9.18.0", "eslint-config-next": "15.1.4", "eslint-config-prettier": "^10.0.1", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.37.4", "globals": "^15.14.0", "prettier": "^3.4.2", "typescript": "^5.7.3", "typescript-eslint": "^8.20.0" "react-infinite-scroller": "^1.2.6", 이고 "@types/react-infinite-scroller": "^1.2.5", 로 되어있습니다. ++ return ( <div style={{ height: '700px', overflow: 'auto' }}> <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={hasMorePosts} loader={ <div className='loader' key='loader'> Loading... </div> } useWindow={false} > {data?.fetchBoards?.map((el) => el ? ( <div key={el._id}> <span style={{ margin: '10px' }}>{el.title}</span> <span style={{ margin: '10px' }}>{el.writer}</span> </div> ) : null, ) ?? []} </InfiniteScroll> </div> ); 1. InfiniteScroll 'InfiniteScroll' cannot be used as a JSX component. Its instance type 'InfiniteScroll' is not a valid JSX element. Property 'refs' is missing in type 'InfiniteScroll' but required in type 'ElementClass' 3. loader Type 'Element' is not assignable to type ReactElement<unknown, string | JSXElementConstructor<any>> Types of property 'key' are incompatible. TYpe 'Key | null' is not assignable to type 'string | null'. Type 'number' is not assignable to type 'string'. 4. {data?.~</div>;})} Type 'void[] | undefined' is not assignable to type 'ReactNode'. 2. {data?.~</div>;})} Type 'void[] | undefined' is not assignable to type 'ReactNode'. (이하 생략) 이런 에러였었는데, 상단에 타입선언 해주고 모두 해결 되었습니다. import React, { ReactElement } from 'react'; declare module 'react-infinite-scroller' { interface InfiniteScrollProps { pageStart?: number; loadMore: () => void; hasMore?: boolean; loader?: ReactElement | null; useWindow?: boolean; children?: React.ReactNode; } export default function InfiniteScroll(props: InfiniteScrollProps): ReactElement; } 모듈이 덜 설치된건지 ㅠㅠ 왜 이런 에러가 생긴지 모르겠네요 ㅠㅠ
선생님 강의 5-3) 9분 10초를 보다가 궁금한 것이 있습니다~ generateStaticParams으로 지정했던 id값이 아닌 4번페이지에 접속했을 때 해당 페이지가 실시간으로 다이나믹하게 페이지가 생성되고 풀라우트캐시에 저장된다고 하셨는데요 풀라우트캐시는 static페이지에서만 동작한다고 알고 있고, [id]컴포넌트에서 fetch함수에 캐싱 옵션으로 'force-cache'을 설정한 것도 아닌데 어떻게 풀라우트 캐시가 동작할 수 있나요??
재게시를 클릭하면 Reposts 부분과 count부분을 수정하고 unShift함수를 사용해서 pages[0]에 글정보를 추가하게 되는데 재게시를 클릭할 때 마다 pages[0]에 {user:{},Original:{}} 부분이 계속 추가되는게 맞나요 ? 인피니트쿼리는 한 페이지당 최대 10개의 객체를 받아오는 것으로 알고있는데 인피니트 쿼리랑은 상관 없는건가요 ?
안녕하세요 강사님 강사님의 내용을 주석으로 남기고 싶어서 내용을 작성하고 저장하여 실행하면 페이지 상태가 무한로딩을 합니다. 이전 시간에 test.tsx 파일을 만들고 _app.tsx 파일에서 header 태그를 생성하는 시간에도 이와 비슷하게 주석을 사용하여 기록하고 저장하여 프로젝트를 실행하면 똑같이 무한로딩을 하게 됩니다. 저와 비슷한 사례가 많이 없어 chatGPT에 질문하여 얻은 답변으로는 node 버전과 관련이 있다고 하여 현재 버전 v20.18.1에서 v18으로 낮추기도 했지만 달라지지 않아 다시 원래 버전으로 돌려 놓은 상태 입니다. 이번이 두번째로 주석만 사용하면 이렇게 나타나는 현상인지 아니면 다른 설정이 필요한 것인지 잘 모르겠습니다.
안녕하세요! 강의 잘 듣고 있습니다! 다름이 아니라, 수강 중 여쭤볼게 있어 질문 드립니다..! 5:44초쯤에 app/api/auth/[...nextauth].ts 의 이 경로 폴더명들은 next-auth를 사용하려면 무조건 저 경로여야할까요? 예를들어, app/api/login/[...nextauth].ts 등 다른 경로는 불가능한가요? 꼭 /api/auth/[...nextauth]의 경로를 바라보도록 설계해야 하는지 궁금합니다!
북 상세페이지에서 모달창이 제대로 작동하지만 다음과 같은 오류가 발생합니다. 왜그런걸까요? Skipping auto-scroll behavior due to position: sticky or position: fixed on element: <dialog class="modal_modal__ocKFE" open>…</dialog>scroll Error Component Stack at InnerScrollAndFocusHandler (layout-router.js:139:9) at ScrollAndFocusHandler (layout-router.js:216:11) at RenderFromTemplateContext (render-from-template-context.js:16:44) at OuterLayoutRouter (layout-router.js:365:11) at body (<anonymous>) at html (<anonymous>) at RootLayout [Server] (<anonymous>) at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9) at HTTPAccessFallbackBoundary (error-boundary.js:98:11) at RedirectErrorBoundary (redirect-boundary.js:75:9) at RedirectBoundary (redirect-boundary.js:83:11) at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9) at HTTPAccessFallbackBoundary (error-boundary.js:98:11) at DevRootHTTPAccessFallbackBoundary (dev-root-http-access-fallback-boundary.js:33:11) at ReactDevOverlay (ReactDevOverlay.js:80:9) at HotReload (hot-reloader-client.js:379:11) at Router (app-router.js:183:11) at ErrorBoundaryHandler (error-boundary.js:120:9) at ErrorBoundary (error-boundary.js:166:11) at AppRouter (app-router.js:563:11) at ServerRoot (app-index.js:145:46) at Root (app-index.js:165:11)
패럴렐 & 인터셉터 라우트 강의를 듣는 중입니다. "/" 경로 였다가 "/book/1" 과 같이 상세페이지 경로로 들어가게 되면 아래 캡쳐와 같이 RootLayout 컴포넌트에 인자값으로 children에는 기존에 인덱스 페이지가 들어가고 modal 인자값으로는 인터셉터된 book 페이지의 값이 들어갈 것입니다. 그런데 이 상태에서 새로고침을 하게 되면 초기에는 인터셉터가 작동하지 않으므로 일반 book 페이지가 children에 들어갈것이고 modal 인자값에는 인터셉터가 작동하지 않는데 어떠한 값이 들어가나요? 인터셉터에 default 페이지가 들어가나요?
book 페이지의 인터셉터 페이지를 만드는 과정이다. 기존 book 페이지에서 인자값을 받고 있기 때문에 인터셉터 페이지에서도 인자값을 받기 위해서 props로 받았지만 인터셉터 페이지가 정상적으로 작동하지 않는다. import BookPage from "@/app/book/[id]/page" export default function Page(props: any) { //기존에 book 페이지에서 받고 있던 프롭스를 그대로 가져와야 해서 any타입으로 받는 것 return ( <div> 가로채기 성공 <BookPage {...props}/> </div>) } book 페이지의 인자 값은 다음과 같다. export default async function Page({ params, }: { params: Promise<{ id: string }>; }) { const resolvedParams = await params; const id = resolvedParams.id; return ( <div className={style.container}> <BookDetail bookId={id} /> <ReviewEditor bookId={id} /> <ReviewList bookId={id} /> </div> ); } 인터셉터 페이지에서 인자값을 props: any가 아니라 다르게 설정해야 하나요?
