hello-web/plan.md

게시판(Board) 개발 계획

FastAPI + Vue 3 + PostgreSQL (외부 설치)

---

1. 작업 범위 개요

기존 hello-web 프로젝트에 게시판(CRUD) 기능을 추가한다.

• PostgreSQL은 외부에 설치하여 연결
• 백엔드: FastAPI + SQLAlchemy(async) + asyncpg
• 프론트엔드: Vue 3 (Options API) 게시판 페이지 추가

---

2. PostgreSQL 준비 (외부)

2.1. PostgreSQL 설치 및 DB 생성

CREATE DATABASE helloboard;
CREATE USER hello_user WITH PASSWORD 'your_password';
GRANT ALL PRIVILEGES ON DATABASE helloboard TO hello_user;

2.2. 연결 정보 (예시)

DB_HOST=localhost
DB_PORT=5432
DB_NAME=helloboard
DB_USER=hello_user
DB_PASSWORD=your_password

예상 프롬프트

macOS에 PostgreSQL이 설치되어 있지 않습니다. Homebrew로 PostgreSQL을 설치하고, helloboard 데이터베이스와 hello_user 사용자를 생성하는 스크립트를 작성해주세요.

---

3. 백엔드 작업

Step 1: 의존성 추가

backend/requirements.txt 에 패키지 추가:

• sqlalchemy[asyncio] — ORM
• asyncpg — PostgreSQL async driver
• psycopg2-binary — sync driver (마이그레이션 등)
• alembic — DB 마이그레이션 (선택)

예상 프롬프트

FastAPI 프로젝트에 PostgreSQL을 연결하려고 합니다. requirements.txt에 SQLAlchemy(asyncio), asyncpg, alembic을 추가하고, backend/database.py에 async DB 세션 설정 코드를 작성해주세요. DB 연결 정보는 환경변수에서 읽도록 해주세요.

---

Step 2: DB 모델 정의

backend/models.py — 게시글 모델

# BoardPost 모델
# - id, title, content, author, created_at, updated_at

예상 프롬프트

게시판을 위한 SQLAlchemy 모델을 backend/models.py에 정의해주세요. 필드는 id(INTEGER PK), title(VARCHAR), content(TEXT), author(VARCHAR), created_at, updated_at을 포함합니다. async 세션을 사용하는 Base를 상속받아주세요.

---

Step 3: API 엔드포인트

backend/routers/board.py — 게시판 CRUD API

메서드	경로	설명
GET	/api/boards	목록 조회 (페이징)
GET	/api/boards/{id}	상세 조회
POST	/api/boards	글 작성
PUT	/api/boards/{id}	글 수정
DELETE	/api/boards/{id}	글 삭제

예상 프롬프트

FastAPI 게시판 CRUD 라우터를 backend/routers/board.py에 작성해주세요. Pydantic 스키마는 backend/schemas.py에 분리하고, async SQLAlchemy 세션을 사용해주세요. 목록 조회는 페이지네이션(page, per_page)을 지원해야 합니다. backend/app.py에 라우터를 include 시켜주세요.

---

Step 4: CORS 업데이트 (필요시)

외부 PostgreSQL 연결과는 무관하지만, 개발 환경에서 API 호출이 정상 동작하도록 기존 CORS 설정 유지.

---

4. 프론트엔드 작업

Step 1: 게시판 페이지 생성

파일	설명
BoardListPage.vue	게시글 목록 (테이블/카드)
BoardDetailPage.vue	게시글 상세 + 목록으로 돌아가기
BoardWritePage.vue	글 작성/수정 폼

예상 프롬프트

Vue 3 Options API 스타일로 게시판 페이지 3개를 frontend/src/pages/ 아래에 생성해주세요.

• BoardListPage.vue: 게시글 목록 (테이블, 페이지네이션 버튼)
• BoardDetailPage.vue: 게시글 상세 (제목, 작성자, 내용, 날짜)
• BoardWritePage.vue: 글 작성 폼 (제목 input, 내용 textarea, 저장 버튼) API 호출은 fetch를 사용하고, /api/boards 엔드포인트를 호출합니다.

---

Step 2: 라우터 등록

frontend/src/router.js 에 게시판 경로 추가

경로	페이지
/boards	BoardListPage
/boards/:id	BoardDetailPage
/boards/new	BoardWritePage
/boards/:id/edit	BoardWritePage (수정 모드)

예상 프롬프트

frontend/src/router.js에 게시판 페이지 4개 경로를 추가해주세요: /boards, /boards/new, /boards/:id, /boards/:id/edit. 기존 Home, About 경로는 유지하고, BoardWritePage는 new와 edit을 모두 처리할 수 있도록 props로 구분해주세요.

---

Step 3: 네비게이션에 링크 추가

frontend/src/App.vue 네비게이션에 "게시판" 링크 추가

예상 프롬프트

frontend/src/App.vue의 네비게이션 메뉴에 <router-link to="/boards">게시판</router-link>를 추가해주세요. 기존 홈, 소개 링크 스타일과 동일하게 적용합니다.

---

5. 실행 순서

1. PostgreSQL 설치 및 DB/사용자 생성 (외부)
2. requirements.txt 업데이트 + pip install
3. database.py, models.py, schemas.py 작성
4. board.py 라우터 작성 + app.py에 등록
5. 프론트엔드 페이지 3개 생성
6. router.js에 경로 등록
7. App.vue 네비게이션 업데이트
8. 서버 실행 후 테스트

---

6. 검증 방법

항목	방법
DB 연결	GET /api/boards → 빈 배열 []
글 작성	POST /api/boards → 201 + 생성된 글
목록 조회	GET /api/boards?page=1&per_page=10
상세 조회	GET /api/boards/1 → 단일 글 객체
글 수정	PUT /api/boards/1 → 수정된 글
글 삭제	DELETE /api/boards/1 → 204 No Content
프론트 렌더링	localhost:5173/boards 접속 → 목록 표시

예상 프롬프트

게시판 API를 curl로 간단히 테스트하는 스크립트를 작성해주세요. 글 작성, 목록 조회, 상세 조회, 수정, 삭제를 순서대로 테스트합니다.