Chapter 6. Setting Up Your Database

PreviousChapter 5. Navigating Between Pages NextChapter 7. Fetching Data

Last updated 1 year ago

Was this helpful?

Chapter 6. Setting Up Your Database

Chapter 6

데이터베이스 설정하기

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

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

GitHub 저장소 만들기

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

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

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

Vercel 계정 만들기

프로젝트 연결 및 배포

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

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

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

PostgreSQL 데이터베이스 만들기

다음으로 데이터베이스를 설정하기 위해 Continue to Dashboard을 클릭하고 프로젝트 대시보드에서 Storage 탭을 선택합니다. Connect Store → Create New → Postgres → Continue를 선택하세요.

연결하면 .env.local 탭으로 이동하여 Show secret 및 Copy Snippet을 클릭하세요. 복사하기 전에 비밀 키가 노출되는지 확인하세요.

코드 에디터로 이동하여 .env.example 파일을 .env 로 이름을 변경하세요. Vercel에서 복사한 내용을 붙여넣으세요.

중요: .gitignore 파일로 이동하여 .env가 무시되도록 하여 GitHub에 푸시할 때 데이터베이스 비밀 키가 노출되지 않도록 해야 합니다.

데이터베이스 시드 작성하기

이제 데이터베이스를 생성했으니 초기 데이터로 시드를 심어봅시다. 대시보드를 구축하는 동안 사용할 데이터를 가져오게 됩니다.

프로젝트의 /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 파일로 복사하기 전에 데이터베이스 비밀 키를 표시했는지 확인하세요.

데이터베이스 탐색

데이터베이스를 확인해봅시다. 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

Was this helpful?