# 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: 사용자가 바로 실행을 이어갈 수 있다.