Chapter 6. Setting Up Your Database

Chapter 6

데이터베이스 설정하기

대시보드 작업을 계속하기 전에 데이터가 필요합니다. 이 장에서는 @vercel/postgres를 사용하여 PostgreSQL 데이터베이스를 설정합니다. 이미 PostgreSQL에 익숙하고 자체적으로 데이터베이스를 구축하려는 경우 이 장을 건너뛰고 직접 설정할 수 있습니다. 그렇지 않다면 계속해봅시다!

이 장에서는...
다음과 같은 주제들을 다룰 예정입니다.
프로젝트를 GitHub에 푸시합니다.
Vercel 계정을 만들고 미리보기와 배포를 위해 GitHub 저장소를 연결합니다.
PostgreSQL 데이터베이스를 생성하고 프로젝트와 연결합니다.
초기 데이터로 데이터베이스에 시드를 심습니다.

GitHub 저장소 만들기

시작하기위해 아직 리포지토리를 GitHub에 푸시하지 않았다면, 푸시합시다. 이렇게 하면 데이터베이스를 설정하고 배포하는 것이 더 쉬워집니다.

리포지토리 설정에 도움이 필요하면 GitHub의 가이드를 확인하세요.

유용한 정보:
GitLab 또는 Bitbucket과 같은 다른 Git 제공 업체도 사용할 수 있습니다.
GitHub를 처음 사용하는 경우 GitHub 데스크톱 앱을 사용한 단순화된 개발 워크플로우를 추천합니다.

Vercel 계정 만들기

계정을 만들려면 vercel.com/signup에 방문하세요. 무료 "hobby" 플랜을 선택하세요. GitHub와 Vercel 계정을 연결하려면 Connect with Github을 선택하세요.

프로젝트 연결 및 배포

다음 화면으로 이동하게 됩니다. 여기서 방금 만든 GitHub 리포지토리를 선택하고 가져오기를 할 수 있습니다:

프로젝트 이름을 지정하고 배포를 클릭하세요.

만세! 🎉 프로젝트가 이제 배포되었습니다.

GitHub 리포지토리를 연결함으로써, 변경 사항을 main 브랜치에 푸시할 때마다 별도의 설정 없이 Vercel이 자동으로 애플리케이션을 재배포합니다. pull request를 열 때에도 미리보기가 가능하여 배포 오류를 미리 확인하고 프로젝트의 미리보기를 팀원들과 공유할 수 있습니다.

PostgreSQL 데이터베이스 만들기

다음으로 데이터베이스를 설정하기 위해 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

PreviousChapter 5. Navigating Between Pages NextChapter 7. Fetching Data

Last updated 1 year ago