본문 바로가기

전체 글115

[공식문서] 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.
[공식문서] NextJS - Assets, Metadata, and CSS #5 서드파티 JavaScript 서드파티 JavaScript는 서드파티 출처에서 추가되는 모든 스크립트를 가리킵니다. 일반적으로 서드파티 스크립트는 분석, 광고 및 고객 지원 위젯과 같은 새로운 기능을 사이트에 도입하는 데 사용됩니다. 이러한 기능은 처음부터 작성할 필요 없이 사용할 수 있습니다. 서드파티 JavaScript 추가하기 Next.js 페이지에 서드파티 스크립트를 추가하는 방법에 대해 알아보겠습니다. 에디터에서 pages/posts/first-post.js 파일을 열고 다음 줄을 찾아보세요: 메타데이터 외에 가능한 빨리 로드하고 실행해야 하는 스크립트는 일반적으로 페이지의 이 스크립트에는 페이스북 SDK가 포함되어 있으며, 일반적으로 페이스북 소셜 플러그인 및 기타 기능을 도입하는 데 사용됩니다.. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #4 Metadata(메타데이터) 만약 과 같은 페이지의 메타데이터를 수정하려면 어떨까요? 은 First Post ← Back to home ); } http://localhost:3000/posts/first-post에 접속해보세요. 브라우저 탭에는 이제 "First Post"라고 표시될 것입니다. 브라우저의 개발자 도구를 사용하여 에 title 태그가 추가된 것을 볼 수 있을 것입니다. Head 컴포넌트에 대해 더 알아보려면 next/head의 API 참조 문서를 확인하세요. 만약 태그를 사용자 정의하려면(예: lang 속성 추가) pages/_document.js 파일을 생성하여 할 수 있습니다. custom Document 문서를 확인하여 더 알아보세요. 2023. 8. 15.

티스토리툴바