1. Prisma setup
Prisma?
Prisma는 node.js와 ttypescript ORM(Object Relational Mapping) 이다. 하는 역할은 쉽게 이야기해 js 또는 typescript 와 데이터 베이스 사이에 연결해주는 역할을 한다. 또한, prisma studio(database admin pannel) 라는 DB GUI가 제공되며 client 또한 제공 해준다. Prisma는 PostGreSQL, MySQL, SQL server, SQlite 그리고 MongoDB에 적용용 가능하다. carrot market 강의에서는 MySql 을 사용할 것이다 그 이유는 PlanetScale(MySQL과 호환되는) 데이터 베이스(플랫폼)를 이용 할것이기 때문이다.
Prisma setup
-
Prisma extention (in VSC) : 설치하게되면 syntax highligt, formatting, 자동 완성 기능 등을 지원해준다.
-
npm i prisma -D : prisma 설치 커맨드.
-
npx prisma init : 우선 prisma 를 사용할때에는 npx 를 사용하게되며, 이 커맨드는 prisma file 과 .env 파일이 생기며 terminal 창에 내가 해야될것들을 알려준다. 지나치지말고 읽어보고 설정해야 한다!!!. 여기서 적용해 주어야 될것들은,
- .env 파일에서 DATABASE_URL="POSTGRESQL: ...." 이라고 되어있는데 planetscale data base url로 바꾸어 주어야 된다.
- schema.prisma 파일에서 provider를 mysql로 설정한다.
잠깐!!!
가끔 아주 중요한것을 잊어버리고 넘어가는 경우가 있다, .gitignore 파일에 .env 파일을 꼭 설정하는것을 꼭 잊지 말아야된다!!!
Prisma 몇가지 기본 사용법.
Prisma 공식 개발 문서 링크 ->
- @unique : 어떤 필드를 고유값으로 지정
- @id @default(autoincrement()) : 주로 id 필드를 만들때 사용됨(Primary key) autoincrement는 순차적으로 증가하며 필드의 아이디 값이 지정됨.
- @default(now()) : 현재 시간을 적용함 (createdAt으로 주로 사용)
- @updatedAt : 필드값이 업데이트 되었다면 알려주는 것
2. PlanetScale setup
PlanetScale?
PlanetScale은 MySQL과 호환되는 serverless 데이터베이스 플랫폼이다.
여기서 serverless의 의미는 서버 관리는 이곳 플랫폼 사에서 해주는것이기 때문이다. 이것은 AWS 또는 RDS와는 다르게 서버를 만들고, 크기설정 등 모든것을 대신 해준다. PlanetScale에는 Vitess(MySQL compatible database)가 사용되어 지는데 이것은 Youtube와 같은 곳에 사용되는지는 오픈소스 기술이다. 이것은 데이터 베이스의 scaling, online SChema migrations 등을 쉽게 할수있게 하는 기능들을 제공한다. 이것이 planetScale 적용되어 있어 데이터 베이스 구축을 더 손쉽게 할수 있다. CLI(Command Line Interface) 또한 지원한다.
PlanetScale setup (Window)
-
우선, mysql 호환을 위한 scoop 설치를 해야한다 -> scoop 설치 링크 이후 powershell을 실행하여 진행해야 하지만 VSC 터미널에서 진행 가능하다
-
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
-
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
-
yes 이후 엔터
-
scoop install curl
-
scoop bucket add pscale https://github.com/planetscale/scoop-bucket.git
-
scoop install pscale mysql
-
scoop update pscale
-
pscale : 이 커맨드를 통해 PlanetScale설치가 정상적으로 되어있나 확인과 커맨드 리스트 를 볼수 있음.
-
pscale auth login : 브라우저가 뜨면서 confirmation 버튼 클릭후 컴펌. (나중에 서버 연결이 안될시 로그인을 다시 해주어야됨.)
-
pscale region list : 지역 check. 한국의 경우 japan으로 지정 그리고 Slug 컬럼에서 ap-northeast (Tokyo) 를 기억해 놓자.
-
pscale database create carrot-market --region ap-northeast : 데이터베이스 생성 하는 커맨드
-
pscale connect carrot-market : pscale을 연결 하는 커맨드. 그리고, .env 에 mysql://127.0.0.1:3306/carrot-market 을 넣어주어야한다. 이 커맨드를 통해 많은 부분을 생략하고 서버와 연결이 가능하다!.
-
npx prisma db push : 데이터베이스에 새로운 필드나 모델이 수정,추가한 뒤 push 하는 커맨드
-
npx prisma studio : 데이터베이스 브라우저 접속 (데이터베이스 admin pannel)
-
npm i @prisma/client : (* 안되면 yarn add 로 하기!) 이곳에서 -D(development dependency) 옵션을 사용하지 않은 이유는, 백엔드에서 client를 직접 사용하기 때문이다. client 를 설치하는 커맨드
-
npx prisma generate : PrismaClient를 생성하는 커맨드 이것은 prismaClient를
node_module/@prisma/client 이 생성되며, client를 백엔드에서 핸들링이 가능하게 된다.
잠깐! previewFeatures = ["referentialIntegrity"] 를 schema.prisma 파일내 generator clint 안에 추가 해주어야 된다 이걸 추가해주는 이유는 어떠한 객체(model)가 다른 객체(model)에 연결될때 그 객체(model)가 존재여부 확인을 위해 지정해 주는것이며 referentialIntegrity = "prisma" 는 datasource db 안에 추가해주어 이작업은 prisma 가 하게 할것을 설정한다고 설정 해주어야 된다. 이를 통해 prisma가 referentialintegrity 확인이 가능하게 되어, forign key 에대한 작업을 제약 없이 가능해진다.
잠깐!!! PrismaClient는 브라우저에서 실행 할수 있으면 안된다.(데이터 보안!)
3. NextJS API 만들기(!!!중요!!!)
Awesome NextJS(API route) : 가장 기본적으로, NextJS 프레임 워크에서는 폴더명이 즉 url로 적용된다. 우선, NextJS 멋진 기능이 너무 많지만 특히나 API 만드는 방법 또한 너무 너무 편리하다... NextJS를 사용하기 이전에는, 서로 다른 서버에서, frontend는 리액트로, 백엔드는 nodeJS로 만들었었다고 한다. 그러나 NextJS Framework는 API까지도 만들수 있는 기능이 탑재 되어있다. 방법은 간단하다.
- pages 폴더 안에 api라는 이름으로 폴더를 만들면된다. 이름은 반드시 api 이여야 된다. API 라우트를 위한 규칙이 있는데 그 규칙은 export default function handler() 을 해주면 된다.
- 이 handler()함수 안에서는 NextApiRequest (안에는 query cookie body env,preview, previewData 가 들어있다) 와 NextApiResponse (안에는 send,json,status,redirect 등이 들어있다) 사용하여 client를 백엔드에서 핸들링이 가능해 진다.
- create 과 같은 함수로 데이터 처리를 해야될 경우에는 비동기(async)로 처리해야 한다.
- api 데이터 같은경우엔 .json() 함수를 사용하여 json 형태로 전달 할수있다.
