5.5 KiB
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행 표시 |