156 lines
4.0 KiB
Markdown
156 lines
4.0 KiB
Markdown
# SQLite + FastAPI + Vue Hello World 구현 계획
|
|
> **에이전트 작업자용:** 현재 세션에서 인라인으로 실행한다. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
**Goal:** SQLite에 저장된 `'hello world'` 값을 FastAPI API를 통해 Vue 화면에 표시하는 최소 실행 예제를 만든다.
|
|
**Architecture:** `backend/`에는 SQLite 초기화 스크립트와 FastAPI API를 두고, `frontend/`에는 Vite 기반 Vue 앱을 둔다. Vue는 `/api/message`를 호출해 DB 값을 받아 렌더링한다.
|
|
**Tech Stack:** Python, FastAPI, sqlite3, uvicorn, Vue 3, Vite
|
|
---
|
|
|
|
### Task 1: 백엔드 기본 구조 만들기
|
|
**Files:**
|
|
- Create: `backend/requirements.txt`
|
|
- Create: `backend/init_db.py`
|
|
- Create: `backend/main.py`
|
|
- Test: `python3 -m py_compile backend/init_db.py backend/main.py`
|
|
|
|
- [ ] **Step 1: requirements 파일 작성**
|
|
Content:
|
|
```text
|
|
fastapi
|
|
uvicorn
|
|
```
|
|
Expected: 백엔드 설치 의존성이 명확해진다.
|
|
|
|
- [ ] **Step 2: SQLite 초기화 스크립트 작성**
|
|
Code should:
|
|
```python
|
|
import sqlite3
|
|
from pathlib import Path
|
|
```
|
|
Behavior:
|
|
- `app.db` 생성
|
|
- `messages` 테이블 생성
|
|
- 기존 데이터 삭제 후 `'hello world'` 삽입
|
|
Expected: `python3 backend/init_db.py` 실행 시 DB 파일과 샘플 데이터가 생성된다.
|
|
|
|
- [ ] **Step 3: FastAPI 앱 작성**
|
|
Code should:
|
|
```python
|
|
from fastapi import FastAPI, HTTPException
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
```
|
|
Behavior:
|
|
- `GET /api/message`
|
|
- SQLite에서 첫 메시지 조회
|
|
- 없으면 404 반환
|
|
Expected: 앱이 JSON으로 `{ "message": "hello world" }`를 반환할 수 있다.
|
|
|
|
- [ ] **Step 4: Python 문법 확인**
|
|
Run:
|
|
```bash
|
|
python3 -m py_compile backend/init_db.py backend/main.py
|
|
```
|
|
Expected: 출력 없이 종료
|
|
|
|
### Task 2: 프론트엔드 기본 구조 만들기
|
|
**Files:**
|
|
- Create: `frontend/package.json`
|
|
- Create: `frontend/vite.config.js`
|
|
- Create: `frontend/index.html`
|
|
- Create: `frontend/src/main.js`
|
|
- Test: `npm run build`
|
|
|
|
- [ ] **Step 1: package.json 작성**
|
|
Content should include:
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vite build"
|
|
}
|
|
}
|
|
```
|
|
Expected: Vue/Vite 개발 및 빌드 명령이 준비된다.
|
|
|
|
- [ ] **Step 2: Vite 프록시 설정 작성**
|
|
Behavior:
|
|
- `/api` 요청을 `http://127.0.0.1:8000`으로 프록시
|
|
Expected: 프론트엔드에서 상대 경로로 API 호출 가능
|
|
|
|
- [ ] **Step 3: index.html 작성**
|
|
Behavior:
|
|
- `#app` 마운트 포인트 제공
|
|
Expected: Vue 앱이 정상적으로 마운트 가능
|
|
|
|
- [ ] **Step 4: Vue 메인 앱 작성**
|
|
Behavior:
|
|
- 로딩 상태 표시
|
|
- `/api/message` fetch
|
|
- 성공 시 메시지 표시
|
|
- 실패 시 에러 문구 표시
|
|
Expected: 브라우저에서 `'hello world'`를 볼 수 있는 최소 화면이 구성된다.
|
|
|
|
- [ ] **Step 5: 프론트엔드 빌드 확인**
|
|
Run:
|
|
```bash
|
|
npm install
|
|
npm run build
|
|
```
|
|
Expected: 빌드 성공
|
|
|
|
### Task 3: 실행 문서 정리
|
|
**Files:**
|
|
- Modify: `README.md`
|
|
- Test: 문서 진단 확인
|
|
|
|
- [ ] **Step 1: README에 예제 실행 섹션 추가**
|
|
Include:
|
|
```markdown
|
|
## SQLite + FastAPI + Vue 예제 실행
|
|
```
|
|
Details:
|
|
- Python 가상환경 생성
|
|
- 백엔드 의존성 설치
|
|
- DB 초기화
|
|
- FastAPI 실행
|
|
- 프론트엔드 설치/실행
|
|
- 접속 URL 안내
|
|
Expected: 처음 보는 사용자도 따라 실행 가능
|
|
|
|
### Task 4: 기본 동작 검증
|
|
**Files:**
|
|
- Modify: 필요 시 문제 있는 파일
|
|
- Test: DB 초기화, Python 문법, 프론트엔드 빌드
|
|
|
|
- [ ] **Step 1: DB 초기화 실행**
|
|
Run:
|
|
```bash
|
|
python3 backend/init_db.py
|
|
```
|
|
Expected: `backend/app.db` 생성
|
|
|
|
- [ ] **Step 2: FastAPI 의존성 설치 후 앱 import 확인**
|
|
Run:
|
|
```bash
|
|
python3 -m venv .venv
|
|
.venv/bin/pip install -r backend/requirements.txt
|
|
.venv/bin/python -c "from backend.main import app; print(app.title)"
|
|
```
|
|
Expected: 앱 타이틀 출력
|
|
|
|
- [ ] **Step 3: 프론트엔드 설치 및 빌드**
|
|
Run:
|
|
```bash
|
|
npm install
|
|
npm run build
|
|
```
|
|
Expected: 빌드 성공
|
|
|
|
- [ ] **Step 4: 결과 요약 정리**
|
|
Include:
|
|
```text
|
|
생성 파일
|
|
실행 방법
|
|
검증 결과
|
|
```
|
|
Expected: 사용자가 바로 실행을 이어갈 수 있다.
|