nextjs/next 14 공식 문서 부시기16 [next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming Loading UI loading.js 파일을 활용해 콘텐츠가 로드되는 동안 서버에서 로딩 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. ※ Instant Loading States 같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 항목을 경계에 자동으로 래핑합니다. Streaming 기존 SSR 의 이해 먼저, 특정 페이지의 모든 데이터를 서버에서 가져옵니다. 그런 다음 서버는 페이지의 HTML을 렌더링합니다. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송됩니다. 상호작용은 없는 사용자 인터페이스는 생성된 HTML 및 CSS를 사용하여 표시됩니다. 마지막으로 React는 hydr.. 2024. 1. 15. [next 14 공식문서 부시기] 2.1 Page & Layout Pages page.js 파일에서 컴포넌트를 구성해 페이지를 정의하고 해당 경로에 맞게 접근할 수 있습니다. 페이지는 기본적으로 Server Components이지만 Client Components로 설정할 수 있습니다. 페이지에서 데이터를 가져올 수 있습니다 데이터 가져오기 ※ 헤더 설정 가능 js 뿐 아니라 js, ts, tsx 형식 사용 가능 Layouts layout.js 파일을 정의해 여러 페이지에서 공유되는 UI 를 구성할수 있습니다. 레이아웃은 상태를 유지하며 다시 렌더링되지 않습니다. 레이아웃은 중첩될 수도 있습니다. children props 를 통해 하위 레이아웃(존재하는 경우) 또는 하위 페이지로 채워집니다. layout.js 및 page.js 파일을 동일한 폴더에 정의할 수 있습니다.. 2024. 1. 13. [next 14 공식문서 부시기] 2. Next.js 라우팅 맛보기 App 라우터 13 버전부터 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components 를 기반으로 구축된 새로운 App Router를 도입했습니다. App Router 는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 pages 디렉토리와 함께 작동하여 점진적인 채택을 허용합니다. Pages Router 문서 참조 기본적으로 앱 내부의 구성 요소는 React Server Components입니다. 이는 성능 최적화에 유리하고 Client Components도 사용할 수 있습니다.App 라우팅 관련 파일 layout : 공통적으로 감싸지는 ui 파일page : 페이지 관련 ui 파일loading : 로딩시 보여질 대체 ui .. 2024. 1. 12. [next 14 공식문서 부시기] 1. 설치 및 시작 Next.js 14 버전 설치 및 시작 필요 조건 Node.js 18.17 버전 이상. 자동 설치 npx create-next-app@latest 설치 옵션 // project name 설정 What is your project named? my-app // TypeScript 사용여부 Would you like to use TypeScript? No / Yes // ESLint 사용여부 Would you like to use ESLint? No / Yes // Tailwind CSS 사용여부 Would you like to use Tailwind CSS? No / Yes // src 디렉토리 사용여부 Would you like to use `src/` directory? No / Yes // app r.. 2024. 1. 11. 이전 1 2 다음
