# 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건 유지
- 실행 문서 업데이트

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

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

## 구조

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

```text
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`

응답 예시:

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

### 2. 생성

`POST /api/messages`

요청 예시:

```json
{
  "content": "new message"
}
```

응답 예시:

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

### 3. 수정

`PUT /api/messages/{id}`

요청 예시:

```json
{
  "content": "updated message"
}
```

응답 예시:

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

### 4. 삭제

`DELETE /api/messages/{id}`

응답 예시:

```json
{
  "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를 만든다.
- 과도한 추상화보다 이해하기 쉬운 코드를 우선한다.