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

💁🏻‍♀️ Schema 추가하기

이전 글에서 만들어 둔 products 테이블에 새로운 스키마를 추가하고 싶은 경우 아래와 같이 설정해 줄 수 있습니다.

우선 메인 브랜치에서는 설정할 수 없어 새로운 브랜치를 생성해야 합니다.

• Branches 탭에서 New branch 클릭 후 원하는 브랜치 명을 입력하여 만들어 주면 됩니다.

• PlanetScale 콘솔 탭에서 새로 만들어준 브랜치를 선택 후 connect 합니다. 이후에 콘솔 창에 아래의 명령어로 새로운 createdAt 스키마를 추가해 줍니다. 해당 스키마에는 생성된 시간인 datetime 내용이 들어가게 됩니다.

  ALTER TABLE products ADD COLUMN createdAt datetime NOT NULL DEFAULT(now);

• 스키마를 추가했으면 새롭게 데이터를 넣어줍니다.

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

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

• 콘솔창에서 SELECT * FROM products;를 입력하여 확인해보면 createdAt 속성이 추가된 것을 확인할 수 있습니다.

• main 브랜치에서 Enable safe migrations을 활성화 시켜주고 다시 새로 만들어준 브랜치로 돌아오면 변경된 내용을 Deploy requests 해줄 수 있습니다.

• Deploy requests에서 확인 후 충돌이 일어나지 않을 경우 deploy changes 버튼이 나타나고 버튼을 클릭하면 main 브랜치에 병합됩니다

• 프로젝트에서 schema.prisma 파일에서 createdAt 내용을 추가합니다.

  model products {
    id Int @id @default(autoincrement())
    name String
    image_url String?
    category_id Int
    createdAt DateTime @default(now()) //📌
  }

• 메인 page.tsx 파일에서 <span>{item.createdAt}</span> 태그를 추가해주고 터미널에 npx prisma generate를 실행시킨 후 변경된 DB 내용을 프로젝트에도 업데이트 해줍니다.

• 위의 내용이 완료된 이후에 npm run dev로 프로젝트를 실행시켜보면 createdAt 시간을 확인할 수 있습니다.