# 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`로 분리한다.
  - **최소 구현 예시:**
    ```javascript
    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 호출이 새 상수를 그대로 사용하도록 유지한다.
  - **최소 구현 예시:**
    ```javascript
    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`을 명령 예시로 명확히 적는다.
  - **최소 구현 예시:**
    ```markdown
    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`를 어디서 바꾸는지 안내한다.
  - **최소 구현 예시:**
    ```markdown
    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` (검토)
  - **할 일:** 사용자가 직접 확인할 수 있도록 기본 포트 실행과 대체 포트 실행 시 어떤 주소를 열어야 하는지 최종 점검한다.
  - **실행 명령:**
    ```bash
    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에 반영된다.