06. 데이터베이스 설정

대시보드 작업을 계속하려면 몇 가지 데이터가 필요하다. 이 장에서는 @vercel/postgres를 사용하여 PostgreSQL 데이터베이스를 설정한다. PostgreSQL에 이미 익숙하고 자체 공급자를 사용하고 싶다면 이 장을 건너뛰고 직접 설정할 수 있다.

이번 장에서 다룰 내용은 아래와 같다.

• 프로젝트를 GitHub에 푸시한다.
• 즉각적인 미리보기 및 배포를 위해 Vercel 계정을 설정하고 GitHub 저장소를 연결한다.
• 프로젝트를 생성하고 Postgres 데이터베이스에 연결한다.
• 초기 데이터로 데이터베이스를 시드한다.

 

GitHub 저장소 만들기

시작하려면 아직 수행하지 않았다면 리포지토리를 Github에 푸시해 보겠다. 이렇게 하면 데이터베이스를 더 쉽게 설정하고 배포할 수 있다.

참고:

 

• GitLab 또는 Bitbucket과 같은 다른 Git 공급자를 사용할 수도 있다.
• GitHub를 처음 사용하는 경우 단순화된 개발 워크플로를 위해 GitHub 데스크톱 앱을 권장한다.

 

Vercel 계정 만들기

vercel.com/signup을 방문하여 계정을 만들어보자. 무료 "취미"플랜을 선택한다. GitHub로 계속을 선택하여 GitHub와 Vercel 계정을 연결하자.

 

프로젝트 연결 및 배포

다음으로, 방금 생성한 GitHub 저장소를 선택하고 가져올 수 있는 이 화면으로 이동하게 된다.

프로젝트 이름을 정하고, 배포를 해보자.

와우~, 된다.

GitHub 저장소를 연결하면 변경 사항을 기본 분기에 푸시할 때마다 Vercel이 자동으로 애플리케이션을 재배포한다. 끌어오기 요청을 열면 배포 오류를 조기에 파악하고 피드백을 위해 팀 구성원과 프로젝트 미리보기를 공유할 수 있는 즉각적인 미리보기도 제공된다.

 

Postgres 데이터베이스 만들기

다음으로, 데이터베이스를 설정하려면 대시보드로 계속을 클릭하고 프로젝트 대시보드에서 스토리지 탭을 선택하자. 'Connect Store → 새로 만들기 → Postgres → 계속'을 선택한다.

약관에 동의하고 데이터베이스에 이름을 할당한 후 데이터베이스 지역이 Washington D.C(iad1)로 설정되어 있는지 확인하자. 이는 모든 새로운 Vercel 프로젝트의 기본 지역이기도하다. 데이터베이스를 동일한 지역에 배치하거나 애플리케이션 코드에 가깝게 배치하면 데이터 요청에 대한 대기 시간을 줄일 수 있다.

 

주의 : 데이터베이스 영역이 초기화되면 변경할 수 없다. 다른 지역을 사용하려면 데이터베이스를 생성하기 전에 먼저 설정되어야 한다.

연결되면 .env.local 탭으로 이동하여 'Show Secret' 및 'Copy Snnipet' 를 클릭하자. 복사하기 전에 비밀을 공개했는지 확인해야한다.

코드 편집기로 이동하여 .env.example 파일의 이름을 .env로 바꾸자. Vercel에서 복사한 내용을 붙여넣는다.

중요: GitHub에 푸시할 때 데이터베이스 비밀이 노출되는 것을 방지하려면 .gitignore 파일에 .env를 포함시키자.

마지막으로 터미널에서 npm i @vercel/postgres를 실행하여 Vercel Postgres SDK를 설치하면 된다.

 

데이터베이스 설정

이제 데이터베이스가 생성되었으므로 일부 초기 데이터를 사용하도록 구성하자. 이렇게 하면 대시보드를 구축할 때 작업할 일부 데이터를 확보할 수 있다.

프로젝트의 /scripts 폴더에 Seed.js라는 파일이 있다. 이 스크립트에는 송장, 고객, 사용자, 수익 테이블을 생성하고 저장하기 위한 명령이 포함되어 있다.

코드가 수행하는 모든 것을 이해하지 못하더라도 걱정하지 않아도 된다. 개략적으로 얘기하면, 스크립트는 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 메시지가 터미널에 표시될 것이다.

 

데이터베이스 설정 시 문제 해결:

• .env 파일에 복사하기 전에 데이터베이스 해시된 비밀번호가 공개되도 좋은지 검토한다.
• 스크립트는 bcrypt를 사용하여 사용자 비밀번호를 해시한다. bcrypt가 환경과 호환되지 않는 경우 대신 bcryptjs를 사용하도록 스크립트를 업데이트할 수 있다.
• 데이터베이스를 시드하는 동안 문제가 발생하여 스크립트를 다시 실행하려는 경우 데이터베이스 쿼리 인터페이스에서 DROP TABLE tablename을 실행하여 기존 테이블을 삭제할 수 있다. 자세한 내용은 아래 쿼리 실행 섹션을 참조한다. 이 명령은 테이블과 모든 데이터를 삭제하므로 주의하자. placeholder 데이터로 작업하고 있으므로 예제 앱에서 이 작업을 수행하는 것은 괜찮지만 프로덕션 앱에서는 이 명령을 실행하면 안 된다.
• Verce Postgres 데이터베이스를 시드하는 동안 문제가 계속 발생하는 경우 GitHub에서 토론을 열어본다.

 

데이터베이스 탐색

데이터베이스가 어떻게 생겼는지 살펴보겠다. Vercel로 돌아가 사이드 탐색에서 Data를 클릭한다.

이 섹션에서는 사용자, 고객, 송장 및 수익이라는 4개의 새로운 테이블을 찾을 수 있다.

각 테이블을 선택하면 해당 레코드를 보고 항목이 placeholder-data.js 파일의 데이터와 일치하는지 확인할 수 있다.

 

쿼리 실행

"query" 탭으로 전환하여 표준 SQL 명령을 이용하 데이터베이스와 상호 작용할 수 있다. 예를 들어 DROP TABLE 고객을 입력하면 모든 데이터와 함께 "고객" 테이블이 삭제되므로 주의하자!

첫 번째 데이터베이스 쿼리를 실행해 보겠다. Vercel 인터페이스에 다음 SQL 코드를 붙여넣고 실행해본다.

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

결과 화면은 이렇다.