7. 정리
- SPA 는 서버의 "HTML 생산" 역할을 "정적 파일 + JSON API" 로 바꿉니다. 서버 코드는 그만큼 단순해집니다.
- 같은 출처 배포(A)는 CORS 가 필요 없어 폐쇄망 사내 시스템에 적합하고, 분리 배포(B)는 Nginx 가 정적 파일을, Java 가 API 만 맡습니다.
- 정적 서빙은 MIME 타입, 캐시 정책, 경로 탐색 방지 세 가지를 반드시 챙겨야 합니다. 이 중 하나만 빠져도 화면이 안 뜨거나 보안 구멍이 됩니다.
- SPA history 모드는 확장자 없는 경로만
index.html로 폴백해야 새로고침도 되고 오타 파일도 404 로 남습니다. - 폐쇄망에서는 CDN 대신 라이브러리 전역 빌드를 내려받아
static/js/plugin/에 버전별 폴더로 관리합니다. fetch래퍼가 07 레슨의 에러 규격{"status","message"}을 한곳에서 처리하고, 모든 변경은 "요청 → 재조회" 로 서버를 단일 진실 원천으로 유지합니다.- Vue 3 Composition API 는
createApp/setup/ref/computed/onMounted다섯 개와v-model/v-for/v-if/@submit.prevent/:disabled다섯 디렉티브로 이 레슨의 화면 전체를 설명합니다. - Spring Boot 로 옮기면
TodoApi는@RestController로, 정적 폴더는src/main/resources/static으로, SPA 폴백은forward:/index.html컨트롤러 하나로 대체됩니다. Vite 로 빌드 도구를 쓰게 되면.vue단일 파일 컴포넌트와 Vue Router·Pinia 로 자연스럽게 확장됩니다.