SQLite + FastAPI + Vue 전역 설정 분리 구현 계획

에이전트 작업자용: 각 작업은 체크박스(- [ ])로 추적합니다. 목표: 프론트엔드가 index.html의 전역 설정 객체에서 API 호스트와 포트를 읽어 오도록 바꿔, 포트 변경 시 main.js를 수정하지 않아도 되게 만든다. 아키텍처: frontend/index.html에 window.APP_CONFIG를 정의하고, frontend/src/main.js는 이 전역 객체를 읽어 기본값과 함께 API_BASE_URL을 조합한다. README는 설정 위치와 포트 충돌 대응 절차를 index.html 기준으로 다시 설명한다. 기술 스택: HTML, Vue 3 ESM, JavaScript, Markdown

작업 1: HTML 전역 설정 객체 추가
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/frontend/index.html (수정)
- 할 일: Vue 앱 스크립트가 실행되기 전에 window.APP_CONFIG 객체를 선언하고, 기본 apiHost와 apiPort를 넣는다.
- 최소 구현 예시:
```
<script>
  window.APP_CONFIG = {
    apiHost: 'http://127.0.0.1',
    apiPort: '8000',
  }
</script>
```
- 검증 명령: python3 -m http.server 5173 -d frontend
- 기대 결과: 브라우저가 index.html을 로드하면 Vue 앱 시작 전 전역 설정 객체가 준비된다.
작업 2: main.js가 전역 설정과 기본값을 읽도록 변경
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js (수정)
- 할 일: 기존 API_HOST, API_PORT 상수를 window.APP_CONFIG 기반으로 바꾸고, 설정이 없을 때 기본값 127.0.0.1:8000이 유지되게 한다.
- 최소 구현 예시:
```
const appConfig = window.APP_CONFIG ?? {}
const apiHost = appConfig.apiHost || 'http://127.0.0.1'
const apiPort = appConfig.apiPort || '8000'
const API_BASE_URL = `${apiHost}:${apiPort}/api`
```
- 검증 명령: python3 -m py_compile backend/main.py
- 기대 결과: main.js를 수정하지 않고 index.html 값만 바꿔 다른 백엔드 포트로 연결할 수 있다.
작업 3: 기존 CRUD fetch 흐름 유지 확인
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js (검토)
- 할 일: 생성, 조회, 수정, 삭제 fetch 호출이 모두 새 API_BASE_URL을 그대로 사용하도록 유지한다.
- 최소 구현 예시:
```
const response = await fetch(`${API_BASE_URL}/messages`)
```
- 검증 명령: python3 -m py_compile backend/main.py
- 기대 결과: 설정 방식만 바뀌고 CRUD 기능 경로는 그대로 유지된다.
작업 4: README 설정 위치 설명 갱신
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/README.md (수정)
- 할 일: 기존 main.js의 API_PORT 수정 안내를 index.html의 window.APP_CONFIG.apiPort 수정 안내로 바꾼다.
- 최소 구현 예시:
```
`frontend/index.html`의 `window.APP_CONFIG`에서 `apiPort` 값을 백엔드 실행 포트와 맞춥니다.
```
- 검증 명령: python3 -m py_compile backend/init_db.py backend/main.py
- 기대 결과: README만 읽어도 설정 수정 위치가 index.html이라는 점을 알 수 있다.
작업 5: 포트 충돌 대응 예시를 전역 설정 방식으로 보강
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/README.md (수정)
- 할 일: 백엔드를 8001, 프론트를 5174로 실행할 때 apiPort: '8001' 예시를 함께 적는다.
- 최소 구현 예시:
```
window.APP_CONFIG = {
  apiHost: 'http://127.0.0.1',
  apiPort: '8001',
}
```
- 검증 명령: python3 -m py_compile backend/init_db.py backend/main.py
- 기대 결과: 사용자가 포트 충돌 시 실행 명령과 전역 설정 값을 한 번에 맞출 수 있다.
작업 6: 진단 및 수동 검증
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/frontend/index.html (진단), /Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js (진단), /Users/woozooni/Documents/trae_projects/skillDesk/README.md (진단)
- 할 일: IDE 진단을 확인하고, 필요 시 즉시 수정한다. 가능하면 프론트 정적 서버를 열어 설정 객체가 페이지 로드 전에 선언되는 구조도 점검한다.
- 검증 도구: IDE 진단 확인
- 기대 결과: 새 오류 없이 전역 설정 분리 구조가 문서와 코드에 모두 반영된다.

4.6 KiB Raw Permalink Blame History

SQLite + FastAPI + Vue 전역 설정 분리 구현 계획

4.6 KiB

Raw Permalink Blame History