Vue 3 SPA 와 Java 서버 연동 — 정적 서빙, 같은 출처 API, 폐쇄망 라이브러리 관리

Vue 3 화면과 REST API 를 한 Java 서버에서 서빙해 CORS 없이 연동하고, 빌드 도구 없는 폐쇄망에서 Vue 를 static/js/plugin 에 두고 쓰는 방법을 코드로 익힙니다.

1. 왜 배우는가

Spring Boot + MyBatis 로 API 를 만들고 나면 화면이 필요합니다. 사내 시스템은 화면 전환이 잦고 입력 검증도 즉시 반응해야 해서, 매번 서버가 HTML 을 새로 그리는 방식보다 브라우저에서 부분만 갈아 끼우는 SPA 가 편합니다. 여기서 Vue 3 가 자주 선택되는데, 문제는 폐쇄망입니다.

이 레슨은 두 가지를 다룹니다. 하나는 Vue 3 화면과 이전 레슨(07, REST API)의 CRUD API 를 한 Java 서버에서 같이 서빙하는 구조입니다. 다른 하나는 CDN·npm 없이 Vue 를 폴더에 내려받아 쓰는 폐쇄망 라이브러리 관리 방법입니다.

배울 내용은 정적 파일 서빙, SPA 새로고침 대응, fetch 로 API 호출, Vue 3 Composition API 최소 다섯 개입니다. 코드는 java-src/extension/08_vue_spa 에 있고 Main·StaticHandler·TodoApi 세 자바 파일과 static 폴더의 index.html·app.js·app.css 로 구성됩니다.

Main 을 인자 없이 실행하면 브라우저로 직접 확인할 수 있습니다. --demo 로 실행하면 HttpClient 가 11개 시나리오를 호출해 상태 코드와 응답을 출력하고 종료합니다.

07 레슨에서 만든 회원 API 처럼, 이 레슨의 할 일(Todo) API 도 {"status","message"} 에러 규격을 그대로 씁니다. 화면 쪽 코드가 서버 쪽 규격을 어떻게 소비하는지가 이 레슨의 핵심입니다.

Spring Boot + MyBatis + Vue 조합에서 화면 담당과 API 담당이 나뉘어 있어도, 정적 파일 서빙 규칙과 에러 규격은 프런트·백엔드가 같이 합의해 둬야 합니다. 이 레슨을 마치면 그 합의가 코드의 어느 지점에서 강제되는지 짚을 수 있습니다.