본문 바로가기

Dev/Next JS76

[공식문서] 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.
[공식문서] Next.js 앱 만들기 #1 React를 사용하여 처음부터 완전한 웹 애플리케이션을 구축하려면 고려해야 할 중요한 세부 사항이 많이 있습니다. 웹팩과 같은 번들러를 사용하여 코드를 번들링하고 Babel과 같은 컴파일러를 사용하여 변환해야 합니다. 코드 분할과 같은 제품 최적화를 수행해야 합니다. 성능과 SEO를 위해 일부 페이지를 정적으로 사전 렌더링하거나 서버 사이드 렌더링 또는 클라이언트 사이드 렌더링을 사용할 수 있습니다. 리액트 앱을 데이터 저장소에 연결하려면 일부 서버 측 코드를 작성해야 할 수도 있습니다. 이러한 문제들을 해결해 주는 프레임워크가 필요합니다. 그러나 이러한 프레임워크는 적절한 추상화 수준을 가져야 합니다. 그렇지 않으면 유용하지 않을 것입니다. 또한 코드를 작성하는 동안 훌륭한 "개발자 경험"을 제공해야 .. 2023. 8. 14.
[공식문서] Next.js의 작동 방식 #11 다음 단계 Next.js Foundations 강좌를 완료하신 것을 축하드립니다! Next.js를 계속 학습하려면, 메인 기능을 소개하는 튜토리얼을 통해 첫 번째 Next.js 앱을 만들어 보시기를 권장합니다. 또한 문서를 확인하고 다양한 예제 목록을 살펴보실 수 있습니다. 대화에 참여하세요 궁금한 사항이 있으면 Discord나 Github Discussions 커뮤니티에서 질문하실 수 있습니다. 2023. 8. 14.
[공식문서] Next.js의 작동 방식 #10 네트워크란 무엇인가? 배포된 응용 프로그램 코드가 저장되고 실행되는 위치를 알아두는 것은 도움이 됩니다. 네트워크는 자원을 공유할 수 있는 연결된 컴퓨터(또는 서버)로 생각할 수 있습니다. Next.js 애플리케이션의 경우 응용 프로그램 코드는 원본 서버, 콘텐츠 전송 네트워크(CDN), 그리고 엣지에 배포될 수 있습니다. 각각에 대해 알아보겠습니다. Origin Server (원본 서버) 앞서 논의한대로 서버는 응용 프로그램 코드의 원본 버전을 저장하고 실행하는 주요 컴퓨터를 의미합니다. 원본 서버라는 용어를 사용하여 응용 프로그램 코드가 CDN 서버와 엣지 서버와 같은 다른 위치로 배포되는 서버와 구별합니다. 원본 서버가 요청을 받으면 응답을 보내기 전에 일부 계산을 수행합니다. 이 계산 작업의 결과.. 2023. 8. 12.

티스토리툴바