[NextJs] - 풀 스택 투두리스트 만들기 (2) (feat. prisma/ postgreSQL)

 

 

서버를 따로 구축하지 않고

nextJS만으로 풀스택 투두리스트를 구현해보자..!

 

prisma를 사용해

postgreSQL 데이터베이스를

NextJS의 API router와 연동하는 작업이 필요하다.

 

 

가장 먼저 

postgreSQL이 설치 된 후 실행되어있어야 한다.

 

맥OS 기준으로

https://semtax.tistory.com/12

맥 OS 에서 PostgreSQL 설치하기

 

위 블로그 글이 정말 친절하게 설명해주었다.

이대로만 따라하면

설치하고 실행까지 한번에 된다.

 

터미널에서 postgreSQL을 실행시켜놓은 다음

 

 

 

이제 prisma를

설치하고 연결해주자.

 

npm install prisma --save-dev

npx prisma init

npx prisma init명령어는

설치된 prisma를 사용하기 위해

최초 1회 실행해주는 명령어이다.

 

 

 

postgresql 외에도 mysql, mongodb 등 다양한 데이터베이스와 호환이 가능하다는 것을 알려준다.

 

 

 

여기까지 따라왔다면

prisma폴더와 

schema.prisma 파일이 생겼을 것이다.

 

또한 .env파일도 생겼을 건데

안에 내용을 보면

 

DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"

이런 변수가 등록이 되어있을 것이다.

현재 프로젝트를 DB와 연결하기 위한 것인데

 

공식문서를 보면

postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA

 

이런 형식을 따른다.

 

간단하게 실행하기 위해서

우리는 postgreSQL의 최초 자동생성된 계정이름을 넣어주자.

 

DATABASE_URL="postgresql://내유저네임@localhost:5432/mydb?schema=public"

 

postgresql 데이터베이스를 연결할 것이고

postgresql이 실행된

localhost:5432 도메인과 연결할 것이다.

라는 뜻이다.

 

그 다음

 

schema.prisma 파일에

model을 설정해주자

 

최초 설정은 이렇게 되어있지만

그 아래에 Note라는 모델을 추가하자

 

프론트에서 평소에 별 생각없이 주고받았던

친숙한 데이터명들이다.

 

가장 앞에는 데이터이름

중간엔 데이터 타입

가장 뒤엔 기본으로 하는 속성들 이라고 

내마음대로 정의해봤다.. ㅋㅋ

 

모든 모델에는 id가 하나씩은 있어야하고

@default(autoincrement())는 id값이 자동으로 1씩 늘어난다는 걸 뜻한다.

 

createdAt 뒤엔 now()로 생성될 때의 시간

updatedAt은 수정될때의 시간을 자동으로 체크해주는 것 같다.

 

 

 

npx prisma db push

위 명령어로

db의 데이터는 유지하면서

스키마의 수정사항을 반영해주고

 

npx prisma studio

 

실제로 DB가 어떻게 생겨먹었는지

눈으로 확인하기 위해서

studio를 켜주면

 

All Models에서

아까 우리가 입력한 모델인

Note가 나오고 눌렀을 때

id, title등 데이터 명이 나온다.

 

데이터베이스를 연결하고 테이블을 생성했으니 Prisma로 데이터베이스를 제어하기 위해 

client를 생성해주자

npm install @prisma/client

그리고

Prisma CLI가 우리의 Prisma schema 를 읽고 

node_modules/@prisma/client 에 Prisma Client 를 생성하게 하기 위해

 

npx prisma generate

generate를 해주는데

스키마가 변경될 때마다 이 명령어를 입력해줘야한다!

 

이제 거의 다왔다

 

client를 import해서 여기저기 쓰기위해서는

마지막으로

lib폴더 생성하고 prisma.ts 파일을 만들어서

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

declare global {
  var prisma: PrismaClient | undefined;
}

export const prisma = global.prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') global.prisma = prisma;

위의 코드를 삽입해주자.

 

 

 

 

이제 이 DB와

API router를 이용해

nextJS 내장서버와 통신할 준비는 끝났다.

 

 

다음 글 부터는 

투두리스트 CRUD를 직접 구현하면서

api router와 친해져보자