이전 장에서는 스트리밍을 통해 대시보드의 초기 로드 성능을 개선했다. 이제 /invoices 페이지로 이동하여 검색 및 페이지네이션을 추가하는 방법을 알아보자! 이번 장에서는 아래와 같은 주제를 다룬다. Next.js API(searchParams, usePathname 및 useRouter)를 사용하는 방법을 알아보세요. URL 검색 매개변수를 사용하여 검색 및 페이지네이을 구현합니다. 코딩 시작 /dashboard/invoices/page.tsx 파일 내에 다음 코드를 붙여넣는다. import Pagination from '@/app/ui/invoices/pagination'; import Search from '@/app/ui/search'; import Table from '@/app/ui/inv..

부분 사전 렌더링은 Next.js 14에 도입된 실험적 기능이다. 기능이 안정화되면서 이 페이지의 내용이 업데이트될 수 있다. 실험적인 기능을 사용하지 않으려면 이 장을 건너뛰어도 된다. 이 장은 전체 과정을 완료하는 데 꼭 필요하지 않다. 이번장에 다룰 주제는 아래와 같다. 부분 사전 렌더링이란? 부분 사전 렌더링의 작동 방식 정적 콘텐츠와 동적 콘텐츠 결합 현재 경로 내에서 동적 함수(예: noStore(), cookie() 등)를 호출하면 전체 경로가 동적이 된다. 이는 오늘날 대부분의 웹 앱이 구축되는 방식과 일치한다. 전체 애플리케이션 또는 특정 경로에 대해 정적 렌더링과 동적 렌더링 중에서 선택한다. 그러나 대부분의 경로는 완전히 정적이거나 동적이지 않다. 정적 콘텐츠와 동적 콘텐츠가 모두 포..

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

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

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

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