109 lines
3.5 KiB
Markdown
109 lines
3.5 KiB
Markdown
# 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 기능은 그대로 유지한다.
|
|
- 설정 시스템은 예제 규모에 맞게 가장 단순한 수준으로 둔다.
|
|
- 포트 변경 지점은 한 곳으로 모은다.
|