Initial commit

README.md

@@ -0,0 +1,176 @@
+# Hello Web
+
+**Python (FastAPI) 백엔드 + Vue 3 (Vite) 프론트엔드 + PostgreSQL** 프로젝트입니다.
+
+- **백엔드**: FastAPI가 JSON API 제공 + 빌드된 Vue SPA 정적 파일 서빙
+- **프론트엔드**: Vue 3 (Options API) + Vite 번들러
+- **데이터베이스**: PostgreSQL (외부 서버 192.168.0.60)
+
+---
+
+## DB 연결 정보
+
+| 항목 | 값 |
+|------|-----|
+| 호스트 | `192.168.0.60` |
+| 포트 | `5432` |
+| 사용자 | `casaos` |
+| 비밀번호 | `casaos` |
+| 데이터베이스 | `casaos` |
+
+연결 문자열은 `DATABASE_URL` 환경변수로 재정의 가능합니다.
+
+---
+
+## API 엔드포인트
+
+| 메서드 | 경로 | 설명 |
+|--------|------|------|
+| `GET` | `/api/hello` | 기본 인사 API |
+| `GET` | `/api/samples` | 샘플 데이터 목록 조회 |
+| `GET` | `/api/samples/{id}` | 샘플 데이터 상세 조회 |
+| `POST` | `/api/samples` | 샘플 데이터 생성 |
+| `PUT` | `/api/samples/{id}` | 샘플 데이터 수정 |
+| `DELETE` | `/api/samples/{id}` | 샘플 데이터 삭제 |
+
+---
+
+## 설치 및 실행
+
+### 1. 의존성 설치
+
+```bash
+# 백엔드
+pip3 install -r backend/requirements.txt
+
+# 프론트엔드
+cd frontend && npm install && cd ..
+```
+
+### 2. DB 테이블 생성 및 샘플 데이터 INSERT
+
+```bash
+python3 backend/seed.py
+```
+
+### 3. 개발 서버 실행 (동시 실행)
+
+```bash
+./dev.sh
+```
+
+또는 개별 실행:
+
+```bash
+# 터미널 1: 백엔드
+cd backend && uvicorn app:app --reload --port 8000
+
+# 터미널 2: 프론트엔드
+cd frontend && npm run dev
+```
+
+### 4. 접속
+
+| 주소 | 설명 |
+|---|---|
+| **http://localhost:8000** | FastAPI가 서빙하는 SPA (프로덕션) |
+| **http://localhost:8000/api/samples** | API 직접 확인 |
+| **http://localhost:5173** | Vite 개발 서버 (프록시 → FastAPI) |
+
+### 5. 프로덕션 빌드
+
+```bash
+cd frontend && npm run build
+```
+
+빌드 후 `localhost:8000`에서 SPA를 확인할 수 있습니다.
+
+---
+
+## 프로젝트 구조
+
+```
+hello-web/
+├── backend/
+│   ├── app.py               # FastAPI 서버 (API + 정적 파일 서빙)
+│   ├── database.py           # async SQLAlchemy 엔진/세션 설정
+│   ├── models.py             # SQLAlchemy 모델 (Sample)
+│   ├── schemas.py            # Pydantic 요청/응답 스키마
+│   ├── seed.py               # 테이블 생성 + 샘플 데이터 INSERT
+│   ├── routers/
+│   │   └── samples.py       # CRUD API 라우터
+│   └── requirements.txt     # Python 의존성
+├── frontend/
+│   ├── dist/                 # Vue 빌드 결과물
+│   ├── src/
+│   │   ├── main.js           # Vue 앱 진입점
+│   │   ├── App.vue           # 루트 컴포넌트 (내비게이션 포함)
+│   │   ├── router.js         # vue-router 경로 설정
+│   │   └── pages/
+│   │       ├── HomePage.vue
+│   │       ├── AboutPage.vue
+│   │       ├── SampleListPage.vue    # 목록 조회
+│   │       ├── SampleDetailPage.vue  # 상세 조회/삭제
+│   │       └── SampleFormPage.vue    # 생성/수정 폼
+│   ├── index.html
+│   ├── package.json
+│   └── vite.config.js
+├── dev.sh                   # 백엔드 + 프론트엔드 동시 실행 스크립트
+├── dbpageplan.md            # DB 연동 계획서
+├── dbpagecrud.md            # CRUD 확장 계획서
+└── README.md
+```
+
+---
+
+## 주요 파일 설명
+
+**`backend/database.py`** — async SQLAlchemy 엔진 및 세션 팩토리, `DATABASE_URL` 환경변수 지원
+
+**`backend/models.py`** — `Sample` 모델 (id, title, content, author, created_at)
+
+**`backend/seed.py`** — 테이블 생성 및 5건의 샘플 데이터 INSERT (중복 실행 방지)
+
+**`backend/routers/samples.py`** — GET/POST/PUT/DELETE 전체 CRUD 엔드포인트
+
+---
+
+## 개발 워크플로우
+
+```bash
+# 1. 동시 실행
+./dev.sh
+
+# 2. curl로 API 테스트
+curl http://localhost:8000/api/samples
+
+# 3. 새 글 생성
+curl -X POST http://localhost:8000/api/samples \
+  -H "Content-Type: application/json" \
+  -d '{"title":"테스트","content":"내용","author":"작성자"}'
+```
+
+---
+
+## 서버 종료
+
+```bash
+# dev.sh 실행 시 → Ctrl+C
+
+# 개별 종료
+pkill -f "uvicorn app:app"
+pkill -f "vite"
+```
+
+---
+
+## 문제 해결
+
+### 포트 8000이 이미 사용 중
+```bash
+lsof -i :8000
+kill -9 <PID>
+```
+
+### DB 연결 오류
+`backend/database.py`에서 `DATABASE_URL` 값을 환경에 맞게 수정하세요.