changdongchun commented 4 years ago

Description

플리킹영역을 destory시키려고 할때 간헐적으로 아래와 같은 오류가 나서

jquery-3.5.1.min.js?v=2020090510:2:32392)

============================================================ if (window[categoryId + "Flicking"] != null || window[categoryId + "Flicking"] != undefined) { window[categoryId + "Flicking"].destroy(); }

위와같이 해당 플리킹 영역 아이디 및 플리킹 변수가 있을때만 destory시키고 있음에도 위와같으 오류가 나고 있는데요 더 체크해야 할 항목이 있을까요?

Steps to check or reproduce

WoodNeck commented 4 years ago

안녕하세요 에러로그만 봐서는 어떤 이슈인지 정확히 파악이 어렵습니다. 에러 자체는 삭제하고자하는 엘리먼트가 이미 삭제되어 존재하지 않는 경우가 아닐까 추측되는데요 Flicking destroy시 삭제되는 엘리먼트는 .eg-flick-viewport 엘리먼트, .eg-flick-camera 엘리먼트, 그리고 클론된 패널들입니다. 위 엘리먼트들이 destroy 수행 전 이미 삭제되었는지 체크해보시는걸 추천드립니다.

changdongchun commented 4 years ago

destory 시작 전 해당 아이디의 find ".eg-flick-viewport" 의 length가 0보다 크면 destory시켰더니 위와 같은 문제가 더이상 나타나지 않음을 확인 하였습니다. 감사합니다.

codemilli commented 1 year ago

@WoodNeck 님 안녕하세요, 혹시 viewport 엘리먼트를 삭제하는 로직은 어디를 봐야할지 여쭤봐도 될까요?

WoodNeck commented 1 year ago

@codemilli 안녕하세요.

Flicking 메이저 3버젼을 사용중이신 경우(v3.x.x) 아래 링크에서 엘리먼트 제거 로직을 확인하실 수 있습니다.

https://github.com/naver/egjs-flicking/blob/v3/src/components/Viewport.ts#L685

v3의 경우 v4와 다르게, 사용자가 모든 엘리먼트를 제공할 필요가 없고, 엘리먼트가 존재하지 않을 경우 Flicking에서 자동생성됩니다. 위 링크의 코드에서는 사용자가 어떤 엘리먼트들을 제공했느냐에 따라 제거하는 엘리먼트가 달라지는 부분이 포함되어 있으므로 참고 부탁드리겠습니다. 예를 들어, 사용자가 Viewport 엘리먼트만 제공했을 경우 카메라 엘리먼트(.eg-flick-camera)를 대신 제거하게 됩니다. 코드에서 보실 수 있는 것처럼 destroy 호출시에 preserveUI 옵션을 사용하실 경우 엘리먼트 삭제 및 스타일 복원 부분을 건너뜁니다.

flicking.destroy({ preserveUI: true });

changdongchun commented 1 year ago

v3에서 preserveUI 가 하는 역할은 어떤건가요? 그냥 flicking.destroy();만 해봐서리..

codemilli commented 1 year ago

@WoodNeck 빠른 답변 감사합니다 ! 제가 정확한 정보를 드리지 못 했네요, 현재 "@egjs/flicking": "^4.10.4" 버전을 사용하고 있습니다. v4의 경우 Viewport 객체에 destroy 메서드가 없네요.

제가 질문드린 문맥도 말씀드리자면, 현재 react-flicking 을 사용하지 않고 리액트 프로젝트에서 해당 라이브러리를 사용하고 있습니다. 그리고 간헐적으로 리액트 쪽에서 아래와 같은 버그가 발생했는데요.

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

저는 flicking 라이브러리가 viewport 엘리먼트를 삭제한 뒤, 리액트가 해당 엘리먼트로 또 삭제할 때 발생한다고 보고 있습니다 (컴포넌트 unmount시 flicking.destroy() 호출하고 있습니다).

WoodNeck commented 1 year ago

@changdongchun님 위부분에서 설명했던 것처럼, Flicking v3의 경우 엘리먼트를 직접 생성하는데, destroy시에 생성했던 엘리먼트를 삭제하고 스타일을 되돌림으로써 원상복귀하는 작업을 합니다. preserveUI는 해당 과정을 건너뛰어서, Flicking이 변경한 내용을 그대로 유지합니다.

@codemilli님 Flicking v4의 경우 renderOnlyVisible 옵션을 사용하실 때에만 엘리먼트를 직접 삭제하는 로직이 포함됩니다. 그래서 해당 옵션을 사용중이신 경우라면 엘리먼트가 삭제된 후 React에서 다시 삭제하는 과정에서 오류가 발생했을 것으로 추정됩니다. 저희가 공식적으로 제공하는 패키지인 react-flicking에서는 해당 처리가 포함되어있기 때문에, 가급적이면 react-flicking을 사용하시는 것을 추천드리는데요 사용이 불가능할 경우에는, destroy 호출 전에 이미 삭제되었던 엘리먼트들을 되돌리도록 하는 처리를 추가해보시면 어떨까 합니다.

flicking.panels.forEach(panel => {
  panel.markForShow();
});

codemilli commented 1 year ago

@WoodNeck 답변 감사합니다! 그런데 제가 아무리 찾아봐도 처음에 전달한 root 엘리먼트를 삭제하는 로직을 찾을 수가 없는데요, 혹시 어디서 삭제하는지 여쭤봐도 괜찮을까요?

추가로 현재 제 환경에서는 destroy() 를 직접 호출해도 엘리먼트가 삭제되지 않습니다 (renderOnlyVisible: true 인 경우에도).

WoodNeck commented 1 year ago

@codemilli 4버젼을 사용중이길 경우 삭제하는 로직이 앖는게 맞습니다. 보통 사용 중에 패널 엘리먼트에 대한 직접적인 조작으로 변동이 있었을 경우 React에서 그런 에러를 내게 되는데요, 이게 제법 까다로운 부분이라 가급적이면 React에 특화된 패키지를 직접 사용하시는걸 추천드립니다. 현재 사용방법대로라면, 제 생각에(테스트는 안되었지만) 이런 옵션들은 사용하실 수 없습니다.

renderOnlyVisible
circular
virtual

위 옵션들은 엘리먼트를 제거하거나 순서를 바꿀 위험이 있어 사용이 어려울 것 같습니다. 이 경우에 react-flicking을 사용하시지 않는다면 이슈 해결도 어려울 것으로 생각됩니다.

codemilli commented 1 year ago

@WoodNeck 네! 확인 감사합니다 : ) 많은 도움이 되었습니다 👍

naver / egjs-flicking

destory 실행시 간헐적 오류 #372

Description

============================================================ if (window[categoryId + "Flicking"] != null || window[categoryId + "Flicking"] != undefined) { window[categoryId + "Flicking"].destroy(); }

Steps to check or reproduce