본문 바로가기

React74

[공식문서] 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.
[공식문서] NextJS - Assets, Metadata, and CSS #3 Assets(자산) Next.js는 이미지와 같은 정적 에셋을 최상위 public 디렉터리 아래에서 제공할 수 있습니다. public 내부의 파일은 페이지와 유사하게 애플리케이션의 루트에서 참조될 수 있습니다. public 디렉터리는 robots.txt, Google 사이트 인증 및 기타 정적 에셋에도 유용합니다. 정적 파일 제공에 대한 자세한 내용은 정적 파일 제공 문서를 확인하세요. 프로필 사진 다운로드 먼저 ,프로필 사진을 가져오겠습니다. 프로필 사진을 .jpg 형식으로 다운로드하세요(또는 이 파일을 사용하세요). public 디렉터리 안에 images 디렉터리를 생성하세요. 사진을 public/images 디렉터리에 profile.jpg로 저장하세요. 이미지 크기는 약 400px x 400px 정.. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #1 추가한 두 번째 페이지에 현재 스타일이 적용되어 있지 않습니다. 페이지에 스타일을 위한 CSS를 추가해 보겠습니다. Next.js는 CSS와 Sass에 대한 내장 지원을 제공합니다. 이 강좌에서는 CSS를 사용할 것입니다. 이번 강좌에서는 이미지와 같은 정적 자산(asstes), 그리고 태그와 같은 페이지 메타데이터를 Next.js가 어떻게 처리하는지도 배우게 될 것입니다. 이번 강좌에서 배우게 될 내용 이번 강좌에서는 다음과 같은 내용을 배울 것입니다: Next.js에 정적 파일 (이미지 등)을 추가하는 방법. 각 페이지의 안에 들어가는 내용을 사용자 정의하는 방법. CSS Modules을 사용하여 스타일이 적용된 재사용 가능한 React 컴포넌트를 생성하는 방법. pages/_app.js에서 전역 C.. 2023. 8. 15.
[공식문서] NextJS - Assets, Metadata, and CSS #2 이전 강좌를 계속 진행 중이라면, 이 페이지를 건너뛸 수 있습니다. 다음 페이지로 이동하려면 아래 Next 버튼을 클릭하세요. 스타터 코드 다운로드 (선택 사항) 이전 강좌를 계속하지 않는 경우, 아래에서 이번 강좌의 시작 코드를 다운로드하고 설치한 다음 실행할 수 있습니다. 이를 통해 nextjs-blog 디렉터리를 설정하여 이전 강좌의 결과와 동일하게 만들 수 있습니다. 다시 말하지만, 이전 강좌를 완료한 경우에는 이 과정이 필요하지 않습니다. npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/assets-metadata-css-starter" 그런 다음 명.. 2023. 8. 15.
[공식문서] NextJS 페이지 간 이동하기 #5 클라이언트 측 탐색 Link 컴포넌트는 같은 Next.js 앱 내의 두 페이지 간의 클라이언트 측 탐색을 가능하게 합니다. 클라이언트 측 탐색은 페이지 전환을 JavaScript를 사용하여 처리하는 것을 의미하며, 브라우저에 의한 기본적인 탐색보다 빠릅니다. 다음과 같은 간단한 방법으로 이를 확인할 수 있습니다. 브라우저의 개발자 도구를 사용하여 의 배경 CSS 속성을 노란색으로 변경하세요. 링크를 클릭하여 두 페이지 간을 이동하세요. 노란색 배경이 페이지 전환 사이에 유지되는 것을 볼 수 있습니다. 이를 통해 브라우저가 전체 페이지를 로드하지 않으며 클라이언트 측 탐색이 작동함을 알 수 있습니다. 대신에 를 사용한 경우에는 브라우저가 전체 새로 고침을 수행하기 때문에 링크 클릭 시 배경 색상이 지워질 .. 2023. 8. 14.
[공식문서] NextJS 페이지 간 이동하기 #4 링크 컴포넌트 웹 사이트에서 페이지 간에 링크를 걸 때는 HTML 태그를 사용합니다. Next.js에서는 애플리케이션의 페이지 간에 링크를 걸 때 Link 컴포넌트인 next/link를 사용할 수 있습니다. 는 클라이언트 측 탐색을 수행하며, 탐색 동작을 더 세밀하게 제어할 수 있는 프롭(props)을 받을 수 있게 해줍니다. 사용하기 먼저, pages/index.js 파일을 열고 다음과 같이 Link 컴포넌트를 next/link에서 가져옵니다. 파일 상단에 다음 줄을 추가하세요. import Link from 'next/link'; 그런 다음 다음과 같이 보이는 h1태그를 찾습니다. Welcome to Next.js! 그리고 다음과 같이 변경하세요. Read this page! 다음으로, pages/p.. 2023. 8. 14.
[공식문서] NextJS 페이지 간 이동하기 #3 Next.js에서의 페이지들 Next.js에서 페이지는 pages 디렉토리의 파일로 내보낸 React 컴포넌트입니다. 페이지는 파일 이름을 기반으로 경로와 관련됩니다. 예를 들어, 개발 환경에서 : pages/index.js는 / 경로와 관련됩니다. pages/posts/first-post.js는 /posts/first-post 경로와 관련됩니다. 이미 pages/index.js 파일이 있으므로 pages/posts/first-post.js를 만들어 보겠습니다. 새 페이지 만들기 pages 디렉토리 아래에 posts 디렉토리를 생성하세요. posts 디렉토리 안에 first-post.js라는 파일을 만들고 다음 내용으로 채워넣으세요: export default function FirstPost() { r.. 2023. 8. 14.

티스토리툴바