8.0 KiB
CRUD 게시판 페이지 개발 계획
기존 읽기 전용(
GET /api/samples) → Create, Read, Update, Delete 확장
1. 작업 개요
현재 SampleListPage.vue는 단순 목록 조회만 가능. 아래 작업으로 완전한 CRUD 게시판으로 확장한다.
| 동작 | HTTP | 엔드포인트 | 현재 상태 |
|---|---|---|---|
| 목록 조회(List) | GET |
/api/samples |
✅ 완료 |
| 상세 조회(Read) | GET |
/api/samples/{id} |
❌ 없음 |
| 생성(Create) | POST |
/api/samples |
❌ 없음 |
| 수정(Update) | PUT |
/api/samples/{id} |
❌ 없음 |
| 삭제(Delete) | DELETE |
/api/samples/{id} |
❌ 없음 |
2. 작업 단계
Step 1: 백엔드 — API 완성
파일: backend/schemas.py
SampleCreate(title, content, author)— POST 요청 바디SampleUpdate(title, content, author)— PUT 요청 바디 (모두 optional)
파일: backend/routers/samples.py
기존 list_samples 유지 + 아래 4개 엔드포인트 추가:
| 메서드 | 경로 | 함수명 | 설명 |
|---|---|---|---|
GET |
/api/samples/{id} |
get_sample |
단건 조회, 없으면 404 |
POST |
/api/samples |
create_sample |
새 글 등록, 생성된 레코드 반환 |
PUT |
/api/samples/{id} |
update_sample |
수정, 없으면 404 |
DELETE |
/api/samples/{id} |
delete_sample |
삭제, 없으면 404 |
예상 프롬프트:
backend/schemas.py에SampleCreate(title, content, author 필수)와SampleUpdate(모든 필드 optional) Pydantic 모델을 추가해주세요.backend/routers/samples.py에 GET/POST/PUT/DELETE/api/samples및/api/samples/{id}엔드포인트를 구현해주세요. 상세 조회/수정/삭제는 id로 단건 처리하고, 없을 경우 HTTP 404를 반환해야 합니다.
Step 2: 프론트엔드 — 상세보기 페이지
파일: frontend/src/pages/SampleDetailPage.vue
- 경로:
/samples/:id mounted()에서fetch('/api/samples/{id}')호출- 제목, 내용, 작성자, 생성일시 표시
- "목록으로", "수정", "삭제" 버튼
- 삭제 버튼 → confirm →
fetch('DELETE /api/samples/{id}')→ 목록 이동
예상 프롬프트:
frontend/src/pages/SampleDetailPage.vue를 Vue 3 Options API로 만들어주세요. URL 파라미터:id로 단건 조회(GET /api/samples/{id})하여 제목, 내용, 작성자, 생성일시를 표시합니다. 하단에 "목록으로", "수정", "삭제" 버튼을 두고, 삭제는 confirm 후 DELETE 요청 후 /samples로 이동합니다.
Step 3: 프론트엔드 — 생성/수정 폼 페이지
파일: frontend/src/pages/SampleFormPage.vue
- 경로:
/samples/new(생성),/samples/:id/edit(수정) props또는route.params.id로 생성/수정 구분:id없음 → 생성 모드 (빈 폼):id있음 → 수정 모드 (mounted()에서 기존 데이터 fetch 후 폼 채움)
- 필드: 제목(input), 내용(textarea), 작성자(input)
- 저장 버튼 → POST 또는 PUT → 목록(/samples) 이동
예상 프롬프트:
frontend/src/pages/SampleFormPage.vue를 Vue 3 Options API로 만들어주세요.route.params.id존재 여부로 생성/수정을 구분합니다. 생성 모드는 빈 폼을 보여주고 POST /api/samples로 전송, 수정 모드는 mounted()에서 GET /api/samples/{id}로 기존 데이터를 불러와 폼을 채우고 PUT /api/samples/{id}로 전송합니다. 저장 성공 후 /samples로 라우트 이동합니다.
Step 4: 프론트엔드 — 라우터 등록 & 네비게이션
파일: frontend/src/router.js
새 경로 3개 등록:
| 경로 | 컴포넌트 | 이름 |
|---|---|---|
/samples/new |
SampleFormPage |
SampleNew |
/samples/:id |
SampleDetailPage |
SampleDetail |
/samples/:id/edit |
SampleFormPage |
SampleEdit |
파일: frontend/src/App.vue
- navigation에 "샘플 목록"은 이미 있음 (유지)
- 불필요한 nav 링크는 추가하지 않음 (새 글 작성은 목록 페이지에서 버튼으로)
Step 5: 프론트엔드 — 목록 페이지에 버튼 추가
파일: frontend/src/pages/SampleListPage.vue
- 테이블 위 "새 글 작성" 버튼 (
router-link to="/samples/new") - 테이블 행에 "상세보기" 링크/버튼 추가
3. 최종 UI 구성
목록 페이지 (/samples)
┌──────────────────────────────────────────────────┐
│ 📋 샘플 데이터 목록 [+ 새 글 작성] │
├──────┬────────────────────┬──────────┬──────┬─────┤
│ ID │ 제목 │ 작성자 │ 날짜 │ │
├──────┼────────────────────┼──────────┼──────┼─────┤
│ 1 │ 첫 번째 샘플 │ 홍길동 │ ... │[보기]│
│ 2 │ 두 번째 샘플 │ 김철수 │ ... │[보기]│
│ ... │ ... │ ... │ ... │ ... │
└──────┴────────────────────┴──────────┴──────┴─────┘
상세 페이지 (/samples/1)
┌──────────────────────────────────────────────┐
│ 첫 번째 샘플 │
│ │
│ 작성자: 홍길동 | 2026-05-26 17:55 │
│ ──────────────────────────────────────────── │
│ 안녕하세요, 첫 번째 게시글입니다. │
│ │
│ [목록] [수정] [삭제] │
└──────────────────────────────────────────────┘
생성/수정 폼 (/samples/new or /samples/1/edit)
┌──────────────────────────────────────────────┐
│ 제목 │
│ [____________________________] │
│ 작성자 │
│ [____________________________] │
│ 내용 │
│ [____________________________] │
│ [____________________________] │
│ │
│ [저장] [취소] │
└──────────────────────────────────────────────┘
4. 실행 순서
1. backend/schemas.py — SampleCreate, SampleUpdate 추가
2. backend/routers/samples.py — POST, GET/:id, PUT/:id, DELETE/:id 구현
3. uvicorn 재시작 (자동 reload)
4. curl -X POST localhost:8000/api/samples (API 테스트)
5. curl -X PUT localhost:8000/api/samples/1 (API 테스트)
6. curl -X DELETE localhost:8000/api/samples/1 (API 테스트)
7. frontend/src/pages/SampleDetailPage.vue 생성
8. frontend/src/pages/SampleFormPage.vue 생성
9. frontend/src/pages/SampleListPage.vue — 버튼 추가
10. frontend/src/router.js — 경로 등록
11. npm run dev → localhost:5173/samples 접속
5. 검증 방법
| 항목 | 방법 |
|---|---|
| 생성 | 폼 작성 후 저장 → 목록에 새 행 표시 |
| 상세 | 목록에서 "보기" 클릭 → 상세 페이지 표시 |
| 수정 | 상세에서 "수정" → 폼 수정 → 저장 → 변경 확인 |
| 삭제 | 상세에서 "삭제" → confirm 확인 → 목록에서 제거 확인 |
| API 직접 | curl -X POST -d '{...}' localhost:8000/api/samples |