koreafood/skillDesk

Fork 0

Files

T

koreafood b159597559 Initial commit

2026-06-10 12:49:53 +09:00

3.5 KiB

Raw Permalink Blame History

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에 아래 형태의 전역 객체를 둔다.

<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

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

예시 구조:

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`

데이터 흐름

브라우저가 index.html을 먼저 읽는다.
window.APP_CONFIG가 전역으로 설정된다.
main.js가 이 값을 읽어 실제 API 주소를 조합한다.
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 기능은 그대로 유지한다.
설정 시스템은 예제 규모에 맞게 가장 단순한 수준으로 둔다.
포트 변경 지점은 한 곳으로 모은다.

3.5 KiB Raw Permalink Blame History