Next.js 2주차 - Neon과 Drizzle을 이용해 데이터베이스 생성

ggomadev·2024년 7월 16일
0

Ultimate Next.js Course

목록 보기
2/7
post-thumbnail

Ultimate Next.js Course 강의와 Next.js 공식문서를 보면서 작성한 글입니다.

요약: 이번주는 Neon과 Drizzle을 사용하여 데이터베이스를 셋팅함
root에 server 폴더를 생성하여 index.ts, schema.ts를 작성해주었고, drizzle.config.ts, .env.local(postgre_url넣기 위한)파일을 생성했다.

Neon

  • 서버리스 형태로 Postgres 호환 데이터베이스를 제공하는 서비스. 클라우드타입에 배포한 서비스를 손쉽게 연동할 수 있다.

Drizzle

  • Typescript ORM(Object Relational Mapping)으로 대표되는 Prisma의 대항마로 평가받고 있음
  • ORM: 객체 지향 프로그래밍 언어를 사용하는 개발자가 데이터베이스의 테이블을 객체로 매핑하여 SQL 쿼리 없이도 데이터베이스 작업을 수행할 수 있게 해준다. 다만 모든 쿼리를 자동으로 최적화하지 않아 복잡한 쿼리의 경우 직접 SQL을 사용하는 것이 성능면에서 유리하다.

server폴더 안에 생성한 파일(index.ts, schema.ts)

index.ts

import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';

const sql = neon(process.env.POSTGRE_URL);
const db = drizzle(sql);

const result = await db.select().from(...);

이렇게 했을 때 발생하는 타입 에러

해결 1. as로 타입 명시하기

해결 2. ! 붙이기

npm run db:generate

패키지 버전 오류

package.json에 추가한 스크립트

 "scripts": {
   ...,
    "db:generate": "drizzle-kit generate:pg --config drizzle.config.ts",
    "db:push": "drizzle-kit push:pg --config drizzle.config.ts"
  },

npm run db:generate 후 에러

해결
에러메시지에 나온 것 참고하여 ':' 뒤에 있는 것들 제거

"scripts": {
    ...,
    "db:generate": "drizzle-kit generate",
    "db:push": "drizzle-kit push"
  },


그리고 server 폴더 하위에 migrations폴더 및 json, sql 파일이 생성되는 것을 볼 수 있다. sql 파일명은 설정없이 해서 랜덤으로 만들어지는 듯하다(찾아봐야함)

drizzle.config.ts

import { defineConfig } from "drizzle-kit"
import * as dotenv from "dotenv"

dotenv.config({
  path: ".env.local",
})

export default defineConfig({
  dialect: "postgresql",
  schema: "./server/schema.ts",
  out: "./server/migrations",
  dbCredentials: {
    url: process.env.POSTGRES_URL!,
  },
})

schema.ts

import { pgTable, serial, text } from "drizzle-orm/pg-core";

export const posts = pgTable('posts', {
    id: serial('id').primaryKey().notNull(),
    title: text('title').notNull()
})

npm run db:push

npm run db:push 후 Neon Console을 보면 Tables에 posts라는 테이블이 생성된 것을 확인할 수 있다.

drizzle-kit studio

npm i -D drizzle-kit를 했다면 앞으로 실습하면서 터미널 하나 더 켠 후 npx drizzle-kit studio

https://local.drizzle.studio 에 들어가면 굳이 Neon console에 들어가지 않아도 된다

0개의 댓글