Nextjs에 PostgreSQL 백앤드 달기

백앤드를 간단하게 구현해서 회원가입을 구현해 놓았는데, 이상하게도 그 이상은 손이 가질 않았다.

아마도 Prisma와 PostgreSQL을 하긴 했으나, 누군가의 글을 읽으며 수동적으로 한 것이라 제대로 익히지 못한 것이 문제인 것 같았다.

그래서 직접 한번 구현해보기로 했다.

1. PostgreSQL 설치하기

먼저 homebrew로 postgresql을 설치해준다.

윈도우일 경우에는 choco를 설치해서 하면 쉽게 가능하다.

그리고 services start로 자동 시작하도록 만들어 준다.

# 맥북인 경우
brew install postgresql
brew services start postgresql

아래 명령어를 입력해서 정상적으로 접속이 된다면 설치가 끝난 것.

postgreSQL은 서버-클라이언트 구조라서 postgre 서버가 실행중이어야 db에 접속할 수 있다.

psql postgres

이제 유저와 db를 설정해주자.

유저의 이름은 testuser, 비밀번호도 testuser로 설정해주었다.

CREATE USER testuser WITH PASSWORD 'testuser';
\du

자꾸 유저가 만들어지지 않아서 확인해 봤더니, 맨 끝에 세미콜론을 꼭 붙여주어야 명령어가 끝난다.

그리고 database도 하나 만들어주자.

CREATE DATABASE testdb;

그리고 \l 나 \list로 데이터베이스를 확인해준다.

여기서 위쪽에 있는 db 3개는 기본적으로 생성되는 것이다.

삭제하면 문제가 될 수 있으니 그대로 두는게 좋다.

2. Prisma 설치

이제 프리즈마를 설치해주자.

나는 prismaTest라는 폴더를 하나 만들어주었다.

npm써도 되는데, 나는 그냥 yarn으로 초기화를 해주었다.

yarn

그리고 프리즈마를 설치해준다.

npx명렁으로 프리즈마 초기 세팅을 만들어준다.

prisma init 실행시 폴더 하나에 프리즈마 설정 파일들이 생성된다.

참고로 npx는 npm 패키지를 설치하지 않고도 실행하게 해주는 명령어 도구이다.

yarn add prisma
npx prisma init

3. PostgreSQL 연결 설정

이제 prisma/schema.prisma.env로 들어가서 환경설정을 수정해주자.

파일 내부에서 아래와 같이 설정을 바꾸어 주면 된다.

DATABASE_URL="postgresql://아이디:비밀번호@localhost:5432/데이터베이스이름?schema=public"

4. schema.prisma 설정

이제 데이터베이스의 스키마를 설정해주자.

기본적으로는 아래와 같이 스키마가 들어있다.

generator client {
  provider = "prisma-client-js"
  output   = "../generated/prisma" <-- 이 줄 삭제할 것!
}

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

이제 이걸 자유롭게 바꿔주면 된다.

문제는 스키마 설정을 좀 배워야 한다는 것.

예를들어 아래와 같은 스키마가 있다고 해보자.

model User {
  id    Int @id @default(autoincrement())
  email String  @unique
  name  String?
}

➡️ model User { ... }은 데이터베이스 테이블 명이다.

➡️ id Int @id @default(autoincrement())

이 필드는 기본키이고, 숫자가 1, 2, 3… 자동으로 채워진다.

요소	의미
`id`	필드(열, 컬럼) 이름
`Int`	자료형 = 정수형
`@id`	이 필드는 Primary Key이다
`@default(autoincrement())`	기본값은 자동 증가 숫자

➡️ email String @unique

email 값은 고유해야 하며, 같은 이메일을 가진 사용자가 두 명 이상 존재할 수 없다.

요소	의미
`email`	필드 이름
`String`	문자열 타입
`@unique`	중복 불가 (Unique 제약조건)

➡️ name String?

name은 있어도 되고 null이어도(없어도) 된다.
요소
의미
name
필드 이름
String?
문자열 타입인데 ?는 nullable(널 허용) 의미

요소	의미
`name`	필드 이름
`String?`	문자열 타입인데 `?`는 nullable(널 허용) 의미

그래서 프리즈마의 데코레이터를 정리하면 아래와 같다.

데코레이터	의미
`@id`	기본키 지정
`@default(...)`	기본값 설정
`@unique`	고유값 제약조건
`@relation(...)`	관계 설정 (외래키, 연결된 테이블)
`@map("db_column")`	실제 DB에서의 컬럼명을 지정
`?`	해당 필드는 nullable (값이 없을 수도 있음)
`[]`	배열 (예: `String[]` = 문자열 배열)
`@필드명`	필드의 타입이 datetime일 때, 데이트 수정시 현재의 날짜로 자동갱신

5. 마이그레이션 실행

DB에 모델을 반영하기 위해 마이그레이션을 해준다.

맨 뒤에 이름은 자유롭게 정해도 된다.

npx prisma migrate dev --name testMyDB
## --name 뒤에 마이그레이션 이름 입력

6. Prisma Client 사용 예시

이제 간단한 서를 만들어서 백앤드에서의 CRUD를 테스트 해보자.

서버는 익스프레스로 만들것이다.

yarn add @prisma/client express

위의 명령어로 먼저 설치를 해준다.

index.js파일을 생성 후 아래와 같이 입력한다.

그리고 터미널에서 node index.js를 실행하면 서버가 실행된다.

const express = require('express');
const { PrismaClient } = require('@prisma/client');

const app = express();
const prisma = new PrismaClient();

app.use(express.json());
const port = 3001;

app.get("/", (req, res)=> {
   const body = req.params;
   res.send("test");
});

app.get('/users', async (req, res) => {
  const users = await prisma.User.findMany();
  console.log(users);
  res.send(`<div>${users.map((user) => {
    return `<name:$>email : ${user.email} / name:${user.name}</p><br>`
  }).join("")}</div>`);
});

app.get('/input', async (req, res) => {
  const { email, name } = req.query;
  const result = await prisma.User.create({data:{email : email, name: name}})
  console.log(email, name);
  res.send(`<h1>${email
  }</h1>
  <h2>${name}</h2>
  `);
})

app.listen(port, () => {
    console.log("listen http://localhost:3001")
});

프리즈마는 prisma.테이블명.명령어 형식으로 작동한다.

서버가 작동 중이니 이제 쿼리스트링으로 이메일, 이름을 입력해본다.

http://localhost:3001/input?email=testur@email.com&name=힘센캥거루

를 입력후 /users에서 확인을 해보면 데이터가 잘 출력되는 것을 볼 수 있다.

마찬가지의 방법으로 수정, 삭제도 가능하다.

아래 코드를 추가해보자.

...
app.get("/delete", async (req, res) => {
  const { email } = req.query;
  const result = await prisma.User.delete({where : {email: email}});
  console.log(email);
  res.send(`<h1>${email} 삭제 성공</h1>`)
})
...

그리고 아래 주소처럼 요청하면 삭제가 된다.

http://localhost:3001/delete?email=testur@email.com

수정도 어렵지 않다.

where로 데이터를 넣고, data 필드에서 내용을 변경해주면 된다.

...
app.get("/edit", async (req, res) => {
  const { email, name } = req.query;
  const result = await prisma.User.update({where : {email: email}, 
    data : {name : name}
  });
  console.log(email, name);
  res.send(`<h1>${email} 이름 수정 성공</h1>`)
})
...

그리고 쿼리 스트링을 넣어준 뒤 확인해보면 아래와 같이 이름이 변경되어 있는 것을 확인할 수 있다.

7. nextjs에서 사용하기

nextjs에서 prisma를 쉽게 사용하기 위해서는 사전 준비가 필요하다.

나는 src/lib 폴더 내부에 prisma.ts 파일을 만들어 주었다.

user에 대한 모든 입출력을 담당할 코드를 짜준다.

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

const globalWithPrisma = global as typeof globalThis & {
  prisma: PrismaClient;
};

let prisma: PrismaClient;

// 개발자 모드가 아닐 때는 매번 새로운 연결 시도
if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!globalWithPrisma.prisma) {
    globalWithPrisma.prisma = new PrismaClient();
  }
    // 개발자 모드일 때는 메모리 누수 방지를 위해 기존 연결 사용.
  prisma = globalWithPrisma.prisma;
}

export default prisma;

이렇게 한 뒤, /src/db 내부에서는 user을 관리하기 위한 함수를 정의해 주었다.

import { dbUserObject } from "@/types/allTypes";
import prisma from "@/lib/prisma";

export async function createUser(data: dbUserObject) {
    try {
        const user = await prisma.user.create({
            data: {
                ...
                email : data.user.email as string,
                ...
            }
        });
    
        return user; // 생성된 사용자 반환
    } catch (error) {
        console.error('Error create user', error);
        throw error;
    }
}

export async function getAllUsers() {
    try {
      const users = await prisma.user.findMany();
      return users;
    } catch (error) {
      console.error('Error fetching users:', error);
      throw error;
    }
  }

  // Read - 특정 사용자 조회
export async function getUserByEmail(email: string) {
    try {
      const user = await prisma.user.findUnique({
        where: { email },
      });
      return user;
    } catch (error) {
      console.error('Error fetching user:', error);
      throw error;
    }
  }

  export async function updateUser(email: string, data: Partial<Omit<dbUserObject, 'email'>>) {
    try {
      const updatedUser = await prisma.user.update({
        where: { email },
        data: {
          nickName : data.user?.nickName,
          ...
        },
      });
      return updatedUser;
    } catch (error) {
      console.error('Error updating user:', error);
      throw error;
    }
  }

  export async function deleteUser(email: string) {
    try {
      const deletedUser = await prisma.user.delete({
        where: { email },
      });
      return deletedUser;
    } catch (error) {
      console.error('Error deleting user:', error);
      throw error;
    }
  }