Vue 3 SPA 와 Java 서버 연동

@RestController
@RequestMapping("/api/todos")
class TodoController {
    private final TodoService service;

    @GetMapping
    List<Todo> list() { return service.findAll(); }

    @PostMapping
    ResponseEntity<Todo> create(@RequestBody TodoRequest req) {
        Todo t = service.create(req.title());
        return ResponseEntity.status(201).body(t);
    }

    @PatchMapping("/{id}")
    Todo update(@PathVariable long id, @RequestBody TodoRequest req) {
        return service.update(id, req);
    }

    @DeleteMapping("/{id}")
    ResponseEntity<Void> delete(@PathVariable long id) {
        service.delete(id);
        return ResponseEntity.noContent().build();
    }
}

spring:
  web:
    resources:
      static-locations: classpath:/static/
      cache:
        cachecontrol:
          max-age: 0        # index.html 등 기본은 짧게, 라이브러리 경로는 별도 설정

// vue-router.global.prod.js 도 static/js/plugin 에 둔다
const { createApp } = Vue;
const { createRouter, createWebHistory } = VueRouter;

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: TodoList },
    { path: '/todos/:id', component: TodoDetail },  // 상세 화면
  ],
});
createApp(App).use(router).mount('#app');

// TodoDetail 컴포넌트: 라우트 파라미터로 상세를 조회
const TodoDetail = {
  props: ['id'],
  template: `<div>{{ todo?.title }}</div>`,
  setup(props) {
    const todo = ref(null);
    onMounted(async () => { todo.value = await api('GET', `/api/todos/${props.id}`); });
    return { todo };
  },
};

// 목록 조회에 검색·페이징 조건을 붙인다
async function loadTodos(q, page, size) {
  const params = new URLSearchParams({ q, page, size });
  return api('GET', `/api/todos?${params}`);
}

// TodoApi: query 파싱은 07 레슨의 Page 와 같은 방식
Map<String, String> q = query(ex.getRequestURI().getQuery());
int page = Integer.parseInt(q.getOrDefault("page", "0"));

const error = ref('');
let errorTimer = null;

function showError(message) {
  error.value = message;
  clearTimeout(errorTimer);
  errorTimer = setTimeout(() => { error.value = ''; }, 3000);  // 3초 후 자동 소거
}
// run() 의 catch 블록에서 error.value = e.message 대신 showError(e.message) 호출
// busy.value 는 그대로 :disabled 에 묶어 중복 클릭을 막는다