Next.js의 데이터 베이스 세팅

이번 챕터는...

이번에는 데이터 베이스를 이용해 볼 것이다. 그중 Postgres 데이터 베이스를 이용할 것이다. 기본적인 세팅부터 시작해 보자. Postgres 데이터 베이스에 관한 공식 문서는 다음 링크를 참고하자.

https://www.postgresql.org/

PostgreSQL

---

일단, 데이터 베이스를 세팅하기전에, 깃허브에 프로젝트를 올리고, Vercel과 연동할 것이다. (이 부분에 대한 글은 아예 또 추가로 올리겠다.) 이후 프로젝트와 Postgres 데이터 베이스와 연동할 것이다. 그다음으로 초기값으로 데이터 베이스에 데이터를 넣어둘 것이다. data fetch는 다음 글에서 작성하겠다.

---

깃허브 저장소 생성

프로젝트를 만들기 위해서는 깃허브 저장소를 만들어야 한다.

하는 방법은 다음 가이드를 참고하자.

깃허브 가이드

Quickstart for repositories - GitHub Docs

 

소스 올리기

[Git] GitHub 레파지토리(Repository) 생성하고 소스 올리기

---

 

Vercel 계정 생성

https://vercel.com/signup

Dashboard

위 링크에 방문, 계정을 만들자. 무료 플랜을 선택하자. 깃허브 계정과 연동하기 위해 Continue with GitHub를 선택하라.

프로젝트 연동과 Deploy

당신이 만든 깃허브 저장소를 선택하고, 불러올 수 있는 화면으로 이동이 되었을 것이다. 당신이 방금 만든 저장소를 불러오면 된다.

저장소와 연결하기!

이후 당신의 프로젝트 이름을 설정, Deploy (배포)를 누르자. 

Deploy를 누르면 프로젝트가 배포된 것

이제 프로젝트가 배포가 되었을 것이다.

배포된 뒤의 당신의 vercel 대시보드 화면

이제 깃허브와 연동되었으니, 당신은 main 혹은 master 브랜치에 push 할 때마다, 알아서 Vercel에 자동적으로 배포가 진행이 될 것이다.

PR이 생성되면 배포 에러를 초기에 찾을 수 있으며, 프로젝트 미리보기를 통해 팀원들과 공유 가능한 "즉시 미리 보기" 기능도 존재한다.

즉시 미리보기 관련 링크 >

https://vercel.com/docs/deployments/environments#preview-environment-pre-production

Environments

---

Postgres 데이터 베이스 생성

다음으로, 데이터 베이스를 생성하기 위해 Continue with Dashboard를 누르자. 이후 프로젝트 대시보드에서 Storage 탭을 선택하라. Connect Store > Create New > Postgres > Continue 를 선택하라.

이후 약관 동의, 데이터 베이스의 이름을 설정하자.

데이터 베이스의 지역이 Washington D.C (iad1)로 되어있는지 확인하자. 이건 모든 Vercel의 새로운 프로젝트를 위한 기본설정 지역이다.

https://vercel.com/docs/functions/configuring-functions/region#select-a-default-serverless-region

Configuring Regions for Vercel Functions

참고로 데이터 베이스의 위치를 어플의 코드와 같거나 가까운 지역으로 설정해서 데이터 요청의 시간 지연을 줄일 수 있다.

그리고, 데이터 베이스는 한번 초기설정되면 지역을 바꿀 수 없다. 다른 지역을 원하면 생성 "전" 에 설정하자.

Region은 기초적인 데이터 베이스 위치 세팅.

---

연결이 되었으면, .env .local 탭으로 이동하자. Show secret와 Copy Snippet를 눌러서 해당 값들을 복사하라. 복사하기 전에 secrets들이 나타나야 한다!

값 복사하기 전

코드 에디터에서 .env .example 파일 이름을 .env로 설정하자. 이후 Vercel에서 복사된 값들을 붙여 넣는다.

또한, 푸시를 할 때 데이터 베이스의 설정값들이 노출되는 것을 막기 위해서 .gitignore 파일에 .env 파일이 들어가 있는지 확인해 주길 바란다.

마지막으로 Vercel Postgres SDK를 설치하기 위해 터미널에서 

npm install @vercel/postgres

명령어를 실행하라.

초기 데이터 삽입

데이터 베이스가 있으니, 초기 데이터를 약간 넣어두자.(seed)

프로젝트의 /scripts 폴더 안에 seed.js 파일이 있다.

이 스크립트로 invoices, customers, user, revenue 테이블을 생성하고 데이터를 넣을(seed) 수 있다.

코드를 전부 이해할 수는 없지만, 전체적인 맥락에서 스크립트는 테이블 생성을 위해 "SQL"을 사용한다는 것만 이해하면 된다. 그리고 placeholder-data.ts 파일에 있는 데이터들이 테이블 생성 후에 초기 데이터로 입력될 것이다.

로컬 개발 서버가 실행 중인지 확인하고, pnpm run dev 다음으로 이동하자.

localhost:3000/seed 로 이동. 완료되면 브라우저에 "데이터 베이스가 성공적으로 빌딩 되었습니다."라는 메시지가 표시된다. 완료되면 이 파일을 삭제도 가능하다.

쿼리의 실행

예시로 쿼리를 실행해 보자. 코드는 다음과 같다.

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

위 코드로 데이터 베이스에 "질의"를 할 수 있다. 위 코드는 Vercel의 인터페이스에 붙여 넣으면 된다.

관련 Next.js 공식문서

https://nextjs.org/learn/dashboard-app/setting-up-your-database

App Router: Setting Up Your Database | Next.js

---