Postgres 시작하기

Vercel Postgres 시작하기

Vercel Postgres로 데이터 쓰기 및 읽기를 시작하는 방법을 이 빠른 시작 가이드를 통해 알아볼 수 있습니다.

이 페이지에서는 Vercel Postgres를 사용하는 기본 API 라우트 설정 방법을 안내합니다.

필수 조건

이 빠른 시작 가이드를 따르기 위해서는 다음이 필요합니다.

• 기존의 Vercel 프로젝트
• Vercel Postgres 패키지

npm i @vercel/postgres

• 최신 버전의 Vercel CLI

npm i -g vercel@latest

빠른 시작

이 빠른 시작 가이드에서는 Vercel Postgres SDK를 사용하여 당신과 당신의 친구들의 애완동물 데이터베이스를 만들게 됩니다.

배우게 될 내용은 다음과 같습니다.

• 프로젝트 중 하나에 연결된 Postgres 데이터베이스 생성하기
• Vercel 대시보드에서 데이터베이스 생성 및 관리하기
• Vercel의 Postgres SDK를 사용하여 데이터베이스 채우기
• 누군가 당신의 API 라우트 중 하나를 방문했을 때 PostgreSQL 테이블의 내용을 응답으로 보내기

Postgres 데이터베이스 생성하기

시작하기 위해 데이터베이스를 생성해 봅시다.

• Vercel 대시보드에서 작업하고 싶은 프로젝트를 생성하거나 선택하세요.
• 스토리지 탭을 선택한 다음, 스토어 연결 버튼을 선택하세요.
• Postgres를 선택하세요.
• 데이터베이스 이름을 입력하세요. 알파벳과 숫자("_"와 "-" 포함)만 포함할 수 있으며, 32자를 초과할 수 없습니다. pets_postgres_db를 선택하겠습니다.
• 지역을 선택하세요. 프로젝트에 엣지 또는 서버리스 함수가 있는 경우, 더 빠른 응답을 위해 해당 지역과 가까운 옵션을 선택하세요.
• 생성 및 계속을 선택하세요.
• 다음 화면에서 아무것도 변경하지 않고 연결을 선택하세요.

생성된 내용 검토하기

이제 선택한 지역에 빈 PostgreSQL 데이터베이스가 생성되었습니다!

Vercel Postgres SDK를 사용하여 데이터베이스에 연결하려면 몇 가지 자격증명이 필요합니다. 데이터베이스를 프로젝트에 연결함으로써, 이러한 자격증명이 생성되어 환경 변수로 제공됩니다.

• POSTGRES_URL
• POSTGRES_PRISMA_URL
• POSTGRES_URL_NON_POOLING
• POSTGRES_USER
• POSTGRES_HOST
• POSTGRES_PASSWORD
• POSTGRES_DATABASE

프로젝트의 설정 탭으로 이동하여 환경 변수 패널을 선택함으로써 이들을 확인할 수 있습니다.

로컬 프로젝트 준비하기

Postgres 데이터베이스를 생성하고 프로젝트에 연결했을 때, API URL과 자격증명이 자동으로 프로젝트의 환경 변수로 추가되었습니다. 이러한 환경 변수를 로컬 환경으로 가져와야 Postgres 데이터베이스에 접근할 수 있습니다.

터미널에서 다음을 실행하세요.

vercel env pull .env.development.local

데이터베이스에 테이블 생성하기

다음으로, 방문하면 데이터베이스에 애완동물에 대한 기본 정보를 담고 있는 Pets 테이블을 생성하는 API 라우트를 만들어 보겠습니다.

app/api 디렉토리에 create-pets-table/route.ts를 생성하고, 다음 내용을 라우트 파일에 추가하세요.

import { sql } from '@vercel/postgres';
import { NextResponse } from 'next/server';
 
export async function GET(request: Request) {
  try {
    const result =
      await sql`CREATE TABLE Pets \
          ( Name varchar(255), Owner varchar(255) );`;
    return NextResponse.json({ result }, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error }, { status: 500 });
  }
}

그 다음, 방금 생성한 API 라우트를 방문하여 Pets 테이블을 생성하세요:

• 로컬에서 앱을 시작하기 위해 next dev를 실행하세요
• 앱에서 라우트의 경로를 방문하세요: http://localhost:3000/api/create-pets-table
• 브라우저에서 다음과 같은 것을 볼 수 있습니다.

{
  "result": {
    "command": "CREATE",
    "fields": [],
    "rowAsArray": false,
    "rowCount": null,
    "rows": [],
    "viaNeonFetch": true
  }
}

Vercel 대시보드에서도 테이블을 확인할 수 있습니다. 프로젝트의 스토리지 탭에서 데이터베이스를 선택한 다음, 다음 페이지에서 데이터를 선택하세요. 테이블 이름을 검색하고 드롭다운 목록에서 선택하면 비어 있는 것을 볼 수 있습니다.

테이블에 데이터 추가하기

테이블이 존재한다면 이제 데이터를 추가해 보겠습니다.

다음 API 라우트는:

• 라우트가 방문될 때 URL의 쿼리 문자열에서 가져온 ownerName과 petName 필드를 가진 새로운 행을 PostgreSQL 데이터베이스에 추가합니다.
• 전체 테이블의 내용을 반환합니다.

프로젝트에 이 파일을 추가하세요.

import { sql } from '@vercel/postgres';
import { NextResponse } from 'next/server';
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const petName = searchParams.get('petName');
  const ownerName = searchParams.get('ownerName');
 
  try {
    if (!petName || !ownerName)
      throw new Error('애완동물과 소유자 이름이 필요합니다');
    await sql`INSERT INTO Pets (Name, Owner) \
        VALUES (${petName}, ${ownerName});`;
  } catch (error) {
    return NextResponse.json({ error }, { status: 500 });
  }
 
  const pets = await sql`SELECT * FROM Pets;`;
  return NextResponse.json({ pets }, { status: 200 });
}

SQL 쿼리에 텍스트를 포함시키는 것이 보안 위험은 아닌가요? – 이 경우에는 아닙니다. Vercel은 실행하기 전에 Vercel Postgres 데이터베이스로 보내진 모든 쿼리를 정화합니다. 위의 코드는 SQL 주입에 노출되지 않습니다.

데이터베이스에 데이터를 보내려면 라우트를 방문해야 합니다.

• 로컬에서 앱을 시작하기 위해 next dev를 실행하세요.
• 라우트를 방문할 때 쿼리 매개변수에 데이터를 추가하세요. 다음은 데이터베이스에 Fluffy라는 이름의 애완동물과 John이라는 소유자를 추가하는 예시 URL입니다. http://localhost:3000/api/add-pet?petName=Fluffy&ownerName=John
• 브라우저에서 다음과 같은 것을 볼 수 있습니다.

{
  "pets": {
    "command": "SELECT",
    "fields": [
      {
        "columnID": 1,
        "dataTypeID": 1043,
        "dataTypeModifier": 259,
        "dataTypeSize": -1,
        "format": "text",
        "name": "name",
        "tableID": 12345,
      },
      {
        "columnID": 2,
        "dataTypeID": 1043,
        "dataTypeModifier": 259,
        "dataTypeSize": -1,
        "format": "text",
        "name": "owner",
        "tableID": 12345,
      }
    ],
    "rowCount": 1,
    "rows": [
      {
        "name": "Fluffy",
        "owner": "John",
      }
    ],
    "viaNeonFetch": true,
  }
}

• 대시보드에서 데이터베이스를 보고 데이터 탭으로 이동하면 추가한 애완동물과 소유자를 볼 수 있습니다. Pets 테이블을 검색하여 선택하세요.