Next.js 13 - PlanetScale & Prisma 사용하기(1)

프론트엔드 개발자가 개인 프로젝트를 진행할 때 DB에 대한 고민을 덜어줄 서버리스 DB를 제공하는 PlanetScale과 프로젝트와 DB를 연결시켜 주는 ORM인 Prisma를 활용하여 CRUD를 적용할 수 있는 방법에 대해서 간략하게 정리한 글 입니다.

step 01. PlanetScale 설정

먼저 PlanetScale 사이트에 접속하여 계정을 만들고 로그인 후 Create new database를 클릭하여 데이터베이스를 생성합니다.

자신이 원하는 데이터베이스 이름으로 지정하고 Region을 자신의 위치와 가까운 곳으로 설정합니다.(ex Tokyo)

무료로 사용할 수 있는 Hobby로 선택 후 카드 정보를 입력하면 5GB 무료 데이터 저장소가 생성됩니다.(Hobby database의 경우 결제가 되지 않습니다.)

PlanetScale 공식 페이지의 퀵 스타트 가이드를 따라 데이터베이스를 설정해 줍니다.

• Settings 탭 클릭 Allow web console access to production branches 체크 박스 체크 후 Save database settings 클릭

• Console 탭 클릭

• main 브랜치로 설정 후 Connect 클릭

• 콘솔 탭에서 아래의 명령어 입력 후 Enter하면 categories 와 products 테이블이 생성됨

  CREATE TABLE categories (
  id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
  name varchar(255) NOT NULL
  );
  CREATE TABLE products (
  id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
  name varchar(255) NOT NULL,
  image_url varchar(255),
  category_id INT,
  KEY category_id_idx (category_id)
  );

• 콘솔창에 SHOW TABLES; 입력 후 Enter 하면 위에서 만들어진 두 개의 테이블 확인 가능

• 콘솔창에 DESCRIBE products; 입력하면 products 테이블에 대한 설명 확인 가능

• 아래의 명령어를 입력하여 만들어 둔 테이블에 데이터를 추가

  INSERT INTO categories (name)
  VALUES  ('Clothing');

  INSERT INTO products (name, image_url, category_id)
  VALUES  ('Dark jeans', 'https://example.com/500x500', '1');

• 콘솔창에 SELECT * FROM categories; 를 입력하면 카테고리에 저장한 Clothing 확인 가능

• SELECT * FROM products; 를 입력하면 테이블 안에 있는 Dark jeans 확인 가능

step 02. Prisma 연결

PlanetScale과 프로젝트에 DB를 연결시켜주기 위해서 Prisma를 사용합니다.

1. 프로젝트에서 npm i -D prisma 명령어를 입력하여 설치해 줍니다.

2. npm i @prisma/client 입력하여 추가로 설치해 줍니다.

3. PlanetScale에서 overview 탭 이동, connect 클릭 후 비밀번호 생성 누르고 하단에 Connect with prisma 선택하면 DATABASE_URL 내용이 보이고 복사해줍니다.

4. 프로젝트에서 .env 파일 생성하여 해당 파일 안에 DATABASE_URL 을 붙여넣기 해줍니다.

5. 프로젝트 터미널에서 npx prisma init 입력하여 prisma를 시작하면 prisma 폴더가 생성됩니다.

6. prisma 폴더에 있는 schema.prisma 파일을 아래와 같이 수정합니다.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

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

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
  relationMode = "prisma"
}

model categories {
  id Int @id @default(autoincrement())
  name String
}

model products {
  id Int @id @default(autoincrement())
  name String
  image_url String?
  category_id Int
}

7. pages / api / getProducts.ts 파일에서 prisma findMany를 활용하여 DB에 있는 products의 내용을 가져옵니다.

import { PrismaClient } from '@prisma/client';
import { NextApiRequest, NextApiResponse } from 'next';

const prisma = new PrismaClient();

async function getProducts() {
  try {
    const response = await prisma.products.findMany();
    console.log(response);
    return response;
  } catch (error) {
    console.error(error);
  }
}

type Data = {
  items?: any;
  message: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>,
) {
  try {
    const products = await getProducts();
    res.status(200).json({ items: products, message: `Success` });
  } catch (error) {
    res.status(400).json({ message: `Failed ${name} added` });
  }
}

8. app / page.tsx 메인 페이지에서 내용을 가져와서 화면에 뿌려줍니다.

'use client';
import { useEffect, useRef, useState } from 'react';

export default function Home() {
  const [products, setProducts] = useState<
    { id: string; name: string; createdAt: string }[]
  >([]);

  useEffect(() => {
    fetch(`http://localhost:3000/api/getProducts`)
      .then((res) => res.json())
      .then((data) => setProducts(data.items));
  }, []);


  return (
    <main>
      <div>
        <p>Product List</p>
        {products &&
          products.map((item) => (
            <div key={item.id}>
              {item.name}
            </div>
          ))}
      </div>
    </main>
  );
}

9. npm run dev로 확인하기 전에 터미널에 npx prisma generate를 입력하여 prisma가 DB 모델을 생성하고 업데이트 할 수 있도록 합니다.

10. 위의 내용까지 마치고 프로젝트를 실행시켜주면 데이터베이스에 있던 아이템 내용이 화면에 보여집니다.