Learn Next.js 제 7장 : Fetching Data

애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 작성합니다.

 

이번 장에서 배울 내용

* API, ORM, SQL 등 데이터를 가져오는 및 가지 방법에 대해 알아봅니다.

* 서버 구성요소를 통해 백엔드 리소스에 보다 안전하게 액세스할 수 있는 방법

* network waterfalls란?

* JavaScript Pattern을 사용하여 병렬 데이터(parallel data) fetching을 구현하는 방법.

 

데이터 가져오는 방법 선택

API 계층

 

데이터베이스 쿼리

 

React Server Components

추가 API 계층 없이 서버에서 직접 데이터베이스를 조회할 수 있습니다.

 

SQL 사용하기

대시보드 프로젝트의 경우 Vercel Postgres SDK 및 SQL을 사용하여 데이터베이스 쿼리를 작성합니다.

 

SQL을 사용해야 하는 이유

• 관계형 데이터베이스를 쿼리 하기 위한 업계 표준이다.
• 관계형 데이터베이스의 기본을 이해하고 지식을 다른 도구에 적용할 수 있다.
• SQL은 다양한 용도로 사용되어 특정 데이터를 가져오고 조작이 가능하다.
• vercel Postgres SDK는 SQL injections에 대응이 가능하다.

결론 - SQL을 사용하면 특정 데이터를 가져오고 조작하기 용이함으로 추천한다.

 

데이터를 가져와 적용시키는 실습을 합니다.

RevenueChart , LatestInvoices, Card 3가지 컴포넌트를 활성화 하고 데이터를 어떻게 받아오는지 학습합니다.

주의 사항

1. 데이터 요청(data request)이 의도치 않게 서로 차단되어 request waterfall을 만들고 있습니다.

2. Next.js는 성능 향상을 위해 경로를 미리 지정하도록 되어있습니다, 이를 Static Rendering이라고 합니다. 결론적으로 데이터가 변경되어도 dashboard에 반영되지 않는다는 것입니다.

 

request Waterfall은 무엇인가?

"waterfall"은 이전 요청의 완료 여부에 따라 결정되는 일련의 네트워크 요청을 말한다.

데이터 가져오기(data fetching) 같은 경우 각각의 이전 요청이 데이터를 반환한 경우에만 시작할 수 있습니다.

 

request waterfall은 sequential(순차적) 이라고 할 수 있고, Parallel(병행적) 데이터 처리와 상반되는 개념입니다.

 

request waterfall 패턴이 반드시 나쁜 것은 아닙니다. 이전 요청이 반드시 수행되야 하는 경우나 조건이 충족되야 하는 경우가 있기 때문입니다.

결론 - 폭포 패턴은 다음 요청을 하기전에 조건을 만족시켜야 할 필요가 있을 때 사용합니다.

 

Parallel data fetching (병렬 데이터 처리)

병렬 데이터처리를 하는 방법은 데이터 요청을 동시(병행적으로)에 시작하는 것입니다.

JavaScript에서는 Promise.all() 이나 Promise.allSettled() 함수로 모든 promises를 같은 시간에 요청할 수 있습니다.

const data = await Promise.all([
      invoiceCountPromise,
      customerCountPromise,
      invoiceStatusPromise,
    ]);

 

병렬 데이터 처리 패턴 사용 장점

모든 data fetche를 동시에 실행하기 시작하면 성능이 향상될 수 있습니다.

모든 라이브러리나 프레임워크에 적용할 수 있는 기본 자바스크립트 패턴 입니다.