본문으로 건너뛰기

Lesson · Crawling

3. 게시판 글쓰기

새 글을 작성하면 게시판 목록에 추가됩니다.

클릭하거나 파일을 드래그하여 업로드
취소

Next.js에서 Neon DB(PostgreSQL)로 데이터를 직접 삽입할 수 있도록 설계한 SQL 테이블 생성 스크립트입니다.

화면에 있는 제목, 작성자, 내용 입력 필드와 파일 첨부(Vercel Blob URL 저장용) 기능을 모두 반영하였습니다.

🛠️ Neon DB (PostgreSQL) 테이블 생성 SQL

Neon DB의 SQL Editor나 데이터베이스 클라이언트에서 아래 명령어를 실행하여 테이블을 생성하세요.

CREATE TABLE posts (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    author VARCHAR(100),
    content TEXT NOT NULL,
    file_url TEXT,
    file_name VARCHAR(255),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_posts_created_at ON posts (created_at DESC);

💡 Next.js 및 Vercel Blob 연동 시 참고 팁

Next.js Server Actions나 API Route에서 데이터를 등록할 때 구조는 대략 다음과 같이 흘러가게 됩니다.

  1. Vercel Blob 업로드: 사용자가 파일을 첨부하고 '등록'을 누르면, 프론트엔드 또는 서버에서 Vercel Blob SDK(@vercel/blob)의 put() 메소드를 사용해 파일을 먼저 업로드합니다.
  2. URL 확보: 업로드가 성공하면 Vercel Blob으로부터 https://xxxxxx.public.blob.vercel-storage.com/... 형태의 url을 응답받습니다.
  3. Neon DB 저장: 이 url 값과 사용자가 입력한 title, author, content를 함께 Neon DB의 posts 테이블에 INSERT 합니다.

file_url 컬럼은 TEXT 타입으로 지정하는 것이 가장 안전합니다.