193 lines
4.2 KiB
Markdown
193 lines
4.2 KiB
Markdown
# 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를 만든다.
|
|
- 과도한 추상화보다 이해하기 쉬운 코드를 우선한다.
|