# SQLite + FastAPI + Vue 전역 설정 분리 설계

## 목표

프론트엔드가 백엔드 API 주소를 코드 내부 상수에 직접 고정하지 않고, `index.html`의 전역 설정 객체를 통해 읽도록 바꿔서 포트 변경 시 자바스크립트 로직을 수정하지 않아도 되게 만든다.

## 배경

현재 예제는 `frontend/src/main.js`에 `API_HOST`, `API_PORT`, `API_BASE_URL` 상수가 직접 선언되어 있다.

이 구조는 이전보다 단순하지만, 포트를 바꿀 때 여전히 `main.js`를 수정해야 한다. 예제 사용성 관점에서는 HTML 설정만 바꾸고 Vue 로직은 그대로 두는 쪽이 더 이해하기 쉽다.

## 범위

이번 작업은 다음을 포함한다.

- `frontend/index.html`에 전역 설정 객체 추가
- `frontend/src/main.js`가 전역 설정 객체를 읽도록 변경
- 설정이 없을 때 기본값 `127.0.0.1:8000` 사용
- README에 설정 위치를 `index.html` 기준으로 설명

이번 작업은 다음을 포함하지 않는다.

- 별도 `config.js` 파일 추가
- `.env` 기반 설정 시스템 도입
- URL 쿼리 파라미터 기반 포트 주입
- 백엔드 설정 시스템 변경

## 구조

### 1. HTML 전역 설정

`frontend/index.html`에 아래 형태의 전역 객체를 둔다.

```html
<script>
  window.APP_CONFIG = {
    apiHost: 'http://127.0.0.1',
    apiPort: '8000',
  }
</script>
```

이 값은 프론트엔드 애플리케이션이 시작되기 전에 정의되어야 한다.

### 2. 프론트엔드 설정 읽기

`frontend/src/main.js`는 `window.APP_CONFIG`를 읽어 아래 값을 만든다.

- `apiHost`
- `apiPort`
- `API_BASE_URL`

설정이 없거나 일부 속성이 빠져 있으면 기본값을 사용한다.

예시 구조:

```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`
```

## 데이터 흐름

1. 브라우저가 `index.html`을 먼저 읽는다.
2. `window.APP_CONFIG`가 전역으로 설정된다.
3. `main.js`가 이 값을 읽어 실제 API 주소를 조합한다.
4. Vue 애플리케이션은 조합된 API 주소로 CRUD 요청을 보낸다.

## 기본값 처리

전역 설정 객체가 없더라도 예제가 깨지지 않도록 기본값을 유지한다.

- 기본 호스트: `http://127.0.0.1`
- 기본 포트: `8000`

즉, 설정 객체는 선택 사항이지만 존재하면 우선 적용된다.

## README 문서화 방식

README에는 아래 내용을 포함한다.

- 기본 실행 예시
- `index.html`의 `window.APP_CONFIG` 위치 설명
- 포트 충돌 시 `apiPort`를 어떻게 바꾸는지 설명
- 프론트 정적 서버 포트는 여전히 실행 명령에서 따로 바꾼다는 점

## 오류 처리

- 전역 설정이 없으면 기본값으로 동작한다.
- 전역 설정의 값이 잘못되어 연결에 실패하면 기존 fetch 에러 문구를 보여준다.
- README에 백엔드 포트와 `apiPort`가 같아야 한다는 점을 분명히 적는다.

## 검증 기준

다음 조건을 만족하면 성공이다.

- `main.js`를 수정하지 않고 `index.html`의 `apiPort` 값만 바꿔 다른 백엔드 포트로 연결할 수 있다.
- 전역 설정이 없어도 기본값으로 기존 CRUD 기능이 유지된다.
- README만 읽어도 설정 위치와 수정 방법을 이해할 수 있다.

## 구현 원칙

- 기존 CRUD 기능은 그대로 유지한다.
- 설정 시스템은 예제 규모에 맞게 가장 단순한 수준으로 둔다.
- 포트 변경 지점은 한 곳으로 모은다.