ALBERT SITE

방법 1: 전역 객체(window)에 함수 바인딩 (가장 쉬운 방법)

기존 XSLT 로직을 최소한으로 수정하면서 작동하게 만드는 방식입니다. Vue 컴포넌트가 마운트될 때 호출할 함수를 window에 강제로 할당합니다.

// Vue3 Script Setup
import { onMounted, onUnmounted } from 'vue';

const func1 = (id) => {
  console.log("Vue 내부 함수 호출됨! ID:", id);
  // 여기서 Vue의 반응형 데이터(ref) 등을 조작할 수 있습니다.
};

onMounted(() => {
  // 전역 window 객체에 함수를 등록 (HTML의 onclick이 찾을 수 있게)
  window.func1 = func1;
});

onUnmounted(() => {
  // 컴포넌트 제거 시 메모리 누수 방지를 위해 삭제
  delete window.func1;
});

• 장점: 기존에 서버에서 내려주던 <span onclick="..."> 코드를 수정할 필요가 없습니다.
• 단점: 전역 오염의 위험이 있고, 여러 컴포넌트에서 같은 이름의 함수를 쓰면 충돌할 수 있습니다.

방법 2: 이벤트 위임 (Event Delegation) 방식 (권장)

v-html이 들어가는 부모 컨테이너에 클릭 이벤트를 걸고, 클릭된 요소의 속성을 파악하여 처리하는 방식입니다. HTML 코드를 data- 속성으로 살짝 변경하면 더 깔끔합니다.

서버에서 내려주는 HTML:

<span class="clickable-item" data-id="1">click</span>

Vue3 코드:

<template>
  <div v-html="htmlContent" @click="handleHtmlClick"></div>
</template>

<script setup>
const htmlContent = '<span class="clickable-item" data-id="1">click</span>';

const handleHtmlClick = (event) => {
  // 클릭된 요소가 내가 원하는 클래스를 가졌는지 확인
  const target = event.target;
  if (target.classList.contains('clickable-item')) {
    const id = target.getAttribute('data-id');
    func1(id);
  }
};

const func1 = (id) => {
  console.log("이벤트 위임으로 호출됨! ID:", id);
};
</script>

• 장점: 전역 객체를 건드리지 않으므로 안전하며, Vue의 데이터 흐름 내에서 통제 가능합니다.
• 단점: 서버에서 내려주는 HTML 구조를 어느 정도 파악하고 있어야 합니다.

어떤 방법을 선택해야 할까요?

1. 기존 XSLT 파일이 수백 개이고 일일이 수정이 불가능하다면: **방법 1(window 바인딩)**을 사용하세요. 가장 빠르게 기존 기능을 복구할 수 있습니다.
2. 새로운 시스템의 안정성과 유지보수가 중요하다면: **방법 2(이벤트 위임)**를 사용하거나, 아까 말씀드린 대로 HTML 자체를 내려받지 말고 JSON 데이터만 받아 Vue 템플릿(v-for)으로 화면을 새로 구성하는 것이 가장 좋습니다.