[메모] Svelte + SortableJS Dom 중복 업데이트 오류

 

오류 현상

 

• 실제로 값이 2개가 추가되는 것이 아닌, Sortable JS 의 DOM 업데이트와 Svelte의 반응성이 더해져 2개의 데이터가 추가되는 것 처럼 보이는 현상.

 

[ 해결 코드 ]

onAdd(event) {
    this.el.removeChild(event.item)
},

 

[ Sortable 전체 코드 ]

<script>

    ...
    let cardsEl
    let sortableCards

    onMount(() => {
        sortableCards = new Sortable(cardsEl, {
            group: "cards",
            handle: ".card",
            delay: 150,
            animation: 0,
            forceFallback: true,
            onAdd(event) {
                this.el.removeChild(event.item)
            },
            onEnd(event) {
                console.log(event)
                console.log(event.clone)
                cards.reorder({
                    fromListId: event.from.dataset.listId,
                    toListId: event.to.dataset.listId,
                    oldIndex: event.oldIndex,
                    newIndex: event.newIndex
                })
            }
        })
    })
    
    ...
</script>

• Sortable 객체 내부의 onAdd(event) {} 로직을 통해서 add 이벤트로 인해 요소가 추가되는 toList에 생성될 요소를 제거하는 로직을 추가해서 해결되었다.

 

DOM 업데이트와 관련된 버그들 디버깅이 상당히 어려운 느낌이다. 강의 버전인 Svelte 3,4 버전과 현재 사용중인 Svelte 5 와 버전 차이로 인한 문제들은 많았는데, 자주 사용할 것 같은 라이브러리 관련 오류라 임시로 글 작성해두었다.

 

슬슬 Svlete 관련 내용들도 정리해서 올려보도록 해야겠다.🔥