본문 바로가기

Framework63

[공식문서] NextJS - Pre-rendering and Data Fetching #4 두 가지 형태의 사전 렌더링 Next.js에는 두 가지 형태의 사전 렌더링이 있습니다. 정적 생성(Static Generation)과 서버 사이드 렌더링(Server-side Rendering)입니다. 차이는 페이지의 HTML을 언제 생성하는지에 있습니다. 정적 생성(Static Generation)은 빌드 시점에 HTML을 생성하는 사전 렌더링 방식입니다. 이 사전 렌더링된 HTML은 각 요청마다 재사용됩니다. 서버 사이드 렌더링(Server-side Rendering)은 각 요청마다 HTML을 생성하는 사전 렌더링 방식입니다. 개발 모드에서(npm run dev 또는 yarn dev를 실행할 때)는 모든 요청마다 페이지가 사전 렌더링됩니다. 이것은 정적 생성에도 적용되어 개발을 더 쉽게 할 수 있게 .. 2023. 8. 26.
[공식문서] NextJS - Pre-rendering and Data Fetching #3 사전 렌더링 (Pre-rendering) 데이터 가져오기에 대해 이야기하기 전에, Next.js의 가장 중요한 개념 중 하나인 사전 렌더링에 대해 이야기해보겠습니다. 기본적으로 Next.js는 모든 페이지를 사전 렌더링합니다. 이는 Next.js가 모든 페이지의 HTML을 미리 생성한다는 것을 의미합니다. 클라이언트 사이드 JavaScript로 모두 처리하는 것이 아닙니다. 사전 렌더링은 성능과 검색 엔진 최적화에 도움이 될 수 있습니다. 각 생성된 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결됩니다. 브라우저에서 페이지가 로드되면 해당 JavaScript 코드가 실행되어 페이지가 완전히 상호작용 가능해집니다. (이 과정을 hydration 라고 합니다.) 사전 렌더링이 진행되.. 2023. 8. 25.
[공식문서] NextJS - Pre-rendering and Data Fetching #2 이전 레슨을 계속 진행하고 있다면, 이 페이지를 건너 뛸 수 있습니다. 다음 페이지로 이동 하려면 아래 Next 버튼을 클릭하세요. 스타터 코드 다운로드(선택사항) 만약 이전 레슨에서 진행하고 있지 않다면, 아래 명령을 사용하여 이번 레슨의 스타터 코드를 다운로드하고 설치하실 수 있습니다. 이 명령을 실행하면 이전 레슨의 결과와 동일한 nextjs-blog 디렉토리가 설정됩니다. 다시 말하자면, 이전 레슨을 완료한 경우 이 작업은 필요하지 않습니다. npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/data-fetching-starter" 그리고 다.. 2023. 8. 19.
[공식문서] NextJS - Pre-rendering and Data Fetching #1 이번 레슨에서는 블로그를 생성하려고 합니다 (원하는 결과는 여기에서 확인 가능). 하지만 지금까지는 아무런 블로그 콘텐츠도 추가하지 않았습니다. 이 레슨에서는 외부 블로그 데이터를 앱으로 가져오는 방법을 배우게 될 것입니다. 블로그 콘텐츠를 파일 시스템에 저장할 것이지만, 다른 곳(예 : 데이터베이스 또는 Headless CMS)에 저장된 경우에도 작동합니다. 이 레슨에서 배울 내용 이 레슨에서 배우게 될 내용은 다음과 같습니다: Next.jsdml 사전 렌더링 기능 사전 렌더링의 두 가지 형태 : 정적 생성과 서버 사이드 렌더링 데이터를 포함한 정적 생성 및 데이터 없이 정적 생성 getStaticProps 및 이를 사용하여 인덱스 페이지로 외부 블로그 데이터를 가져오는 방법 getStaticProps.. 2023. 8. 19.
[공식문서] NextJS - Assets, Metadata, and CSS #10 스타일링 팁 다음은 도움이 될 수 있는 스타일링 팁입니다. 다음 섹션을 차례로 읽어보세요. 앱에 변경 사항을 가할 필요는 없습니다! 클래스 토글을 위해 clsx 라이브러리 사용하기 clsx는 클래스 이름을 쉽게 토글할 수 있는 간단한 라이브러리입니다. npm install clsx 또는 yarn add clsx를 사용하여 설치할 수 있습니다. 더 자세한 내용은 해당 문서를 참조하시길 바랍니다만, 기본 사용법은 다음과 같습니다: 예를 들어, 'success' 또는 'error'일 수 있는 type을 받는 Alert 컴포넌트를 생성하려고 합니다. 'success'인 경우 텍스트 색상을 녹색으로, 'error'인 경우 텍스트 색상을 빨강으로 표시하고 싶습니다. 먼저 다음과 같이 CSS 모듈(alert.modu.. 2023. 8. 17.
[공식문서] NextJS - Assets, Metadata, and CSS #9 레이아웃 개선하기 지금까지 우리는 개념을 설명하기 위해 최소한의 React 및 CSS 코드만 추가했습니다. 데이터 가져오기에 대한 다음 레슨으로 이동하기 전에 페이지 스타일링 및 코드를 개선해 보겠습니다. components/layout.module.css 업데이트 먼저, components/layout.module.css를 열고 다음과 같이 더 다듬어진 레이아웃 및 프로필 사진 스타일로 내용을 바꾸세요. .container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; } .header { display: flex; flex-direction: column; align-items: center; } .backToHome { margin: 3.. 2023. 8. 17.
[공식문서] NextJS - Assets, Metadata, and CSS #8 전역 스타일(Global Styles) CSS Modules는 컴포넌트 레벨 스타일에 유용합니다. 하지만 모든 페이지에 대해 CSS를 로드하려면 Next.js에서도 지원하고 있습니다. 전역 CSS를 애플리케이션에 로드하려면 pages/_app.js라는 파일을 다음 내용으로 생성하세요: export default function App({ Component, pageProps }) { return ; } _app.js의 기본 내보내기는 모든 페이지를 애플리케이션 내에서 래핑하는 최상위 React 컴포넌트입니다. 이 컴포넌트를 사용하여 페이지 간에 상태를 유지하거나 여기에서처럼 전역 스타일을 추가할 수 있습니다. _app.js 파일에 대해 자세히 알아보세요. 개발 서버 재시작 중요 : pages/_app.j.. 2023. 8. 17.
[공식문서] NextJS - Assets, Metadata, and CSS #7 레이아웃 컴포넌트 만들기 먼저, 모든 페이지에서 공유될 Layout 컴포넌트를 만들어보겠습니다. 먼저 components라는 최상위 디렉토리를 생성하세요. components 디렉토리 내부에 layout.js라는 파일을 다음 내용으로 생성하세요: export default function Layout({ children }) { return {children}; } 그런 다음, pages/posts/first-post.js 파일을 열고 Layout 컴포넌트를 가져오고 가장 바깥쪽 컴포넌트로 사용하세요: import Head from 'next/head'; import Link from 'next/link'; import Layout from '../../components/layout'; export d.. 2023. 8. 16.
[공식문서] NextJS - Assets, Metadata, and CSS #6 CSS 스타일링에 대해 이제 이야기해보겠습니다. http://localhost:3000에 접속하면 이미 index 페이지에 일부 스타일이 적용된 것을 볼 수 있습니다. 파일 구조를 살펴보면 styles라는 폴더가 있고 그 안에 두 가지 CSS 파일이 있는데요: 전역 스타일시트 (globals.css)와 CSS 모듈 (Home.module.css)입니다. 프로젝트에 이러한 파일이 없는 경우 다음 링크에서 스타터 코드를 다운로드할 수 있습니다: npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/assets-metadata-css-starter" CSS 모듈 CSS .. 2023. 8. 15.

티스토리툴바