🛠️ 프로젝트 생성부터 Prisma 설정까지
Next.js와 TypeScript를 익히려고 간단한 사이드 프로젝트를 시작했고, 일주일이 지난 오늘 1차 배포까지 완료했다. 아직 조금 느리지만, 그동안 배운 내용을 하나씩 정리해보려고 한다. 오늘은 프로젝트 생성부터 Prisma를 활용한 DB 설정 과정을 기록한다.
프로젝트 생성
나는 Next.js + TypeScript + Tailwind Css 조합을 기본 세팅으로 시작했다.
npx create-next-app@latest
위 명령어로 기본 폴더 구조가 생성되고, 타입스크립트 설정도 자동 적용된다.
🤔 Prisma란?
원래 나는 Spring Boot로 백엔드 연결을 배웠어서, JPA가 익숙했는데, Next.js에서도 ORM이 있는지 궁금했다.
그래서 구글링을 해보니 Prisma라는 ORM이 많이 사용되는거 같았다.
Next.js 공식문서에서도 Prisma 연결 코드가 있어서 선택해서 사용했다.
prisma 초기화
npx prisma init
초기화하면 루트 디렉토리에 아래 파일들이 생긴다.
/prisma/schema.prisma: 테이블(모델)정의/.env: DB 접속 정보를 담는 환경변수 파일
.env 예시:
DATABASE_URL="mysql://root:@localhost:3306/study_cafe"schema.prisma 예시:
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
model Study {
id Int @id @default(autoincrement())
category String
title String
content String
createdAt DateTime @default(now())
}
마이그레이션 실행
마이그레이션은 DB 구조를 생성 및 관리하는 도구이다. 테이블 구조를 실제 DB에 반영하기 위해서 마이그레이션을 실행해야한다.
npx prisma migrate dev --name init
이후 다음 작업들이 자동으로 실행된다.
prisma/migrations/폴더에 마이그레이션 파일 생성- MySQL DB에 실제 테이블 생성
_prisma_migrations테이블에 변경 이력 저장 -> 추적가능
코드 정리용 명령어도 있다.
npx prisma format
✅ Prisma Client 생성
DB와의 연결은 PrismaClient라는 객체를 통해 이루어진다. 코드상에서 쿼리를 실행하려면 클라이언트를 먼저 생성해야 한다.
npx prisma generate
마이그레이션 시 자동으로 실행되지만, 필요할 때 수동 실행도 가능하다.
생성된 클라이언트를 통해 아래와 같이 데이터를 조회할 수 있다.
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
const studies = await prisma.study.findMany();👍 Prisma 인스턴스 재사용 패턴
new PrismaClient()를 호출할 때마다 새로운 DB 커넥션이 생기기 때문에, 하나의 인스턴스를 만들어서 재상용하는 것이 좋다. 아래와 같이 lib/prisma.tsx에서 글로벌 프리즈마를 생성한다.
import { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== "production") {
globalForPrisma.prisma = prisma;
}실제 사용 예시
const likedPosts: ScrapedWithStudy[] = await prisma.scrap.findMany({
where: { userId },
include: { study: true },
});findFirst,findMany,findUnique등 메서드 명이 직관적이고where,orderBy,include옵션을 통해 조건, 정렬, join까지 쉽게 처리 가능- TypeScript 기반이라 자동 완성과 타입 추론이 매우 강력함
실제include로 두 테이블을 함께 가져올 때도 Prisma가 자동으로 합쳐진 타입(Scrap & Study)을 추론해줘서, 따로 타입을 지정하지 않아도 안전하게 사용할 수 있어 편했다.
여기까지 기본 프리즈마 사용 정리 끝
Spring JPA는 조건걸 때 메서드명이 너무 길어서 헷갈리기 쉬웠는데, prisma는 훨씬 직관적이고 타입까지 잘 잡아줘서 만족스러웠다.
