1. 모듈설치
npm install prisma
2. scheme.prisma 파일 생성
npx prisma init
src와 동일한 위치로 prisma 폴더가 생성되고 scheme.prisma 파일이 생성됩니다.
provider를 mysql로 변경하고 url에 DATABASE_URL 환경변수를 설정해줘야합니다.
.evn 파일에 local 환경변수 설정
DATABASE_URL=mysql://USER:PASSWORD@HOST:PORT/DATABASEUSER : mysql Username
PASSWORD : mysql password
HOST : mysql Server Host
PORT : mysql port number
DATABASE : mysql DB name
3. prisma 파일 하이라이팅 확장 추가
확장에서 Prisma를 검색해서 설치합니다.
prisma 파일의 코드에 하이라이팅을 넣어주어 가독성이 높아집니다.
4. 기존 DB 데이터 모델 생성
npx prisma db pull
- schema.prisma 파일에 연동된 DB 테이블이 prisma 데이터 모델로 추가되었습니다.
- 설정된 데이터 모델을 토대로 쿼리를 작성할 수 있습니다.
- 외래키가 설정되어있다면 테이블 간 관계도 인식하고 추가됩니다.
5. 데이터베이스 마이그레이션
이미 테이블에 데이터가 포함되어있고 데이터가 초기화 되면 안되는 데이터베이스의 경우는 마이그레이션을 초기화 합니다.
mkdir -p prisma/migrations/0_init
폴더를 생성합니다.
npx prisma migrate diff --from-empty --to-schema-datamodel prisma/schema.prisma --script > prisma/migrations/0_init/migration.sql
마이그레이션을 생성합니다.
- --from-empty: 마이그레이션하려는 데이터 모델이 비어 있다고 가정합니다.
- --to-schema-datamodel: 현재 데이터베이스 상태
- --script: SQL 스크립트를 출력합니다.
npx prisma migrate resolve --applied 0_init
마이그레이션을 적용하는 명령어를 실행합니다.
6. 프리즈마 클라이언트 설치
npm install @prisma/client
프리즈마 쿼리를 사용하기 위해 프리즈마 클라이언트를 설치합니다.
npx prisma generate
프리즈마 클라이언트를 생성하는 명령어를 실행합니다.
7. 쿼리 실행
'use server'
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function getAllNotice() {
try {
const data = await prisma.notice.findMany();
return data;
} catch (error) {
throw new Error(`Error getting all notice`);
} finally {
await prisma.$disconnect();
}
}
findMany()를 사용하여 notice 테이블의 데이터를 모두 조회하는 쿼리를 실행하는 코드입니다.
[공식문서]
Add Prisma ORM to an existing project using TypeScript and PostgreSQL (15 min) | Prisma Documentation
Learn how to add Prisma ORM to an existing TypeScript project by connecting it to your PostgreSQL database and generating a Prisma Client for database access.
www.prisma.io
'Frontend > Next.js' 카테고리의 다른 글
| [Next.js] 로고(Logo) 및 파비콘(Favicon) 변경 (0) | 2024.06.05 |
|---|---|
| [Next.js] NextAuth.js + Prisma 로그인 기능 개발하기 (0) | 2024.05.17 |
| [Next.js] Tailwind css+next-themes 로 다크모드 구현하기 (1) | 2024.04.30 |
| [Next.js] vercel로 Postgres Database 연동하기 (0) | 2024.03.21 |
| [Next.js] SVGR을 사용해서 SVG를 컴포넌트로 import하는 방법 (0) | 2024.03.15 |
