SQLite + FastAPI + Vue 포트 설정 분리 구현 계획

에이전트 작업자용: 각 작업은 체크박스(- [ ])로 추적합니다. 목표: CRUD 예제의 프론트 API 주소와 실행 포트 안내를 분리해 포트 충돌 시 최소 수정으로 다시 실행할 수 있게 만든다. 아키텍처: 프론트엔드는 frontend/src/main.js에서 API 주소를 API_HOST, API_PORT, API_BASE_URL 상수로 나누어 관리한다. 실행 포트 선택은 백엔드와 프론트 모두 명령줄에서 유지하고, README에 기본 포트와 대체 포트 예시를 함께 적어 사용자가 충돌 상황에서 바로 대응할 수 있게 한다. 기술 스택: Vue 3 ESM, FastAPI, Python http.server, Markdown

작업 1: 프론트 API 주소 상수 구조 변경
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js (수정)
- 할 일: 현재 하나의 문자열로 선언된 API_BASE_URL을 API_HOST, API_PORT, API_BASE_URL로 분리한다.
- 최소 구현 예시:
```
const API_HOST = 'http://127.0.0.1'
const API_PORT = '8000'
const API_BASE_URL = `${API_HOST}:${API_PORT}/api`
```
- 검증 명령: python3 -m py_compile backend/main.py
- 기대 결과: 프론트 코드에서 백엔드 포트를 한 줄만 수정해 다른 포트로 연결할 수 있다.
작업 2: 프론트 주석과 설정 의도 정리
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js (수정)
- 할 일: 사용자 규칙에 맞춰 각 상수와 조합 이유를 한글 주석으로 설명하고, 기존 fetch 호출이 새 상수를 그대로 사용하도록 유지한다.
- 최소 구현 예시:
```
const API_HOST = 'http://127.0.0.1' // 백엔드 API 호스트 주소를 별도 상수로 분리한다.
const API_PORT = '8000' // 백엔드 포트 충돌 시 이 값만 바꾸면 되도록 한다.
const API_BASE_URL = `${API_HOST}:${API_PORT}/api` // 실제 fetch 요청에 사용할 기본 API 주소를 조합한다.
```
- 검증 명령: python3 -m py_compile backend/main.py
- 기대 결과: 프론트 상수 구조만 읽어도 포트 변경 지점을 쉽게 찾을 수 있다.
작업 3: README 기본 실행 예시를 명시적 포트 기준으로 보강
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/README.md (수정)
- 할 일: 기존 실행 안내에 기본 백엔드 포트 8000, 프론트 포트 5173을 명령 예시로 명확히 적는다.
- 최소 구현 예시:
```
uvicorn backend.main:app --host 127.0.0.1 --port 8000
python3 -m http.server 5173 -d frontend
```
- 검증 명령: python3 -m py_compile backend/init_db.py backend/main.py
- 기대 결과: README만 보고 기본 실행 주소를 바로 이해할 수 있다.
작업 4: README에 포트 충돌 대응 섹션 추가
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/README.md (수정)
- 할 일: 8001, 5174 같은 대체 포트 예시와 함께, 프론트에서 API_PORT를 어디서 바꾸는지 안내한다.
- 최소 구현 예시:
```
uvicorn backend.main:app --host 127.0.0.1 --port 8001
python3 -m http.server 5174 -d frontend
`frontend/src/main.js`의 `API_PORT`도 `8001`로 맞춥니다.
```
- 검증 명령: python3 -m py_compile backend/init_db.py backend/main.py
- 기대 결과: 포트 충돌 시 사용자가 다음 명령과 코드 수정 위치를 바로 알 수 있다.
작업 5: 문법 및 진단 확인
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/frontend/src/main.js (진단), /Users/woozooni/Documents/trae_projects/skillDesk/README.md (진단)
- 할 일: IDE 진단으로 새 오류를 확인하고, 필요 시 즉시 수정한다.
- 검증 도구: IDE 진단 확인
- 기대 결과: 수정 파일에 새 오류가 없다.
작업 6: 수동 확인 절차 정리
- 대상 파일: /Users/woozooni/Documents/trae_projects/skillDesk/README.md (검토)
- 할 일: 사용자가 직접 확인할 수 있도록 기본 포트 실행과 대체 포트 실행 시 어떤 주소를 열어야 하는지 최종 점검한다.
- 실행 명령:
```
uvicorn backend.main:app --host 127.0.0.1 --port 8001
python3 -m http.server 5174 -d frontend
```
- 기대 결과: frontend/src/main.js의 API_PORT를 8001로 맞추면 http://127.0.0.1:5174에서 정상 동작해야 한다는 실행 흐름이 README에 반영된다.

4.7 KiB Raw Permalink Blame History

SQLite + FastAPI + Vue 포트 설정 분리 구현 계획

4.7 KiB

Raw Permalink Blame History