프론트엔드에서 백엔드와 유사한 데이터베이스 테이블표를 짤때, 매우 유용하게 사용가능하며, 프론트에서도 DB를 관리 할수 있게 된다.
이 글에서는 MySQL을 기준으로 사용하며, Prisma, Pscale을 다루게 된다.
하나의 번역기 텍스트같은 역할을 해주기에 매우 편리하게 사용할 수 있다.
Prisma - Next-generation Node.js and TypeScript ORM for Databases
더 편리하게 데이터베이스를 관리하기 위한 하나의 방법이다.
node.js typescript를 이용하는 사용자에게 편리하게 제공을 해준다.
npm install -D prisma
vscode의 Extension 으로 prisma 도 설치 하길 권유한다.
npx prisma init
으로 초기 설정파일을 만들어주어야 한다.
초기 설정 후 메세지
첫번째로 .env 파일에 있는 DATABASE_URL을 설정해주어야 한다.
schema.prisma 파일에서 datasoucre의 provider를 설정한다.
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
phone Int? @unique
email String? @unique
name String
avatar String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
// 해당 provider를 mysql로 사용한다는 의미이다.
// 그 외로 postgresql, mysql, sqlite, sqlserver or mongodb 가 있다.
// model User 를 생성하여 간단한 테이블 표를 만들수 있다.
@autoincrement :
기본 DB 내에 정수 형태의 시퀀스를 만들고 시퀀스에 따라 생성된 레코드의
ID 값에 증가된 값을 할당한다.
@id : 모델에 단일 필드 id를 지정한다.
@updateAt : 레코드가 마지막으로 업데이트된 시간을 자동으로 저장한다.
시간을 직접 지정하지 않으면 Prisma Client는 이 속성이 있는 필드의 값을 자동으로 설정한다.
? 사용한 이유는 꼭 있어야 하나 그 차이일뿐. 필수 요소가 아닌 경우 붙여준다.
MySQL 과 호환되는 serverless 데이터베이스 플랫폼
그러나 serverless 가 아닌이유는 Vitess라는 가장 스케일링이 뛰어난 오픈소스 데이터베이스 이기 때문이다.
이제 Pscale 이라는것을 설치해야한다.
https://github.com/planetscale/cli
두개의 링크를 보고서 window PowerShell 버전으로 설치하면 끝
pscale 명령어를 입력하면 저러한 창이 떠야한다.
PlanetScale은 데이터베이스 이상이며 CLI는 복잡한 명령 이상입니다. pscale 커맨드 라인을 사용하면 branch, deploy 요청 및 기타 PlanetScale 개념을 손쉽게 사용할 수 있습니다.
pscale database create carrot-market --region ap-northeast
위의 명령어을 통해 pscale의 하나의 repo 같은 데이터베이스 저장소를 만들수 있게 된다.
CLI의 명령일뿐 pscale에서 직접적으로 생성도 가능하다.
npx prisma db push
그전에 env 파일에서 DATABASE_URL="mysql://127.0.0.1:11873/carrot-market” 해당된
pscale connect carrot-market 으로 connect을 하였다면, 성공적으로 자신의 서버 주소가 나오는데 그것을 env 파일의 url에 적음으로써 성공적인 연결을 할 수 있게 만들어 놓는다.
이를 통해 prisma schema 에서는 성공적으로 테이블이 짜여져 있는 것을 확인 할 수 있다.
npx prisma studio
명렁어를 통해 해당된 데이터베이스 테이블표를 직접적으로 수정할 수 있는 페이지가 열린다.
npm install @prisma/client
// libs/client.ts
import { PrismaClient } from "@prisma/client";
export default new PrismaClient();
위 파일을 생성 후 npx prisma generate
명렁어 입력
// libs/client.ts
import { PrismaClient } from "@prisma/client";
export default new PrismaClient();
위와 같이 설정을 하고 난후 해당 api라는 서버를 수정할수 있게 할 수 있다.
이것은 NextJS의 기능이며, NextJS는 풀스택을 요구하는 하나의 프레임워크이다.
// api/clinet-test.jsx
import { NextApiRequest, NextApiResponse } from "next";
import clinet from "../../libs/client";
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
await clinet.user.create({
data: {
email: "hi",
name: "hi",
},
});
res.json({
ok: true,
});
}
http://localhost:3000/api/client-test 로 들어가게 된다면, 해당 json 파일을 확인할 수 있다.
또한, prisma studio 에서도 data의 파일이 추가된것을 확인할 수 있다.