Next.js기반 교회 웹사이트 제작 [10] - prisma(Prisma client 기능 및 설치)

자 이제 prisma로 DB를 조작해 봐야겠지? 

DB를 조작하기 위해선 Prisma Client가 있어야해 

여기서 prisma Client란 뭘까?

Prisma Client : 데이터베이스 스키마에 맞게 자동 생성된 데이터베이스 클라이언트
Prisma Client를 생성하고 인스턴스화 하려면 

이 부분이 정의되어 있어야하고

npm install @prisma/client 명령어를 통해서 npm 패키지를 설치해야해

근데 npx prisma generate라는 명령어가 있거든? 
이 명령어는 Prisma Client를 생성하고 업데이트 하는데 사용하는 핵심 명령어야
Prisma Client는 schema.prisma파일에 정의된 데이터 모델을 기반으로 생성되는, 타입 안전한 데이터베이스 쿼리빌더이고

역할은 3가지가 있어
1. Prisma Client 생성 : schema.prisma 파일에 정의된 데이터 모델(테이블, 필드, 관계)분석하여, 해당 모델들에 대한 쿼리를 쉽게 작성할 수 있는 Javascript/TypeScript코드를 생성함
2. Prisma Client 업데이터 : schema.prisma 파일을 변경한 후 (새로운 모델추가, 필드 수정 등..) npx prisma generate를 실행하면 변경된 스키마에 맞게 Prisma Client를 다시 생성함. 즉, Prisma Client를 최신 스키마와 동기화 하는거임
3. @prisma/client 설치: 만약 프로젝트에 이 패키지가 설치되어 있지않다면, npx prisma generate를 처음 실행할 때 자동으로 이 패키지를 설치해줘.그니까 그냥 npm prisma generate로 한번에 하자

자 설치가 완료되었으면 Import 해서 사용해볼까?

자 공식문서에서 이렇게 사용하라하네

그럼 우리도 만들어보자
prisma폴더에 client.js를 만들고 이걸 재사용할 수 있게 만들거야

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

const prisma = new PrismaClient({

  // 로깅 레벨 설정

  // 모든 로깅을 볼 수 있는 log 옵션임

  log: ["query", "info", "warn", "error"],

});

module.exports = prisma;

이 파일을 다른 곳에서 import하면 이미 생성된 prisma 객체를 가져오기 때문에 새로운 인스턴스가 만들어지지 않음

근데 개발환경에선 핫리로딩 문제가 있어

핫리로드가 뭐냐면 Nextjs같은 프레임워크를 사용할떄 파일 수정이 되면 리로딩 되잖아 이때 데이터베이스의 연결이 생긴다는거지 그래서 이 문제를 해결하기 위해 공식문서에서는 전역변수를 사용하라고 나와

이런 방식으로 사용하래
여기서 NODE_ENV는 

.env.local 에다가 개발환경 세팅하고
.env.production에다가 운영환경 세팅하잖아
그럼 이제 local에다가는 NODE_ENV = development
production에는 NODE_ENV = production 으로 세팅하고

prisma/client를 변경해보자
개발에서는 로깅을 전부 찍고 전역변수로 관리되게만들고
운영에서는 전역변수일 필요 없으니 그냥 prismaClient 객체를 사용하게 만들고

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

const prisma =

  process.env.NODE_ENV !== "production"

    ? globalThis.prisma || new PrismaClient({ log: ["warn", "error"] })

    : new PrismaClient({ log: ["warn", "error"] });

if (process.env.NODE_ENV !== "production") {

  globalThis.prisma = prisma;

}

export default prisma;

이렇게 Client.js를 수정해서 사용하면 핫리로딩을 방지할 수 있어

이제 Client를 만들었으니 prisma객체는 얘를 import 해서 사용하면됨.

예시)

import Profile from "@/components/Profile";

import prisma from "../../../prisma/client";

export default async function Leadership() {

  let allUsers = [];

  let allCommons = [];

  try {

    allUsers = await prisma.USERS.findMany();

    allCommons = await prisma.COMMON.findMany({

      where: {

        PARENT_ID: "PS",

      },

    });

    console.log("All Users:", allUsers);

    console.log("All allCommons:", allCommons);

  } catch (error) {

    console.error("Error fetching users:", error);

    console.log("Prisma instance:", prisma);

  }

  return (

    <div>

      <Profile />

    </div>

  );

}

 

다음시간에는 CRUD 문법을 가져와볼게