본문 바로가기

리액트61

[공식문서] 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.
[공식문서] NextJS 페이지 간 이동하기 #2 이전 레슨을 계속 진행 중이라면 이 페이지를 건너뛸 수 있습니다. 다음 페이지로 이동하려면 아래 Next 버튼을 클릭하세요. 스타터 코드 다운로드 (선택 사항) 이전 레슨을 진행 중이 아니라면 아래에서 이 레슨의 스타터 코드를 다운로드하고 설치하여 실행할 수 있습니다. 이를 통해 nextjs-blog 디렉토리가 설정되며, 이전 레슨의 결과와 동일하게 설정됩니다. 다시 말하자면, 이전 레슨을 방금 마친 경우에는 이 작업이 필요하지 않습니다. npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter" 그런.. 2023. 8. 14.
[공식문서] NextJS 페이지 간 이동하기 #1 지금까지 만든 Next.js 앱은 한 페이지만 가지고 있습니다. 웹사이트와 웹 애플리케이션은 일반적으로 여러 다른 페이지를 가지고 있습니다. 이제 어떻게 애플리케이션에 더 많은 페이지를 추가하는지 알아보겠습니다. 이 레슨에서 다음을 배우게 될 것입니다. 통합된 파일 시스템 라우팅을 사용하여 새 페이지 만들기. 링크(Link) 컴포넌트를 사용하여 페이지 간 클라이언트 측 탐색을 활성화하는 방법 배우기. 코드 분할과 프리페칭에 대한 내장된 지원 알아보기. Next.js 라우팅에 대한 자세한 문서가 필요하다면 라우팅 문서를 확인해보세요. 2023. 8. 14.
[공식문서] Next.js 앱 만들기 #3 페이지 편집하기 시작 페이지를 편집해 보겠습니다. 먼저, Next.js 개발 서버가 여전히 실행 중인지 확인하세요. 텍스트 편집기를 사용하여 pages/index.js 파일을 열어보세요. 태그 아래에 있는 "Welcome to"라는 텍스트를 찾아 "Learn"으로 변경해보세요. 파일을 저장하세요. 파일을 저장하는 즉시 브라우저가 새 텍스트로 페이지를 자동으로 업데이트 합니다. Next.js 개발 서버에는 빠른 갱신(Fast Refresh)이 활성화되어 있습니다. 파일을 변경하면 Next.js가 변경 사항을 브라우저에 거의 즉시 적용합니다. 새로 고침할 필요가 없습니다! 이를 통해 앱을 빠르게 반복하여 개발할 수 있습니다. 다음 단계 : 페이지 생성 잘 하셨습니다. 첫 번째 레슨은 여기까지입니다. 다음 레.. 2023. 8. 14.
[공식문서] Next.js 앱 만들기 #2 설정 먼저 개발 환경이 준비되어 있는지 확인해 봅시다. Node.js가 설치되어 있지 않다면 여기서 설치하세요. Node.js 버전은 10.13 이상이어야 합니다. 이 강좌에서는 텍스트 편집기와 터미널 앱을 사용합니다. Windows를 사용하신다면 Git for Windows를 다운로드하고 함께 제공되는 Git Bash를 사용하는 것을 권장합니다. Git Bash는 이 강좌에서 사용되는 UNIX 특정 명령어를 지원합니다. 또 다른 옵션으로 Windows Subsystem for Linux(WSL)을 사용할 수 있습니다. Next.js 앱 만들기 Next.js 앱을 만들려면 터미널을 열고 원하는 디렉터리로 이동한 다음 다음 명령을 실행하세요. npx create-next-app@latest nextjs-b.. 2023. 8. 14.

티스토리툴바