Postgres 시작하기

Table of Contents

Vercel Postgres 시작하기
필수 조건
빠른 시작
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를 생성하고, 다음 내용을 라우트 파일에 추가하세요.

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 데이터베이스에 추가합니다.
전체 테이블의 내용을 반환합니다.

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

app/api/add-pet/route.ts

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 테이블을 검색하여 선택하세요.