skillDesk/docs/superpowers/specs/2026-06-09-sqlite-fastapi-vue-crud-design.md

SQLite + FastAPI + Vue CRUD 예제 설계

목표

기존의 단일 'hello world' 조회 예제를 확장해, SQLite에 저장된 메시지를 Vue 화면에서 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)할 수 있는 목록형 CRUD 예제로 만든다.

범위

이번 작업은 다음을 포함한다.

• SQLite messages 테이블 유지
• 메시지 목록 조회 API 추가
• 메시지 생성 API 추가
• 메시지 수정 API 추가
• 메시지 삭제 API 추가
• Vue 화면에서 목록형 CRUD UI 구현
• 초기 데이터로 hello world 1건 유지
• 실행 문서 업데이트

이번 작업은 다음을 포함하지 않는다.

• 인증/권한
• 검색/정렬/페이지네이션
• 다중 테이블 관계
• 복잡한 폼 검증
• 배포 설정

구조

기존 분리형 구조를 그대로 유지한다.

skillDesk/
├── backend/
│   ├── init_db.py
│   ├── main.py
│   ├── requirements.txt
│   └── app.db
├── frontend/
│   ├── index.html
│   └── src/
│       └── main.js
└── README.md

데이터 모델

테이블명: messages

컬럼:

• id INTEGER PRIMARY KEY AUTOINCREMENT
• content TEXT NOT NULL

메시지 단위는 매우 단순하게 유지한다. 별도 제목, 작성일, 상태 컬럼은 추가하지 않는다.

API 설계

1. 목록 조회

GET /api/messages

응답 예시:

[
  { "id": 1, "content": "hello world" }
]

2. 생성

POST /api/messages

요청 예시:

{
  "content": "new message"
}

응답 예시:

{
  "id": 2,
  "content": "new message"
}

3. 수정

PUT /api/messages/{id}

요청 예시:

{
  "content": "updated message"
}

응답 예시:

{
  "id": 1,
  "content": "updated message"
}

4. 삭제

DELETE /api/messages/{id}

응답 예시:

{
  "success": true
}

백엔드 설계

• FastAPI는 기존 CORS 설정을 유지한다.
• sqlite3 표준 라이브러리를 사용한다.
• 입력 모델은 최소한으로 content 문자열만 받는다.
• 빈 문자열은 거부한다.
• 존재하지 않는 id에 대한 수정/삭제는 404로 반환한다.

프론트엔드 설계

화면 구성

• 상단 제목과 설명
• 새 메시지 입력 폼
• 메시지 목록 영역
• 각 항목의 수정 / 삭제 버튼
• 수정 모드일 때 인라인 입력창과 저장 / 취소 버튼
• 로딩 / 에러 / 빈 목록 상태 표시

사용자 흐름

1. 페이지 진입 시 목록을 불러온다.
2. 입력창에 값을 넣고 생성 버튼을 누르면 메시지가 추가된다.
3. 각 항목의 수정 버튼을 누르면 해당 줄이 편집 모드로 바뀐다.
4. 저장 시 수정 API를 호출하고 목록을 갱신한다.
5. 삭제 시 삭제 API를 호출하고 목록을 갱신한다.

상태

다음 상태를 최소로 둔다.

• 전체 목록
• 새 메시지 입력값
• 현재 편집 중인 메시지 id
• 편집 중 입력값
• 로딩 상태
• 에러 상태

데이터 흐름

1. init_db.py가 DB를 만들고 hello world를 기본 데이터로 넣는다.
2. Vue는 페이지 로드 시 GET /api/messages를 호출한다.
3. 사용자가 생성/수정/삭제를 수행하면 해당 API를 호출한다.
4. 요청 성공 후 목록을 다시 불러오거나 로컬 상태를 갱신한다.

오류 처리

• 빈 메시지 생성/수정은 프론트엔드와 백엔드 모두에서 막는다.
• 없는 메시지 수정/삭제는 404로 처리한다.
• API 실패 시 화면에 간단한 오류 문구를 표시한다.

검증 기준

다음 조건을 만족하면 성공이다.

• 초기 화면에 hello world가 포함된 목록이 표시된다.
• 새 메시지를 추가할 수 있다.
• 기존 메시지를 수정할 수 있다.
• 기존 메시지를 삭제할 수 있다.
• 삭제 후 목록이 즉시 반영된다.
• README 실행 방법이 최신 흐름에 맞게 정리된다.

구현 원칙

• 기존 예제 구조를 최대한 유지한다.
• 불필요한 라이브러리는 추가하지 않는다.
• CRUD 흐름이 한눈에 보이는 최소 UI를 만든다.
• 과도한 추상화보다 이해하기 쉬운 코드를 우선한다.