Learn Next.js 제 6장 : Setting Up Your Database

이 포스팅은 Learn Next.js를 학습하면서 보조 역할로서 봐주시면 좋겠습니다.

 

대시보드 작업을 계속하려면 먼저 데이터가 필요합니다.

이번 장에서는 PostgreSQL을 설정합니다. @vercel/postgres

 

이번 장에서 배울 내용

* GitHub에 프로젝트를 Push합니다.

* Vercel 계정을 설정하고 즉각적인 미리보기 및 배포를 위한 GitHub 저장소를 연결합니다.

* 프로젝트를 만들고 Postgres database에 연결합니다.

* 초기 데이터로 데이터베이스를 seed합니다.

 

GitHub 저장소에 관한 내용을 학습하려면 이동하시길 바랍니다.

https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories

Quickstart for repositories - GitHub Docs

Vercel을 통해 배포하기 위한 과정

https://vercel.com/

Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel

계정을 만들고 -> Github 저장소와 연결하고 -> 배포합니다 -> Storage 탭으로 이동 후 Postgres 데이터베이스를 만듭니다.

-> 시간대는 Washington, D.C. 로 해놓습니다. -> 이후 .env.local 탭에서 DB정보를 가져와 로컬 .env 파일에 붙어 넣습니다.

->  노출 방치를 위해 .gitignore에 등제해 놓는 것이 좋습니다. -> package.json에 스크립트를 추가합니다.

 

seeding 이란?

초기 데이터 집합으로 데이터베이스 채우기

seed는 애플리케이션을 build할 때, 작업할 데이터가 필요할 때 유용하다.

 

이제 database로 돌아가면 Data 항목에 Browse 탭과 Query 탭이 있는 걸 확인할 수 있습니다.

Browse에는 data table을 선택하여 볼 수 있습니다.

이 data들은 /app/lib/placeholder-data.js 파일에 있는 정보와 일치합니다.

 

Executing queries (쿼리 실행)

Data 항목의 Query 탭을 클릭하면 터미널이 열립니다.

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

과정에서 제공하는 쿼리를 작성해 보고 결과를 확인해 봅시다.

query ex