74 lines
4.6 KiB
Markdown
74 lines
4.6 KiB
Markdown
# 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`를 넣는다.
|
|
- **최소 구현 예시:**
|
|
```html
|
|
<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`이 유지되게 한다.
|
|
- **최소 구현 예시:**
|
|
```javascript
|
|
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`을 그대로 사용하도록 유지한다.
|
|
- **최소 구현 예시:**
|
|
```javascript
|
|
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` 수정 안내로 바꾼다.
|
|
- **최소 구현 예시:**
|
|
```markdown
|
|
`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'` 예시를 함께 적는다.
|
|
- **최소 구현 예시:**
|
|
```html
|
|
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 진단 확인
|
|
- **기대 결과:** 새 오류 없이 전역 설정 분리 구조가 문서와 코드에 모두 반영된다.
|