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:

fastapi
uvicorn

Expected: 백엔드 설치 의존성이 명확해진다.

Step 2: SQLite 초기화 스크립트 작성 Code should:

import sqlite3
from pathlib import Path

Behavior:

app.db 생성
messages 테이블 생성
기존 데이터 삭제 후 'hello world' 삽입 Expected: python3 backend/init_db.py 실행 시 DB 파일과 샘플 데이터가 생성된다.
Step 3: FastAPI 앱 작성 Code should:

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:

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:

{
  "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:

npm install
npm run build

Expected: 빌드 성공

Task 3: 실행 문서 정리

Files:

Modify: README.md
Test: 문서 진단 확인
Step 1: README에 예제 실행 섹션 추가 Include:

## SQLite + FastAPI + Vue 예제 실행

Details:

Python 가상환경 생성
백엔드 의존성 설치
DB 초기화
FastAPI 실행
프론트엔드 설치/실행
접속 URL 안내 Expected: 처음 보는 사용자도 따라 실행 가능

Task 4: 기본 동작 검증

Files:

Modify: 필요 시 문제 있는 파일
Test: DB 초기화, Python 문법, 프론트엔드 빌드
Step 1: DB 초기화 실행 Run:

python3 backend/init_db.py

Expected: backend/app.db 생성

Step 2: FastAPI 의존성 설치 후 앱 import 확인 Run:

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:

npm install
npm run build

Expected: 빌드 성공

Step 4: 결과 요약 정리 Include:

생성 파일
실행 방법
검증 결과

Expected: 사용자가 바로 실행을 이어갈 수 있다.

4.0 KiB Raw Blame History

SQLite + FastAPI + Vue Hello World 구현 계획

Task 1: 백엔드 기본 구조 만들기

Task 2: 프론트엔드 기본 구조 만들기

Task 3: 실행 문서 정리

Task 4: 기본 동작 검증

4.0 KiB

Raw Blame History