퍼포먼스를 최대로! Supabase를 활용한 Prisma 및 PostgreSQL 설정하기.

여러분의 Next.js 프로젝트에 database 및 ORM 설정을 어디까지 해보셨나요? 오늘 글에서는 supabase와 prisma를 기반으로 매끄럽게 postgresql과 연동하는 방법을 설명드리겠습니다. 쉽게 따라할 수 있도록 예제 코드를 통해 한 단계씩 설명드릴 테니 놓치지 마세요!

Supabase와 Prisma란?

먼저 Supabase와 Prisma에 대해서 간단히 알아볼까요?

• Supabase: Firebase의 오픈소스 대안으로, Supabase는 PostgreSQL을 기반으로 하는 실시간 데이터베이스 및 인증 기능을 제공합니다.
• Prisma: TypeScript와 JavaScript에서 사용할 수 있는 ORM(Object Relational Mapping)으로, 데이터베이스와의 상호작용을 매우 직관적이고 효율적으로 만들어줍니다.

Supabase 설정

Supabase 프로젝트를 생성하면 'NEXT_PUBLIC_SUPABASE_URL'과 'NEXT_PUBLIC_SUPABASE_ANON_KEY' 두 가지 키를 발급받습니다. 이를 .env 파일에 추가합니다.

NEXT_PUBLIC_SUPABASE_URL="https://your-supabase-url.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-supabase-anon-key"
SUPABASE_URL="https://your-supabase-url.supabase.co"
SUPABASE_KEY="your-supabase-service-role-key"
POSTGRES_POOLING_URL="your-pooling-url"
POSTGRES_DIRECT_URL="your-direct-url"

Prisma 설치 및 설정

프로젝트 폴더에서 Prisma와 클라이언트 패키지를 설치합니다.

npm install @prisma/client prisma

설치가 끝나면, 프로젝트 루트에 schema.prisma 파일을 생성합니다. Prisma의 schema는 모델과 데이터베이스 구성을 정의하며, 설정이 완료된 이후 prisma CLI를 사용하여 마이그레이션을 수행할 수 있습니다.

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("POSTGRES_POOLING_URL") 
  directUrl = env("POSTGRES_DIRECT_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String
  authority String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  carPrices CarPrice[]
}

model Car {
  id        String   @id @default(cuid())
  name      String
  brand     String
  model     String
  year      Int
  price     Int
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  carPrices CarPrice[]
}

model CarPrice {
  id             String   @id @default(cuid())
  meter          String
  term           String
  advancePayment Int
  totalPrice     Int
  price          Int
  createdAt      DateTime @default(now())
  updatedAt      DateTime @updatedAt

  userId String?
  user   User?   @relation(fields: [userId], references: [id])
  carId  String
  car    Car     @relation(fields: [carId], references: [id])
}

여기서 carPrice 모델은 user와 car에 연관관계를 설정했습니다. carId와 userId는 각각 Car와 User 모델의 기본 키입니다.

마이그레이션 수행

Prisma 마이그레이션을 설정하여 데이터베이스에 변경사항을 반영합니다.

npx prisma migrate dev --name init

이 명령어를 실행하면 Prisma가 스키마를 SQL로 변환하여 데이터베이스에 실행해줍니다. 이를 통해 User, Car, CarPrice 테이블이 생성됩니다.

Prisma 클라이언트 인스턴스 생성

마지막으로, Prisma 클라이언트를 설정하여 쉽게 데이터베이스와 상호작용할 수 있도록 합니다.

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

const prisma = new PrismaClient();

// Example usage
async function main() {
  const newUser = await prisma.user.create({
    data: {
      email: 'alice@prisma.io',
      name: 'Alice',
      authority: 'admin',
    },
  });

  console.log('Created new user:', newUser);
}

main()
  .catch(e => {
    throw e;
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

이제 다음과 같은 코드를 통해 쉽게 데이터를 삽입할 수 있습니다.

결론

여기까지 따라오셨다면, supabase와 prisma를 활용한 postgresql 설정을 성공적으로 마치신 겁니다! 이렇게 설정된 ORM 환경은 데이터베이스와의 상호작용을 매끄럽게 만들어 줄 뿐 아니라, 타입 안전성 및 코드 자동 생성 측면에서도 많은 이점을 제공합니다.

여러분의 프로젝트에서 더 강력한 백엔드를 구축하는 데 이 글이 도움이 되기를 바랍니다. 다른 질문이나 추가적으로 궁금한 점이 있다면, 언제든지 댓글로 남겨주세요!