[NEXT]당근마켓(1) - Prisma를 이용한 Database 생성

백엔드 접근을 처음 해보지만.. 강의내용을 토대로 정리해보자

어려웡 ㅜㅜ

 

Prisma란?

nodejs, typesciprt의 ORM(Object Relational Mapping)

js or ts와 데이터베이스 사이에 다리를 놓아주는 역할을 한다 (번역기라고 생각하면 됨)

 

Prisma를 사용하기 위해서 먼저 Prisma에 DB가 어떻게 생겼는지 데이터의 모양을 설명해줘야 하는데 이 때 schema.prisma를 사용한다.

 

Prisma가 타입에 관한 정보를 알고 있으면 client를 생성해 줄 수 있는데client를 이용하면 TS로 DB와 직접 상호작용 가능하다.

 

Prisma Studio : Visual Database Browser, DB를 위한 관리자 패널같은 것.

 

설치방법

npm install prisma -D

npx prisma init
// prsima/schema.prisma 와 .env파일을 생성시킴

설치하면 다음과 같은 안내문이 뜬다 이것을 참고하여 DB를 연결해보자!!

 

1️⃣.env파일에서 DBurl 연결하기 

이 과정은 Planetscale을 이용해야한다.

 

PlanetScale이란?

mysql과 호환되는 severless 데이터베이스 플랫폼(서버를 유지할 필요가 없다는 뜻)

 

Vitess란?

유튜브를 scale하기 위해 구글이 만든 것으로

mysql을 스케일링 하기 위한 데이터베이스 클러스터링 시스템

 

 

일단...어떻게 설치하냐면

Plane Scale cil 설치

(윈도우 기준)(커맨드 창 실행시 관리자 모드로 실행해야함)

1. scoop 설치(윈도우용 커맨드 라인 설치 프로그램)

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

2. 다음 명령어 입력

> scoop bucket add pscale https://github.com/planetscale/scoop-bucket.git
> scoop install pscale mysql
> scoop update pscale

 

이러고 pscale쳤을 때 뭔가 나오면 잘 설치된것이다. 그 다음!

vsc에서 carrot-market터미널을 켜보자

PlanetsScale에 연결하기

1. pscale auth login 입력

브라우저에 있는 코드랑 맞는지 확인하고 confirm code를 누름

 

2. pscale database create [프로젝트명] --region ap-northeast 입력

이러면 db생김 저기에 뭐 있는건 신경ㄴ ㄴ

3. pscale connect [프로젝트명] 입력

이 콘솔은 닫으면 안 됨

4. url복사해서 .env파일에 넣기

.env

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

 

연결준비완료!

 

 

2️⃣ scema.prisma 파일에서 datasource의 provider설정하고 DB에 사용할 model만들기

//기존의 schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider     = "postgresql"
  url          = env("DATABASE_URL")
}

//바뀐

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma" // 참조무결성을 위한 코드
}

Referential integrity (참조 무결성)
(어떤 다른 모델을 참조하는 경우 해당 모델이 반드시 존재해야 함)
참조 무결성은 모든 참조가 유효함을 나타내는 데이터 세트의 속성입니다. 참조 무결성을 위해서는 한 레코드가 다른 레코드를 참조하는 경우 반드시 해당 참조하는 레코드가 존재해야 한다. 예를 들어 Post 모델이 user필드를 정의하는 경우 User(모델)도 반드시 존재해야 합니다. 참조 무결성은 참조를 손상시키는 변경을 방지하는 제약 조건과 레코드를 업데이트하거나 삭제할 때 실행되는 참조 작업을 정의함으로써 적용됩니다.
https://www.prisma.io/docs/concepts/components/prisma-schema/relations/referential-integrity

 

현 프로젝트에선 mysql을 사용할 것이므로 provider을 위와 같이 바꿔 주었다

 

DB에 사용할 model은 model 어쩌고 이렇게 써주면 된다.

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement()) // 따로 건들지 않으면 1,2,3,4,로 증가함
  phone     Int?     @unique
  email     String?  @unique
  name      String
  avatar    String?
  createdAt DateTime @default(now())
  updateAt  DateTime @updatedAt
}

위에서 사용된 코드를 잠시 정리해보자면 다음과 같다

@id : 모델에 단일 필드 id지정

@autoincrement : 기본 DB 내에 정수 형태의 시퀀스를 만들고 시퀀스에 따라 생성된 레코드의 ID 값에 증가된 값을 할당

@updateAt : 레코드가 마지막으로 업데이트된 시간을 자동으로 저장. 시간을 직접 지정하지 않으면 Prisma Client는 이 속성이 있는 필드의 값을 자동으로 설정

 

3️⃣PlanetScale에 DB Push 하기

> npx prisma db push

위의 준비가 완료되면 위의 명령어를 입력한다.

그럼 Prima Client가 생성되었다고 뜨면서 아래의 창이 나온다.

 

4️⃣ Prisma Client 설정

Prisma Studio : 데이터베이스 관리자 패널

npx prisma studio

 

db를 쉽게 관리할 수 있음!!

프리스마는 데이터베이스를 수정해주고 공짜로 이용할 수 있는 관리자 패널 제공

그리고 client를 제공함

 

 

prisma client 생성 방법

npm install @prisma/client

 

이후 client라는 파일을 만들어서 다음과 같이 작성해줌

import { PrismaClient } from "@prisma/client";

export default new PrismaClient();

이러면 client.user.create와 같은 코드로 새 정보를 생성할 수 있음

 

 

...어렵다....

API Routes

 

API route는 Next.js로 API를 빌드하기 위한 솔루션을 제공합니다.

pages/api 폴더 내의 모든 파일은 /api/*에 매핑되며 API endpoint로 처리됩니다.

server-side 전용 번들이며 client-side 번들 크기를 늘리지 않습니다.

req: http.IncomingMessage의 인스턴스와 pre-built된 일부 미들웨어
res: http.ServerResponse의 인스턴스와 일부 helper함수

예를 들어 다음 API 경로 pages/api/user.js는 상태 코드가 200인 json 응답을 반환합니다.

export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}

https://nextjs.org/docs/api-routes/introduction

API Routes: Introduction | Next.js