대시보드 작업을 계속하려면 몇 가지 데이터가 필요합니다. 이 장에서는 @vercel/postgres를 사용하여 PostgreSQL 데이터베이스를 설정합니다. PostgreSQL에 이미 익숙하고 자체 공급자를 사용하고 싶다면 이 장을 건너뛰고 직접 설정할 수 있습니다. 그렇지 않으면 계속합시다.
- 즉각적인 미리보기 및 배포를 위해 Vercel 계정을 설정하고 GitHub 저장소를 연결하세요.
- 프로젝트를 생성하고 Postgres 데이터베이스에 연결하세요.
- 초기 데이터로 데이터베이스를 시드(seed)합니다.
1. GitHub 저장소 만들기
먼저, 아직 리포지토리를 수행하지 않았다면 Github에 푸시해 보겠습니다. 이렇게 하면 데이터베이스를 더 쉽게 설정하고 배포할 수 있습니다.
저장소를 설정하는 데 도움이 필요하면 GitHub에서 이 가이드를 살펴보세요.
알아 두면 좋은 점:
- GitLab 또는 Bitbucket과 같은 다른 Git 공급자를 사용할 수도 있습니다.
- GitHub를 처음 사용하는 경우, 단순화된 개발 작업흐름을 위해 GitHub 데스크톱 앱을 권장합니다.
2. Vercel 계정 만들기
https://vercel.com/signup 을 방문하세요.계정을 만들려면 무료 "hobby" 플랜을 선택하세요. GitHub로 계속을 선택하여 GitHub와 Vercel 계정을 연결하세요.
3. 프로젝트 연결 및 배포
다음으로, 방금 생성한 GitHub 저장소를 선택하고 가져올 수 있는 이 화면으로 이동하게 됩니다.
프로젝트 이름을 지정하고 배포를 클릭합니다.
만세! 🎉 이제 프로젝트가 배포되었습니다.
GitHub 저장소를 연결하면 변경 사항을 메인 브랜치에 푸시할 때마다 Vercel은 구성이 필요 없이 자동으로 애플리케이션을 재배포합니다. pull 요청을 열면 즉시 미리보기도 제공됩니다. 이를 통해 배포 오류를 조기에 포착하고 피드백을 위해 팀 구성원과 프로젝트 미리보기를 공유할 수 있습니다.
4. Postgres 데이터베이스 만들기
다음으로, 데이터베이스를 설정하려면 대시보드로 계속을 클릭하고 프로젝트 대시보드에서 스토리지 탭을 선택하세요. Connect Store → Create New → Postgres → Continue를 선택합니다.
약관에 동의하고, 데이터베이스에 이름을 할당하고, 데이터베이스 지역이 워싱턴 DC(iad1)로 설정되어 있는지 확인하세요. 이는 모든 새로운 Vercel 프로젝트에 대해 기본 지역이기도 합니다. 데이터베이스를 동일한 지역에 배치하거나 애플리케이션 코드에 가깝게 배치하면 데이터 요청을 위한 대기 시간을 줄일 수 있습니다.
알아두면 좋은 점: 데이터베이스 영역이 초기화되면 변경할 수 없습니다. 다른 지역을 이용하고 싶다면, 데이터베이스를 생성하기 전에 설정해야 합니다.
연결이 완료되면 .env.local 탭으로 이동하여 Show secret and Copy Snipet(비밀 표시 및 스니펫 복사)를 클릭합니다. 복사하기 전에 비밀을 공개했는지 확인하세요.
코드 편집기로 이동하여 .env.example 파일 이름을 .env로 변경합니다. Vercel에서 복사한 내용을 붙여넣습니다.
중요: GitHub에 푸시할 때 데이터베이스 비밀이 노출되는 것을 방지하려면
.gitignore파일로 이동하여 무시된 파일에.env가 있는지 확인하세요.
마지막으로 터미널에서 npm i @vercel/postgres를 실행하여 Vercel Postgres SDK를 설치합니다.
5. 데이터베이스 시드
이제 데이터베이스가 생성되었으므로 일부 초기 데이터를 사용하여 시드해 보겠습니다. 이렇게 하면 대시보드를 구축할 때 작업할 일부 데이터를 확보할 수 있습니다.
프로젝트 폴더 /scripts에는 seed.js라는 파일이 있습니다. 이 스크립트에는 invoices, customers, user, revenue 테이블을 생성하고 시드하기 위한 지침이 포함되어 있습니다.
코드가 수행하는 모든 내용을 이해하지 못하더라도 걱정하지 마십시오. 개요를 제공하기 위해 스크립트는 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 메시지가 터미널에 표시되어야 합니다.
🔍 퀴즈
- 데이터베이스의 맥락에서 '시드(seeding)'란 무엇입니까?
a. 데이터베이스의 모든 데이터 삭제
b. 데이터베이스의 스키마 가져오기
c. 초기 데이터 세트로 데이터베이스 채우기
d. 데이터베이스의 테이블 간 관계 만들기
문제 해결 :
- 데이터베이스 비밀을
.env파일에 복사하기 전에 공개하십시오. bcrypt스크립트는 사용자의 비밀번호를 해시하는 데 사용됩니다.bcrypt가 사용자 환경과 호환되지 않는 경우 스크립트를 업데이트하여bcryptjs를 대신 사용할 수 있습니다.- 데이터베이스를 시드하는 동안 문제가 발생하여 스크립트를 다시 실행하려는 경우 데이터베이스 쿼리 인터페이스에서
DROP TABLE tablename을 실행하여 기존 테이블을 삭제할 수 있습니다. 자세한 내용은 아래 쿼리 실행 섹션을 참조하세요. 하지만 주의하세요. 이 명령은 테이블과 모든 데이터를 삭제합니다. placeholder 데이터로 작업하고 있으므로 예제 앱에서 이 작업을 수행하는 것은 괜찮지만 프로덕션 앱에서는 이 명령을 실행하면 안 됩니다. - Vercel Postgres 데이터베이스를 시드하는 동안 문제가 계속 발생하는 경우 GitHub에서 토론을 열어주세요.
6. 데이터베이스 탐색
데이터베이스가 어떻게 생겼는지 살펴보겠습니다. Vercel로 돌아가 사이드 탐색에서 Data를 클릭합니다.
이 섹션에서는 사용자, 고객, 송장 및 수익이라는 4개의 새로운 테이블을 찾을 수 있습니다.
각 테이블을 선택하면 해당 레코드를 보고 항목이 placeholder-data.js 파일의 데이터와 일치하는지 확인할 수 있습니다.
7. 쿼리 실행
"query" 탭으로 전환하여 데이터베이스와 상호 작용할 수 있습니다. 이 섹션에서는 표준 SQL 명령을 지원합니다. 예를 들어 DROP TABLE customers를 입력하면 모든 데이터와 함께 "customers" 테이블이 삭제되므로 주의하세요.
첫 번째 데이터베이스 쿼리를 실행해 보겠습니다. Vercel 인터페이스에 다음 SQL 코드를 붙여넣고 실행합니다.
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
