Vue3, drag and drop & folder tree

Vue 3에 대한 지원이 완전히 갖춰진, 잘 구현된 드래그 앤 드롭 트리 라이브러리를 찾는 것은 어려울 수 있습니다. 많은 라이브러리들이 아직 Vue 3를 완전히 지원하지 않고 있기 때문입니다. Vue 3를 사용하여 드래그 앤 드롭 트리를 구현하려면 다음 두 가지 접근 방식 중 하나를 선택할 수 있습니다. 1. Vue 3 Compat 모드 사용: 이 모드를 사용하면 Vue 2로 작성된 라이브러리를 Vue 3에서 사용할 수 있습니다. Vue 3 Compat 모드는 대부분의 Vue 2 코드를 Vue 3에서 실행할 수 있게 해주는 역호환성 레이어입니다. 그러나 이 접근법은 장기적으로는 권장되지 않으며, 필요한 라이브러리가 Vue 3를 지원하게 되면 해당 라이브러리를 사용하는 것이 좋습니다. 2. Vue 3를 위한 커스텀 드래그 앤 드롭 트리 컴포넌트 작성: Vue 3의 새로운 컴포지션 API를 활용하여 자체 드래그 앤 드롭 트리 컴포넌트를 작성할 수 있습니다. 이 접근법은 시간이 더 많이 걸리지만, 프로젝트의 요구 사항에 맞게 완벽하게 맞춤화된 컴포넌트를 만들 수 있다는 장점이 있습니다. 또한, 웹 API의 HTML Drag and Drop 인터페이스를 활용하여 자체적으로 드래그 앤 드롭 기능을 구현하는 것도 가능합니다. 이 API는 드래그 앤 드롭 작업을 쉽게 처리할 수 있는 이벤트와 메소드를 제공합니다. 현재 Vue 3를 완전히 지원하는 드래그 앤 드롭 트리 라이브러리는 없는 것으로 보입니다. 따라서 Vue 3를 위해 특별히 설계된 컴포넌트를 만들거나, 기존의 HTML Drag and Drop API를 활용해야 할 수 있습니다.