Initial commit
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
# 게시판(Board) 개발 계획
|
||||
|
||||
> FastAPI + Vue 3 + PostgreSQL (외부 설치)
|
||||
|
||||
---
|
||||
|
||||
## 1. 작업 범위 개요
|
||||
|
||||
기존 hello-web 프로젝트에 **게시판(CRUD)** 기능을 추가한다.
|
||||
|
||||
- **PostgreSQL**은 외부에 설치하여 연결
|
||||
- **백엔드**: FastAPI + SQLAlchemy(async) + asyncpg
|
||||
- **프론트엔드**: Vue 3 (Options API) 게시판 페이지 추가
|
||||
|
||||
---
|
||||
|
||||
## 2. PostgreSQL 준비 (외부)
|
||||
|
||||
### 2.1. PostgreSQL 설치 및 DB 생성
|
||||
|
||||
```sql
|
||||
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` — 게시글 모델
|
||||
|
||||
```python
|
||||
# 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로 간단히 테스트하는 스크립트를 작성해주세요. 글 작성, 목록 조회, 상세 조회, 수정, 삭제를 순서대로 테스트합니다.
|
||||
Reference in New Issue
Block a user