Initial commit

2026-05-29 08:11:07 +09:00
commit 9d192c430d
824 changed files with 575587 additions and 0 deletions
@@ -0,0 +1,133 @@
+# DB 연결 및 샘플 데이터 조회 페이지 개발 계획
+
+> PostgreSQL 외부 DB 연결 → 샘플 데이터 INSERT → 웹 페이지에 표시
+
+---
+
+## 1. DB 연결 정보
+
+| 항목 | 값 |
+|------|-----|
+| 호스트 | `192.168.0.60` |
+| 포트 | `5432` |
+| 사용자 | `casaos` |
+| 비밀번호 | `casaos` |
+| 데이터베이스 | `casaos` |
+
+---
+
+## 2. 작업 단계
+
+### Step 1: Python에서 DB 연결 테스트
+
+**목표:** 외부 PostgreSQL에 정상 접속되는지 확인
+
+**할 일:**
+- `backend/requirements.txt`에 `asyncpg`, `sqlalchemy[asyncio]` 추가
+- `backend/database.py` 생성 — async 엔진, 세션 로컬 설정
+- 테스트 스크립트로 연결 확인
+
+#### 예상 프롬프트
+
+> PostgreSQL 연결 정보 (host=192.168.0.60, port=5432, user=casaos, password=casaos, dbname=casaos)로 FastAPI에서 접속할 수 있도록 `backend/database.py`에 async SQLAlchemy 엔진과 세션 팩토리를 설정해주세요. 연결 문자열은 `DATABASE_URL` 환경변수에서 읽되, 기본값으로 위 정보를 사용하게 해주세요.
+
+---
+
+### Step 2: 샘플 데이터 테이블 생성 및 데이터 INSERT
+
+**목표:** 게시판용 샘플 테이블 `samples` 생성 + 3~5건 데이터 삽입
+
+**할 일:**
+- `backend/init_db.py` — SQLAlchemy 모델로 테이블 생성 (또는 raw SQL)
+- 샘플 데이터 INSERT SQL 실행 스크립트
+
+**테이블 구조 (`samples`):**
+
+| 컬럼 | 타입 | 설명 |
+|------|------|------|
+| id | SERIAL PK | 자동 증가 |
+| title | VARCHAR(200) | 제목 |
+| content | TEXT | 내용 |
+| author | VARCHAR(100) | 작성자 |
+| created_at | TIMESTAMP | 생성일 (기본값 now) |
+
+**샘플 데이터 (INSERT):**
+
+| title | content | author |
+|-------|---------|--------|
+| 첫 번째 샘플 | 안녕하세요, 첫 번째 게시글입니다. | 홍길동 |
+| 두 번째 샘플 | PostgreSQL 외부 연결 테스트 중입니다. | 김철수 |
+| 세 번째 샘플 | FastAPI와 Vue로 게시판을 만듭니다. | 이영희 |
+| 네 번째 샘플 | 데이터베이스 연동이 잘 되네요! | 박민수 |
+| 다섯 번째 샘플 | 화면에 표시되는지 확인해보세요. | 최지은 |
+
+#### 예상 프롬프트
+
+> `backend/models.py`에 `Sample` 모델을 정의해주세요. 필드는 id(INTEGER PK, autoincrement), title(VARCHAR 200), content(TEXT), author(VARCHAR 100), created_at(TIMESTAMP, default=now)입니다. 그리고 `backend/seed.py` 스크립트를 만들어 테이블을 생성하고 위 5건의 샘플 데이터를 INSERT하는 코드를 작성해주세요.
+
+---
+
+### Step 3: 샘플 데이터 조회 API
+
+**목표:** `GET /api/samples` 로 샘플 데이터 목록 반환
+
+**할 일:**
+- `backend/routers/samples.py` 생성
+- `backend/app.py`에 라우터 등록
+
+#### 예상 프롬프트
+
+> `backend/routers/samples.py`에 `GET /api/samples` 엔드포인트를 만들어주세요. DB에서 모든 Sample 데이터를 조회하여 JSON 배열로 반환합니다. Pydantic 스키마는 `backend/schemas.py`에 정의하고, async SQLAlchemy 세션을 사용해주세요. `backend/app.py`에 이 라우터를 include 해주세요.
+
+---
+
+### Step 4: 프론트엔드 — 샘플 데이터 조회 페이지
+
+**목표:** `/samples` 경로에서 DB 데이터를 테이블로 표시
+
+**할 일:**
+- `frontend/src/pages/SampleListPage.vue` 생성
+- `frontend/src/router.js`에 경로 등록
+- `frontend/src/App.vue`에 네비게이션 링크 추가
+
+**페이지 UI 구성:**
+```
+┌──────────────────────────────────────────┐
+│  📋 샘플 데이터 목록                       │
+├──────┬────────────────────┬──────────┬────┤
+│  ID  │  제목              │  작성자   │ 날짜 │
+├──────┼────────────────────┼──────────┼────┤
+│  1   │ 첫 번째 샘플       │ 홍길동    │ ... │
+│  2   │ 두 번째 샘플       │ 김철수    │ ... │
+│  3   │ 세 번째 샘플       │ 이영희    │ ... │
+│ ...  │ ...                │ ...      │ ... │
+└──────┴────────────────────┴──────────┴────┘
+```
+
+#### 예상 프롬프트
+
+> Vue 3 Options API 스타일로 `frontend/src/pages/SampleListPage.vue`를 만들어주세요. mounted()에서 `fetch('/api/samples')`로 데이터를 불러와 테이블 형태로 표시합니다. 컬럼은 ID, 제목, 작성자, 생성일시입니다. `frontend/src/router.js`에 `/samples` 경로를 추가하고, `frontend/src/App.vue` 네비게이션에 "샘플 목록" 링크를 추가해주세요.
+
+---
+
+## 3. 실행 순서
+
+```
+1. pip install -r backend/requirements.txt  (asyncpg, sqlalchemy 추가 설치)
+2. python backend/seed.py                    (테이블 생성 + 샘플 데이터 INSERT)
+3. uvicorn app:app --reload --port 8000      (백엔드 실행)
+4. curl http://localhost:8000/api/samples    (API 테스트)
+5. npm run dev                               (프론트엔드 실행)
+6. http://localhost:5173/samples 접속         (화면 확인)
+```
+
+---
+
+## 4. 검증 방법
+
+| 항목 | 방법 |
+|------|------|
+| DB 연결 | 서버 로그에 연결 에러 없이 정상 기동 |
+| 샘플 데이터 | `python backend/seed.py` 실행 후 DB에 5건 INSERT 확인 |
+| API 응답 | `curl localhost:8000/api/samples` → 5건 JSON 배열 반환 |
+| 화면 표시 | 브라우저에서 `/samples` 접속 → 테이블에 5행 표시 |