이전 장에서는 대시보드 페이지를 동적으로 만들었지만 느린 데이터 가져오기가 애플리케이션 성능에 어떤 영향을 미칠 수 있는지 논의했다. 데이터 요청이 느린 경우 사용자 경험을 개선할 수 있는 방법을 살펴보겠다. 이번 장에서는 아래의 주제를 다룬다. 스트리밍이란 무엇이며 언제 사용할 수 있나? loading.tsx 및 Suspense를 사용하여 스트리밍을 구현하는 방법. 로딩 스켈레톤이란? 경로 그룹은 무엇이며 언제 사용할 수 있나? 애플리케이션에서 Suspense 경계를 배치할 위치. 스트리밍이란 무엇입니까? 스트리밍은 경로를 더 작은 "청크"로 나누고 준비가 되면 서버에서 클라이언트로 점진적으로 스트리밍할 수 있는 데이터 전송 기술이다. 스트리밍을 하면 느린 데이터 요청이 전체 페이지를 차단하는 것을 방..

이전 장에서는 대시보드 개요 페이지에 대한 데이터를 가져왔다. 그러나 현재 설정의 두 가지 제한 사항에 대해 간단히 논의했다. 데이터 요청이 의도하지 않은 워터폴 전송이 되었다. 대시보드는 정적이므로 데이터 업데이트가 애플리케이션에 반영되지 않는다. 이번 장에서는 아래의 주제를 다룬다. 정적 렌더링이 무엇이며 애플리케이션 성능을 어떻게 향상시킬 수 있는지 알아보자. 동적 렌더링이란 무엇이며 언제 사용해야 할까? 대시보드를 동적으로 만드는 다양한 접근 방식을 알아보자. 느린 데이터 가져오기를 시뮬레이션하여 무슨 일이 일어나는지 확인해보자. 정적 렌더링이란 무엇입니까? 정적 렌더링을 사용하면 빌드 시(배포 시) 또는 유효성 재검사 중에 데이터 가져오기 및 렌더링이 서버에서 발생한다. 그 다음 결과는 CDN(..

이제 데이터베이스를 생성하고 초기 데이터도 구축했으므로 애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 구축해 보자. 이번 장에서 다룰 내용은 아래와 같다. API, ORM, SQL 등 데이터를 가져오는 몇 가지 접근 방식. 서버 컴포넌트가 백엔드 리소스에 보다 안전하게 액세스하는 방법 네트워크 워터폴 이란? JavaScript 패턴을 사용하여 병렬 데이터 가져오기를 구현하는 방법 데이터 페치 방법 선택 API 레이어 API는 애플리케이션 코드와 데이터베이스 사이의 중간 계층으로 쓰인다. API를 사용할 수 있는 몇 가지 경우가 있다. API를 제공하는 타사 서비스를 사용하는 경우. 클라이언트에서 데이터를 가져오는 경우 데이터베이스 비밀정보가 클라이언트에 ..

대시보드 작업을 계속하려면 몇 가지 데이터가 필요하다. 이 장에서는 @vercel/postgres를 사용하여 PostgreSQL 데이터베이스를 설정한다. PostgreSQL에 이미 익숙하고 자체 공급자를 사용하고 싶다면 이 장을 건너뛰고 직접 설정할 수 있다. 이번 장에서 다룰 내용은 아래와 같다. 프로젝트를 GitHub에 푸시한다. 즉각적인 미리보기 및 배포를 위해 Vercel 계정을 설정하고 GitHub 저장소를 연결한다. 프로젝트를 생성하고 Postgres 데이터베이스에 연결한다. 초기 데이터로 데이터베이스를 시드한다. GitHub 저장소 만들기 시작하려면 아직 수행하지 않았다면 리포지토리를 Github에 푸시해 보겠다. 이렇게 하면 데이터베이스를 더 쉽게 설정하고 배포할 수 있다. 참고: GitL..

이전 장에서는 대시보드 레이아웃과 페이지를 생성했었다. 이제 사용자가 대시보드 경로 간을 탐색할 수 있도록 몇 가지 링크를 추가해 보겠다. 이 챕터에서 다루는 주제는 아래와 같다. next/link 컴포넌트를 사용하는 방법. usePathname() 후크를 사용하여 활성 링크를 표시하는 방법. Next.js에서 탐색이 작동하는 방식. 탐색을 최적화하는 이유는 무엇입니까? 페이지를 연결하려면 일반적으로 엘리먼트를 사용합니다. 현재 사이드바 링크는 엘리먼트를 사용하지만 브라우저에서 홈, 송장, 고객 페이지 사이를 탐색할 때 어떤 일이 발생하는지 확인하자. 각 페이지 탐색에 전체 페이지 새로 고침이 있다! 컴포넌트 Next.js에서는 컴포넌트를 사용하여 애플리케이션의 페이지 간을 연결할 수 있다. 를 사용하면..

지금까지 애플리케이션에는 메인 페이지만 있었다. 레이아웃 과 페이지를 사용하여 더 많은 경로를 생성하는 방법을 알아보자. 이 챕터에서 다룰 주제는 다음과 같다. 파일 시스템 라우팅을 사용하여 dashboard 경로를 만든다 . 새 경로 세그먼트를 생성할 때 폴더와 파일의 역할을 이해한다. 여러 대시보드 페이지 간에 공유할 수 있는 네스티드 레이아웃을 만든다. 코로케이션, 부분 렌더링, 루트 레이아웃이 무엇인지 이해다. 중첩 라우팅 Next.js는 중첩된 경로를 만드는데, 파일 시스템 라우팅을 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다. layout.tsx 및 page.tsx 파일을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있다. page.tsx는 React 컴포넌트를..