codinghatso

7장이랑 연결되는 내용입니다. 7장의 마지막 내용 두 가지 를 참고하며 진행하시면 됩니다. 1. 데이터 요청이 의도하지 않는 waterfall을 만들었다. 2. 대시보드는 정적(static)이므로 데이터 업데이트가 애플리케이션에 반영(reflected)되지 않는다. 이번 장에서 배울 내용 * 정적 렌더링이란 무엇이며 애플리케이션의 성능을 향상시킬 수 있는 방법입니다. * 동적 렌더링이란 무엇이며 언제 사용해야 하는지에 대한 것입니다. * 대시보드를 동적으로 만들기 위한 다양한 접근 방식. * 느린 데이터 가져오기를 시뮬레이션하여 어떤 일이 일어나는지 확인합니다. 정적 렌더링이란? 정적 렌더링을 사용하면 빌드시(배포 시) 또는 재검증 중에 서버에서 데이터 가져오기 및 렌더링이 수행됩니다. 그런 다음 결과를..

애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 작성합니다. 이번 장에서 배울 내용 * API, ORM, SQL 등 데이터를 가져오는 및 가지 방법에 대해 알아봅니다. * 서버 구성요소를 통해 백엔드 리소스에 보다 안전하게 액세스할 수 있는 방법 * network waterfalls란? * JavaScript Pattern을 사용하여 병렬 데이터(parallel data) fetching을 구현하는 방법. 데이터 가져오는 방법 선택 API 계층 데이터베이스 쿼리 React Server Components 추가 API 계층 없이 서버에서 직접 데이터베이스를 조회할 수 있습니다. SQL 사용하기 대시보드 프로젝트의 경우 Vercel Postgres SDK 및 ..

이 포스팅은 Learn Next.js를 학습하면서 보조 역할로서 봐주시면 좋겠습니다. 대시보드 작업을 계속하려면 먼저 데이터가 필요합니다. 이번 장에서는 PostgreSQL을 설정합니다. @vercel/postgres 이번 장에서 배울 내용 * GitHub에 프로젝트를 Push합니다. * Vercel 계정을 설정하고 즉각적인 미리보기 및 배포를 위한 GitHub 저장소를 연결합니다. * 프로젝트를 만들고 Postgres database에 연결합니다. * 초기 데이터로 데이터베이스를 seed합니다. GitHub 저장소에 관한 내용을 학습하려면 이동하시길 바랍니다. https://docs.github.com/en/repositories/creating-and-managing-repositories/qui..

사용자가 대시보드 경로 사이를 탐색할 수 있도록 몇 가지 링크를 추가하겠습니다. 이번 장에서 배울 내용 * next/link 요소 사용 방법 * usePathname() 에 대한 활성 링크를 표시하는 방법 * Next.js에서 내비게이션이 작동하는 방식 내비게이션을 최적화하는 이유는 무엇일까? 전통적으로 HTML의 요소를 사용합니다. 현재 사이드바 링크는 요소를 사용하여 각 페이지 이동시 전체 페이지 새로 고침이 있습니다. The component Next.js 에서는 를 사용할 수 있습니다. Javascript로 client-side navigation을 수행할 수 있습니다. import Link from 'next/link'; import 해서 사용하며 태그를 태그로 교체해 주면 됩니다. Automa..

지금까지 애플리케이션에는 홈페이지만 있습니다. 레이아웃과 페이지로 더 많은 경로를 만들 수 있습니다. 이번 장에서 배울 내용 * dashboard routes를 만들고 file-system routng을 사용해 봅니다. * 새 경로 세그먼트를 만들 때 폴더와 파일의 역할을 이해합니다. * 여러 대시보드 페이지 간에 공유할 수 있는 중첩 레이아웃을 만듭니다. * colocation, partial rendering, 그리고 the root layout이 무엇인지 이해합니다. Nested routing 중첩 라우팅 Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL segment에 매핑되는 route segment를 나타냅니다. 라우팅 페이지 만들기 ..