[Next.js + Prisma + Planet scale] 기본세팅

노마드코더 [풀스택]캐럿마켓 클론코딩 강의 내용을 정리한 글입니다.

prisma & planet scale 로 DB 셋팅하기

✅prisma 설치 및 schema 정의

npm i prisma -D
npx prisma init #prisma 사용시에는 앞에 꼭 npx 를 붙여서 사용해야함.

# schema.prisma 에서 provider 내가 사용할 언어로 변경
datasource db {
  provider             = "mysql"
  url                  = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

# db 모델 (스키마) 정의 => 우리 데이터는 이렇게 생겼어요!
model User {
  id        Int      @id @default(autoincrement())
  name      String
  updated   DateTime @updatedAt
  createdAt DateTime @default(now())
  avatar    String?
  phone     Int?     @unique
  email     String?  @unique
}

# +만약 자동 정렬이 안된다면?
# settings.json 에 추가
"[prisma]": {
"editor.defaultFormatter": "Prisma.prisma"
}

✅planet scale db 생성

• https://planetscale.com/ 회원가입
• window 라면 scoop 을 사용해보자.
• mac, linux 유저라면 https://github.com/planetscale/cli 이 링크를 참조하여 설치하면 된다.

# planet scale 을 위한 cli 설치 (window)
scoop bucket add pscale <https://github.com/planetscale/scoop-bucket.git>
scoop install pscale mysql

# placle 로그인
pscale auth login

# 데이터베이스가 위치할 지역을 선택. 
# 앱과 db의 지연시간을 줄이려면 서버가 있는 쪽(내가 있는 곳 ㅎㅎ) 가까이에 둬야함.
pscale region list 

#db 생성 (아까 리스트로 봐둔 지역을 함께 입력해주자) 
pscale database create carrot-market --region ap-northeast

✅prisma 와 DB를 연결해보자.

• planet scale 에서는 별도의 암호 없이 db를 연결할 수 있는 연결 메서드를 제공하고 있다.
• 아래와 같이 입력하면 url 을 얻게 되는데, 해당 url을 포함해서 아래와 같이 수정하여 환경변수에 추가하자.

# connect   Create a secure connection to a database and branch for a local client
pscale connect <연결할 db 이름>

#.env
# 내가 사용할 db 종류 - mysql (planet scale 이 mysql 호환임)
# db 종류://url/db 이름 
DATABASE_URL="mysql://127.0.0.1:3306/carrot-market"

• planet scale 에서는 데이터간 참조 무결성 위반을 별도로 체크해주지 않기 때문에, prsima를 통해 추가 설정이 필요하다.

💡 참조 무결성 : 두 개의 테이블이 있을 때 한 테이블의 기본 키가 다른 테이블의 외래 키가 되면서 두 데이터간 연결이 성립된다. 만약 어떤 테이블의 외래 키로 설정된 값이 다른 테이블에 존재하지 않는 키라면 이는 참조 무결성에 위반된다.

예시) 고양이 테이블과 주인 테이블이 있다. 고양이 테이블의 외래키는 주인 테이블에서 기본 키인 주인의 이름이라고 하자. 각 고양이 데이터는 이 외래 키를 가지고 어떤 주인에게 속한 고양이인지 알 수 있는데, 한 고양이의 외래 키가 주인 테이블에 존재하지 않는 이름(기본 키) 이면 이 경우도 일종의 참조 무결성 위반이라고 할 수 있다.

• 따라서 schema.prisma 파일에 아래 코드를 추가해주자.

generator client {
//...
previewFeatures = ["referentialIntegrity"]
}

datasource db {
//... 
referentialIntegrity = "prisma"
}

✅prisma로 만든 schema 를 DB 에 추가해주자.

npx prisma db push

• planet scale 의 db > schema 탭에 가서 확인해보면 우리가 정의한대로 잘 push 된 것을 볼 수 있다.

✅Prisma Client 로 DB 에 쿼리를 전송해보자.

# prisma 에서 제공하는 관리자 패널
# db 내용을 확인하고 GUI 로 직접 접근할 수 있다.
npx prisma studio 

# prisma client 를 생성 
# 자바스크립트 or 타입스크립트로 DB에 접근할 수 있도록 도와주는 도구
npm i @prisma/client
npx prisma generate

• Next.js 의 pages > api 폴더 안에서는 express 처럼 api 서버를 만들 수 있다.

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

// api > client-test.tsx
import {NextApiRequest, NextApiResponse} from 'next';
import client from '../../libs/client';

// handler 함수는 exrpess의 controller 함수 같은 역할
// 마찬가지로 req, res 객체를 인자로 받고 있다.
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {

	// db의 user 테이블에 데이터 추가
	// prisma 쿼리는 awati 으로만 실행할 수 있다고 한다. 
  await client.user.create({
    data: {
      email: 'hi',
      name: 'hi',
    },
  });

  res.json({
    ok: true,
  });
}

• 브라우저에서 API 주소로 간 뒤 새로고침 후, prisma studio 를 살펴보면 아래와 같이 데이터가 추가된 것을 확인할 수 있다.

👀참고자료

https://www.prisma.io/docs/concepts/components/prisma-client

https://heokknkn.tistory.com/41