Chapter 6
대시보드 작업을 계속하기 전에 데이터가 필요합니다. 이 장에서는 @vercel/postgres를 사용하여 PostgreSQL 데이터베이스를 설정합니다. 이미 PostgreSQL에 익숙하고 자체적으로 데이터베이스를 구축하려는 경우 이 장을 건너뛰고 직접 설정할 수 있습니다. 그렇지 않다면 계속해봅시다!
다음과 같은 주제들을 다룰 예정입니다.
- 프로젝트를 GitHub에 푸시합니다.
- Vercel 계정을 만들고 미리보기와 배포를 위해 GitHub 저장소를 연결합니다.
- PostgreSQL 데이터베이스를 생성하고 프로젝트와 연결합니다.
- 초기 데이터로 데이터베이스에 시드를 심습니다.
시작하기위해 아직 리포지토리를 GitHub에 푸시하지 않았다면, 푸시합시다. 이렇게 하면 데이터베이스를 설정하고 배포하는 것이 더 쉬워집니다.
리포지토리 설정에 도움이 필요하면 GitHub의 가이드를 확인하세요.
유용한 정보:
- GitLab 또는 Bitbucket과 같은 다른 Git 제공 업체도 사용할 수 있습니다.
- GitHub를 처음 사용하는 경우 GitHub 데스크톱 앱을 사용한 단순화된 개발 워크플로우를 추천합니다.
계정을 만들려면 vercel.com/signup에 방문하세요. 무료 "hobby" 플랜을 선택하세요. GitHub와 Vercel 계정을 연결하려면 Connect with Github을 선택하세요.
다음 화면으로 이동하게 됩니다. 여기서 방금 만든 GitHub 리포지토리를 선택하고 가져오기를 할 수 있습니다:
프로젝트 이름을 지정하고 배포를 클릭하세요.
만세! 🎉 프로젝트가 이제 배포되었습니다.
GitHub 리포지토리를 연결함으로써, 변경 사항을 main 브랜치에 푸시할 때마다 별도의 설정 없이 Vercel이 자동으로 애플리케이션을 재배포합니다. pull request를 열 때에도 미리보기가 가능하여 배포 오류를 미리 확인하고 프로젝트의 미리보기를 팀원들과 공유할 수 있습니다.
다음으로 데이터베이스를 설정하기 위해 Continue to Dashboard을 클릭하고 프로젝트 대시보드에서 Storage 탭을 선택합니다. Connect Store → Create New → Postgres → Continue를 선택하세요.
약관을 수락하고 데이터베이스에 이름을 지정하고 데이터베이스 지역을 Washington D.C (iad1) 로 설정하세요 - 이는 또한 모든 새로운 Vercel 프로젝트의 기본 지역입니다. 데이터베이스를 응용 프로그램 코드와 같은 지역이나 가까운 곳에 배치하면 데이터 요청의 지연 시간을 줄일 수 있습니다.
참고: 데이터베이스 지역은 한 번 설정한 이후로 변경할 수 없습니다. 다른 지역을 사용하려면 데이터베이스를 만들기 전에 설정해야 합니다.
연결하면 .env.local 탭으로 이동하여 Show secret 및 Copy Snippet을 클릭하세요. 복사하기 전에 비밀 키가 노출되는지 확인하세요.
코드 에디터로 이동하여 .env.example 파일을 .env 로 이름을 변경하세요. Vercel에서 복사한 내용을 붙여넣으세요.
중요: .gitignore 파일로 이동하여 .env가 무시되도록 하여 GitHub에 푸시할 때 데이터베이스 비밀 키가 노출되지 않도록 해야 합니다.
마지막으로 터미널에서 npm i @vercel/postgres를 실행하여 Vercel Postgres SDK를 설치하세요.
이제 데이터베이스를 생성했으니 초기 데이터로 시드를 심어봅시다. 대시보드를 구축하는 동안 사용할 데이터를 가져오게 됩니다.
프로젝트의 /scripts 폴더에 seed.js라는 파일이 있습니다. 이 스크립트에는 invoices, customers, user, revenue 테이블을 생성하고 시드를 심는 지침이 포함되어 있습니다.
코드가 하는 일을 완전히 이해하지 못하더라도 걱정하지 마세요. 이 스크립트는 SQL을 사용하여 테이블을 생성하고, 생성된 후에 placeholder-data.js 파일의 데이터를 사용하여 테이블에 데이터를 채웁니다.
그 다음으로, package.json 파일에 다음 라인을 스크립트에 추가하세요:
/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 메시지를 볼 수 있어야 스크립트가 실행되고 있다는 것을 알 수 있을 것입니다.
지식을 테스트하고 방금 배운 내용을 확인하세요.
데이터베이스에서 '시딩(seeding)'은 무엇을 의미하나요?
- A: 데이터베이스의 모든 데이터 삭제
- B: 데이터베이스의 스키마 가져오기
- C: 데이터베이스에 초기 데이터 집합 채우기
- D: 데이터베이스의 테이블 간 관계 생성
정답 확인
C: 데이터베이스에 초기 데이터 집합 채우기
문제 해결:
.env파일로 복사하기 전에 데이터베이스 비밀 키를 표시했는지 확인하세요.- 스크립트는 사용자의 비밀번호를 해싱하기 위해
bcrypt를 사용합니다.bcrypt가 환경과 호환되지 않는 경우 스크립트를bcryptjs로 업데이트할 수 있습니다.- 데이터베이스 시드 중에 문제가 발생해서 스크립트를 다시 실행하고 싶다면 데이터베이스 쿼리 인터페이스에서
DROP TABLE tablename을 실행하여 기존 테이블을 삭제할 수 있습니다. 자세한 내용은 쿼리 실행 섹션을 참조하세요. 하지만 조심하세요, 이 명령은 테이블과 해당 데이터를 모두 삭제합니다. 예제 앱에서는 플레이스홀더 데이터를 사용하기 때문에 이 명령을 실행해도 상관없지만, 프로덕션 앱에서는 이 명령을 실행하지 않아야 합니다.- Vercel Postgres 데이터베이스 시딩 중에 계속 문제가 발생하는 경우 GitHub Discussion을 열어주세요.
데이터베이스를 확인해봅시다. Vercel로 돌아가서 사이드 네비게이션에서 Data를 클릭하세요.
이 섹션에서는 새로 생성된 네 가지 테이블을 찾을 수 있습니다: users, customers, invoices, revenue.
각 테이블을 선택하여 해당 레코드를 확인하고 placeholder-data.js 파일의 데이터와 일치하는지 확인할 수 있습니다.
"쿼리" 탭으로 전환하여 데이터베이스와 상호작용할 수 있습니다. 이 섹션은 표준 SQL 명령을 지원합니다. 예를 들어 DROP TABLE customers를 입력하면 "customers" 테이블과 해당 데이터를 모두 삭제합니다. - 그러니 조심하세요!
첫 번째 데이터베이스 쿼리를 실행해봅시다. 아래 SQL 코드를 Vercel 인터페이스에 붙여넣고 실행해보세요:
SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;
지금까지 배운 내용을 확인해보세요.
이 인보이스는 어떤 고객에게 속해 있나요?
- A: Lee Robinson
- B: Evil Rabbit
- C: Delba de Oliveira
- D: Steph Dietz
정답 확인
B: Evil Rabbit