6 DATABASE SETUP

5는 tailwind css라 건너 뜀
6.0 Before We Start
6.1 What is Prisma
Prisma란?
Node.js Typescript ORM(Object Relational Mapping)
번역기라고 보면 됨.
쿼리 없이 js로 DB 다룰 수 있게 해주는거.

6.2 Prisma Setsup
1. VSCode extension에서 Prisma 설치.
2. npm i prisma -D 설치
3. 명령어 바로 prisma하면안되고 npx prisma로 해야 함.
npx prisma init
그럼 prisma폴더와 .env 생김
아래 안내문구도 뜸. 저대로 해보자.

prisma/schema.prisma가서 provider를 mysql로 바꾸장

@같은 것들은 공식문서에 다 있다.

 

6.3 What is PlanetScale
serverless database platform = 데이터베이스 제공해준다.
serverless  = 서버를 우리가 유지보수 할 필요 없다는 뜻.
AWS의 RDS(관계형데이터베이스서비스)가 아님. 거기선 모든 설정 해야 함.
scale up/down다 해야 함.
MySQL-compatible = MySQL이 아님
그래서 설정을 좀 바꿔야 함. 나중에 보자.

MySQL이 아닌 이유는 얘네가 Vitess를 사용하기 때문.
Vitess는 유튜브를 scale하기 위해 구글이 만든 것
다시말해 Vitess는 대기업들이 규모에 맞게 MySQL을 scale하기 위해 쓰는 방법.
초당 수백만개의 쿼리, 수십만개의 연결, 수만개의 노드가 필요하면 scaling어렵다.
youtube,naver,slack,airbnb,twitter등에서 쓰임 ㄷㄷ
오픈 소스임.
planetscale의 가격:

planetscale은 개발자 경험이 좋음.
DB를 깃처럼 사용 할 수있다. 브랜치 따서 만들고..
downtime없이 배포 가능.
계정 만들자. 깃헙 있으면 그걸로 가입 가능.

6.4 Connecting to PlanetScale
여기 설명있음.
https://github.com/planetscale/cli

windows면 먼저 scoop설치해라.
https://scoop.sh/
파워쉘로 아래 명령 치면 됨.

> Set-ExecutionPolicy RemoteSigned -Scope CurrentUser # Optional: Needed to run a remote script the first time
> irm get.scoop.sh | iex

근데 어드민으로 해서 잘 안되면(scoop에서 보안상 이슈로 ㅊㅊ 안함.) 
아래가서 해결 책을 봐라
https://github.com/ScoopInstaller/Install#for-admin

나는 아래 명령어 돌림

 

iex "& {$(irm get.scoop.sh)} -RunAsAdmin"

다시 planetscale, 아래 명령어 쳐주면 됨

scoop bucket add pscale https://github.com/planetscale/scoop-bucket.git
scoop install pscale mysql // pscale mysql 설치 함.

그래서 VSCode의 터미널에서 psacle을 쳐보면 잘나와야 하는데

에러가난다.

windows는 powershell로만 되나보다. 얼른 맥으로 갈아타고싶다.
혹시몰라서 vscode 껐다 키니까 된다.

pscale region list를 실행해보자. 근데 로그인 안돼있어서 안됨.
로그인 하자: pscale auth login
그럼 브라우저 창이 뜨고, 터미널의 Confirmation Code가 같은지 확인 하면 됨

다시 pscale region list 실행

ap-northeast에 DB만들어보자.

pscale database create carrot-market --region ap-northeast
carrot-market이란 DB를 해당 지역에 만듦. 
터미널에 링크 뜸.

컴퓨터와 PlanetScale 사이에보안 연결 어떻게 만들까?
  connect        Create a secure connection to a database and branch for a local client
pscale connect carrot-market
위 명령어 치면 로그인 된 내 계정의 DB에 연결이 됨.
따로 id,pw 저장 할 필요 없음.

연결됨

그럼 .env 파일에 다음과 같이 넣는다.

DATABASE_URL="mysql://127.0.0.1:3306/carrot-market"

그럼 보안 tunnel이 생기는 것.

6.5 Push To PlanetScale
PlanetScale(Vitess)은 MySQL compatible이기 때문에, 추가 설정이 필요함.
Vitess는 foregin key constraint가 없다.

예:
Users DB:
id: 1 username:nico
Comments DB:
id:1 text:wow! user:(Users DB:1)//객체주소알려주는거

id5인 사람(존재하지않는 사용자)이 만약 댓글 추가 하려면, 
작성자의 정보화 함께 댓글을 달려면 맨 처음 User DB에서 id가 5인 사용자가 존재하는지 확인함.
그렇기 때문에 Users DB에 반드시 있어야 함.(MySQL,PostgresQL 에서)

근데 Vitess는 가능함. DB 분화에 특화되어있음.
그래서 댓글 생성 전에 사용자가 존재하는지 확인하지 않음.
foreign key constraint를 지원하지 않음.
그래서 저렇게 저장해도 오류 일어나지 않음.
이는 좋은게 아니야
그래서 이런 기능이 없는 Vitess가 아닌 Prisma에서 체크를 해야 함.

relationMode = prisma하면 됨.

그러면 Data 스키마를 push해보자.
npx prisma db push

Prisma Client가 생성됨!
플래닛 스케일 가면 스키마 업로드 된거 확인 가능.

6.6 Prisma Client
npx prisma studio
실행하면 DB 관리자 페이지 보임.

이걸로 DB추가도 가능

 

일단 client를 추가해보자
npm i @prisma/client
-D를 안붙인 이유는 백엔드에서 직접 이 client를 사용할 것이기 때문
=서비스에서 사용한다.
lib폴더에 client.ts만들고 아래 내용 작성

import { PrismaClient } from "@prisma/client";
export default new PrismaClient();

그럼 prismaclient만든거야
그리고 다음처럼 해보자.
npx prisma generate

노드모듈에 설치 됨.
모듈 가서 보면 내가 친 DB 스키마가 typescript로 등록 되어 있음

 

user라는 우리가 정의한 테이블을 다룰 수 있다.

BUT 
그냥 brower에서 접근 가능한 저런 파일에서 DB를 직접 조작할 수 있는 소스를 쓰면
보안에 말도안되는 결점이 되겠지.
그래서 다행이도 에러가 뜸.
nextjs 프론트엔드에서 prisma를 임포트 할 수 없다.

그렇다면 이 client를 어디서 사용해야 하나?

6.7 API Routes
보통은 백엔드 서버를 따로 만들지
근데 NextJS에서 API만들기도 가능.
pages폴더에 api폴더 만들면 됨
NextJS서버에 API가 생긴거
규칙 가능단함.

그리고 실행시키고 플래닛스케일로 오면 데이터가 생김

 

6.7 Recap
npx prisma db push
npx prisma generate = 데이터베이스에 말걸 수 있는 client 생김