✅ 실전 개발 순서 예시 (Next.js + Prisma + MySQL 기준)
| 순서 | 단계 | 설명 |
|---|---|---|
| 1️⃣ | DB 세팅 | MySQL 설치 / DB 생성 (myapp_db 등) |
| 2️⃣ | Prisma 초기화 | npx prisma init → .env에 DB 연결 정보 추가 |
| 3️⃣ | Prisma 모델링 | schema.prisma에서 테이블 정의 (User, Todo 등) |
| 4️⃣ | 마이그레이션 실행 | npx prisma migrate dev --name init → 실제 DB에 테이블 생성 |
| 5️⃣ | API 라우트 작성 | /api/users, /api/todos 같은 API 만들어서 DB 조작 |
| 6️⃣ | 프론트엔드와 연결 | API 호출해서 기존 localStorage 코드 대체 |
Prisma 란?
- Prisma는 데이터베이스를 쉽게 다룰 수 있게 도와주는 Node.js 기반의 ORM(Object-Relational Mapping) 도구
🔍 좀 더 쉽게 설명하면?
✔️ 예전 방식 (SQL 직접 작성):
SELECT * FROM users WHERE email = 'test@example.com';
✔️ Prisma 방식:
const user = await prisma.user.findUnique({
where: { email: 'test@example.com' }
});
➡ SQL을 몰라도 자바스크립트/타입스크립트 코드만으로 DB 조작 가능!
🎯 Prisma의 주요 기능
| 기능 | 설명 |
| ----------------- | ------------------------------------ |
| ORM | 객체처럼 DB를 다룸 (JavaScript 객체 ↔ DB row) |
| 자동 마이그레이션 | DB 테이블 구조를 코드로 정의하고 자동 반영 |
| 타입 안전성 | 타입스크립트 기반으로 오류를 줄여줌 |
| Prisma Studio | 웹 UI로 DB 데이터를 쉽게 보고 편집 가능 |
https://velog.io/@beetnalhee/PWA-28-Prisma-Data-Modeling%EC%9D%B4%EB%9E%80
Prisma 설치하기
-
VSCode에서 프리즈마 확장 프로그램 설치하기
-
Prisma 설치
npm install prisma- 사용가능한 prisma 명령어를 확인
npx prismaExamples
Set up a new Prisma project
$ prisma init
Generate artifacts (e.g. Prisma Client)
$ prisma generate
Browse your data
$ prisma studio
Create migrations from your Prisma schema, apply them to the database, generate artifacts (e.g. Prisma Client)
Pull the schema from an existing database, updating the Prisma schema
$ prisma db pull
Push the Prisma schema state to the database
$ prisma db push
Validate your Prisma schema
$ prisma validate
Format your Prisma schema
$ prisma format
Display Prisma version info
$ prisma version
Display Prisma debug info
$ prisma debug✅ 1단계: Prisma 프로젝트 초기화
npx prisma initinit 명령어를 실행하면 프로젝트 내에 prisma라는 새폴더가 생성되고, 이 폴더 안에는 schema.prisma 라는 파일이 생긴다.
prisma/
└── schema.prisma # 여기서 모델 정의
.env # DB 연결 정보 저장
.env 라는 환경변수 파일도 생성되는데, 환경변수 파일은 git 에 업로드되지 않도록 gitignore 파일에 반드시 포함시켜야한다.
✅ 2단계: 데이터베이스 연결 설정
.env파일에 DB주소를 넣는다.
.env에 postgresql로 초기설정이 되어있는것을,
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"mysql로 수정한다.
mysql://[사용자이름]:[비밀번호]@[호스트]:[포트]/[데이터베이스이름]예) DATABASE_URL="mysql://root:rootpw@localhost:3306/mydb"
이런식으로 하면 된다.
✅ 3단계: 모델 정의 (이게 바로 Data Modeling)
prisma/schema.prisma 파일에서 모델을 정의한다.
datasource db도 postgresql 에서, mysql로 바꿔준다.
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
name String
email String @unique
posts Post[] // 1:N 관계
}
👍 npx prisma format 까지 해주면, 포맷팅을 깔끔하게 해준다.
✅ 4단계: 마이그레이션 실행해서 DB 반영
--name 뒤에 마이그레이션 이름 넣는다.
이제 DB에 실제로 User 테이블이 만들어진다.
npx prisma migrate dev --name init
✅ 5단계: Prisma Client 생성
이걸 실행하면 JS/TS 코드에서 DB를 다룰 수 있는 Prisma Client가 생긴다. 그런데, migrate만 해도 자동으로 같이 실행된다.
npx prisma generate
✅ 6단계: 코드에서 사용
예를 들어 user 하나 생성하려면 이렇게 쓴다:
const newUser = await prisma.user.create({
data: {
name: '홍길동',
email: 'hong@test.com'
}
});MySQL workbench 에서 local 새로 생성해보기
위 단계가 다 되었다면, local db를 하나 새로 생성하고, Connection Name을 beautyHubLocal 로 바꾼뒤, 저장하면, user 테이블이 생긴것을 확인 할 수 있다.
💿백틱 에러
테이블을 generate 했을때, User를 Backtick백틱(`) 으로 감쌌더니, 빨간줄 에러가 났다. 이유는 ORACLE SQL에서는 백틱을 을 인식하지 못하므로 에러가 난것이었다. (") 더블쿼츠로 바꿔주니 빨간줄 에러가 사라졌다.
-> 다시 백틱으로 수정함!!!
-> 이유는, oracle sql developer 영향때문이었음. uninstall하니까 해결되었음.
⚠️ "No connection attached" 오류 원인과 해결 방법
이 에러는 보통 Prisma가 DB 연결을 제대로 설정하지 못했을 때 발생한다.
✅ 1.env 파일의 DATABASE_URL 확인
비밀번호에 특수문자(!, @, # 등)가 있다면 URL 인코딩 필요
예: Root123! → Root123%21
포트번호는 맞는지? (3306 일반적)
DB 이름 beautyHubLocal 오타 없는지?
-- CreateTable
CREATE TABLE "User" (
id NUMBER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
userId VARCHAR2(191) NOT NULL,
email VARCHAR2(191) NOT NULL,
name VARCHAR2(191) NOT NULL,
password VARCHAR2(191) NOT NULL,
phone VARCHAR2(191) NOT NULL,
isAdmin NUMBER(1) DEFAULT 0 NOT NULL,
adminPhoneNumber VARCHAR2(191) NULL,
adminBusinessFile VARCHAR2(191) NOT NULL
);
CREATE UNIQUE INDEX User_userId_key ON "User"(userId);
CREATE UNIQUE INDEX User_email_key ON "User"(email);
브라우저에서 테이블 확인하기
npx prisma studio
