안녕하세요 선생님~ 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" } }
처음에 인덱스 페이지는 정적 페이지인데 그 안에 있는 useSearchParams 훅을 사용해서 오류가 난 걸 해결했잖아요 근데 그 후 빌드를 실행하고 결과를 보니 not found 페이지 외에는 다 동적 페이지로 나오는데 그럼 인덱스 페이지는 정적 페이지인 건가요 동적 페이지인 건가요?
16분 그림을 기준으로 초기 접속 시(SSR방식) : JS번들링(html 렌더링)하고 hydration으로 상호작용이 가능한 페이지로 변환 페이지 이동 시(CSR방식) : 브라우저가 서버에게 별도의 페이지를 추가로 요청하지않고 js를 실행해서 컴포넌트를 교체 뒤에 나오는 섹션의 데이터페칭과 프리페칭에 관해 궁금합니다. SSR에서의 데이터 페칭은 서버가 접속요청을 받고 백엔드 서버로부터 API를 주고받고 JS를 실행해서 렌더링된 HTML을 브라우저에 렌더링하는 것으로 알고 있는데 페이지 이동시에는 CSR방식으로 처리된다고 하셔서 이럴때는 브라우저에 렌더링 후에 데이터페칭을 하는것인지 궁금합니다. 위의 질문과 유사한데 프리페칭이 현재 페이지에 걸려있는 링크들에 대해서 JS번들링을 미리 가져오는것으로 알고있습니다. 그러면 이것들도 데이터 페칭되지 않은 해당 페이지의 리액트 컴포넌트들만을 가져오는 것인가요?
안녕하세요 제로초님. 강의 잘 보고 있습니다. <img src={ photo.link } alt={ photo.Post ?.content} /> <div className={style.image} style={{backgroundImage: `url(${ photo.link })`}} /> 여기서 css를 보니 img에 display none을 주고 div에 style의 bg로 이미지를 주셨던데 왜 이렇게 하신건지 특별한 이유가 있나요? 궁금합니다.
병렬 라우팅에 문제가 있는 거 같아 문의 드립니다. 강의 그대로 패러렐 라우트, 인터셉터 라우트까지 모두 따라했었는데, "Application error: a client-side exception has occurred (see the browser console for more information)." 브라우저에 이런 에러가 뜨면서, 콘솔창에는 아래와 같이 에러가 뜨더라구요. app-index.js:33 Warning: Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside Router , follow the stack trace as described in https://reactjs.org/link/setstate-in-render at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11) window.console.error @ app-index.js:33 Show 1 more frame Show lessUnderstand this error react-dom.development.js:9126 Uncaught TypeError: initialTree is not iterable at applyPatch (apply-router-state-patch-to-tree.js:17:53) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:74:30) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30) at eval (navigate-reducer.js:142:88)Understand this error app-index.js:33 The above error occurred in the <Router> component: at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11) React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler. 그래서 어디서 난 에러인지 추리려고 인터셉터 라우트 부분은 아예 빼버리고, 패러랠 라우트 부분으로 확인해보는데, 패러랠 라우트 부분부터 아예 에러가 나서 이것이 문제인 거 같더라구요. { "name": "z-com", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "classnames": "^2.5.1", "dayjs": "^1.11.13", "next": "14.2.11", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.20", "eslint": "^8", "eslint-config-next": "14.2.11", "postcss": "^8.4.47", "tailwindcss": "^3.4.12", "typescript": "^5" } } package.json과 디렉토리 구조는 이런 상태이구요. @modal/compose/tweet/page.tsx @modal/compose/tweet/modal.module.css @modal/default.tsx 이 세 파일은 깃헙 ch2-2 에 나온대로 그대로 적었습니다. import {ReactNode} from "react"; import style from '@/app/(afterLogin)/layout.module.css'; import Link from "next/link"; import Image from "next/image"; import ZLogo from '../../../public/zlogo.png'; import NavMenu from "@/app/(afterLogin)/_component/NavMenu"; import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; // import RightSearchZone from "@/app/(afterLogin)/_component/RightSearchZone"; type Props = { children: ReactNode, modal: ReactNode } export default function AfterLoginLayout({ children, modal }: Props) { return ( <div className={style.container}> <header className={style.leftSectionWrapper}> <section className={style.leftSection}> <div className={style.leftSectionFixed}> <Link className={style.logo} href="/home"> <div className={style.logoPill}> <Image src={ZLogo} alt="z.com로고" width={40} height={40} /> </div> </Link> <nav> <ul> <NavMenu /> </ul> <Link href="/compose/tweet" className={style.postButton}> <span>게시하기dd</span> {/* <svg viewBox="0 0 24 24" aria-hidden="true" className="r-jwli3a r-4qtqp9 r-yyyyoo r-1472mwg r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp"><g><path d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"></path></g></svg> */} </Link> </nav> <LogoutButton /> </div> </section> </header> <div className={style.rightSectionWrapper}> <div className={style.rightSectionInner}> <main className={style.main}>{children}</main> <section className={style.rightSection}> {/* <RightSearchZone /> */} <TrendSection /> <div className={style.followRecommend}> <h3>팔로우 추천</h3> <FollowRecommend /> <FollowRecommend /> <FollowRecommend /> </div> </section> </div> </div> {modal} </div> ) } layout.tsx도 위에 코드와 같이 거의 그대로 적었구요. 참고로 layout.tsx에서 console.log(modal) 했을 때, undefined 뜹니다. 근데 또 explore로 이동한 뒤 게시하기 버튼을 누르면 modal이 뜹니다. 이것 저것 다해보다가 도저히 안풀려서 문의드립니다. 제가 어디서 놓친 걸까요...
$ npm run build > instagram-clone@0.1.0 build > next build ▲ Next.js 14.2.12 - Environments: .env Creating an optimized production build ... ✓ Compiled successfully Linting and checking validity of types .Failed to compile. Linting and checking validity of types ...next/types/app/page.ts:8:13 Type error: Type 'OmitWithTag<typeof import("D:/Study/React/next/Supabase/instagram-clone/app/page"), "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | ... 6 more ... | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'. Property 'matadata' is incompatible with index signature. Type 'Metadata' is not assignable to type 'never'. 6 | 7 | // Check that the entry is a valid entry > 8 | checkFields<Diff<{ | ^ 9 | default: Function 10 | config?: {} 11 | generateStaticParams?: Function 빌드할때 오류뜹니다 .next 안에 있는 오류인데 지웠다 다시 해도 똑같아요 어떻게 해야 할까요??
Next.js에서는 기본적으로 제공하는 빌트인 Image 컴포넌트가 있음에도 불구하고, 강의에서는 일반 HTML img 태그를 사용하고 있습니다. Next.js의 Image 컴포넌트는 이미지 최적화와 같은 여러 이점을 제공하는 것으로 알고 있는데, 왜 이를 사용하지 않고 img 태그를 선택했는지 궁금합니다. 이에 대한 이유나 특별한 상황이 있다면 설명해 주시면 감사하겠습니다.
처음 배울 때에는 브라우저에 요청이 들어올 때 기본적으로 SSR 방식으로 사전 렌더링이 된 후, 하이드레이션 작용이 일어나 그 후 CSR 방식으로 작동된다고 알고 있습니다. 질문하기 쉽게 / 경로를 보여주는 컴포넌트를 Home, book/:id 경로를 보여주는 컴포넌트를 BookDetail 라고 표기하겠습니다. Home 컴포넌트에 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 하고, BookDetail 컴포넌트도 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 진행 할 수 있도록 둘다 설정해 놓았을 때, 처음 HOME 컴포넌트 접속시 getServerSideProps 메서드가 실행되고 BookDetail 로 이동시 getServerSideProps 도 메서드도 실행됩니다. getServerSideProps 메서드는 사전 랜더링 때 실행이 되는 걸로 알고 있는데, 기존에 Next.js 랜더링 방식은 사전 렌더링 후, 페이지 이동은 CSR 로 진행된다고 배웠습니다. 그렇다면 BookDetail 로 이동시 CSR 방식으로 랜더링 된다면 , BookDetail 의 getServerSideProps 메서드는 실행되지 않아야 하는게 아닌가요 ?
안녕하세요 제로초님 강의를 듣다가 문득 궁금한점이 있어서 질문드립니다. 현재 폴더 구조가 app하위에 (afterLogin) 폴더와 (beforeLogin) 폴더가 있는데, 지금 강의에서는 당연한듯이 beforeLogin 폴더의 layout이 뜨고있는데요, 왜 그런건지 궁금합니다. 현재 단계에서는 뭔가 로그인을 했다는 조건같은걸 아직 작성하지 않은것 같아서요 정리하자면 현재 localhost:3000 의 기본 페이지가 afterlogin 폴더의 layout이 아니라 beforeloign의 layout이 뜨는 이유가 궁금합니다.
안녕하세요. 강좌 잘 보고 있습니다. 다름이 아니라 vercel 에 onebite-books-server 를 배포하였습니다. 로컬에서는 작동을 확인하였습니다. 첫 화면은 잘 나오는데 /api 폴더로 접근시 화면에 swagger 가출력이 안되고 있네요. ㅠㅠ; vercel 로그는 정상 배포 되었구요. 첫화면은 잘 나옵니다. 혹시 환경변수를 셋팅해야 하는가 해서 검토해 보았지만 필요없으시다고 하셔서 그냥 두었습니다. 에러 메시지는 콘솔창에 Failed to load resource: the server responded with a status of 404 () 이런 메시지가 여러개 출력 중입니다. 확인좀 부탁드립니다. 감사합니다.
16-02-infinite-scroller 강의 중에 이해가 가지 않는 코드가 한줄 있어서 질문드립니다! InfiniteScroll에 pageStart 옵션이 걸려있는데, 이게 어디에 영향을 주는건가요? 초기 페이지 번호라기에는 이 옵션을 999999 처럼 의미 없는 값을 줘도 문제 없이 작동하고 그러네요.. 딱히 의미가 없는 코드 같은데 pageStart라는게 어떤식으로 작동되는건지가 좀 궁금합니다..
