https://nextjs.org/learn/dashboard-app/setting-up-your-database
대시보드 작업 전, 데이터가 필요하다.
이 챕터에서는 @vercel/postgres를 사용해 PostgreSQL을 세팅한다.
In this chapter
깃허브에 프로젝트 push
velcel 계정 세팅, 깃허브 레포 연결 => 즉각 프리뷰 & 배포
Postgres 데이터베이스에 링크 생성
초기 데이터로 DB 생성
Connect and deploy your project
깃허브 레포를 불러와 배포한다.
배포를 통해 main 브랜치에 push 시, Vercel은 자동으로 재배포 해준다.
pr을 열면, 배포 에러를 확인하고 공유할 수 있다.
Create a Postgres database
- Continue to Dashboard => Storage 탭 클릭
- Connect Store → Create New → Postgres → Continue 클릭
- Washington D.C로 설정 : 디폴트 지역
- 같은 지역으로 설정하거나 앱 코드에 닫기를 통해 데이터 요청의 지연을 줄일 수 있음
- 연결 되면,
.env. local탭으로 이동 - Show secret and Copy Snippet. 클릭 (복사 전 secret reveal 해야 함)
- 코드 에디터에 가서 .env.exampl => .env로 이름 변경 후 붙여넣기
중요: .gitignore 파일에 가 .env 파일 포함 시킴 npm i @vercel/postgres=> Vercel Postgres SDK 설치 위해
Seed your database
데이터베이스가 이제 만들어졌으니 초기 데이터를 seed 하자
이렇게 하면 대시보드 빌드 전에 동작할 데이터가 생긴다.
/scripts 폴더 안에 seed.js라는 파일이 있다.
이 스크립트에는 invoices, customers, user, revenue 테이블 생성/seed 하는 명령어가 써있다.
SQL을 통해 테이블을 생성하고, 그 후 placeholder-data.js 파일로 실행시킨다.
그 후 package.json 파일에 마지막 라인을 추가한다.
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
"seed": "node -r dotenv/config ./scripts/seed.js"
}seed.js를 실행시키는 커맨드이다.
그 후 npm run seed 를 실행한다.
그럼 console.log에서 몇 메시지를 볼 수 있다ㅣ.
Exploring your database
다음과 같은 DB를 볼 수 있다.
Vercel 에 가서 Data를 클릭한다.
이 섹션에선 생성한 새로운 테이블을 볼 수 있다.
각 테이블 선택을 통해, 기록을 보고 placeholder-data.js 파일에서 할당 된 엔트리를 확실히 할 수 있다.
Executing queries
query 탭으로도 갈 수 있다.
이 섹션은 일반 SQL 커맨드를 지원한다.
다음을 실행해보자
SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;