jQuery UI 사용시 유의사항

프로젝트를 진행하던 중, 어느 순간부터 Semantic UI의 Form Validation 기능이 동작하지 않는 상황이 발생했다.

프로젝트 자체에 변경사항이 많긴 했지만 JS 소스는 건드리지 않았던 상태라 도무지 감을 잡을 수가 없었다.

콘솔에 출력을 하나하나 찍어보고, 크롬 개발자 도구를 이용해 form 객체 출력도 해보고 별짓을 다 해보며 1시간을 허비한 결과… 마침내 알아냈다!

정말 사소하게도, 백엔드에서 페이지 템플릿을 재구성하면서 자바스크립트 파일을 불러오는 순서를 바꾼 것이 원인이었다.

Semantic UI에서는 $.fn.form을 정의해 Form Validation을 구현하고 있었는데, Drag & Drop 이벤트 구현을 위해서 사용했던 jQuery UI가 이 객체를 재정의하고 있었던 것이다.

순서를 바꾸기 전에는 jQuery UI가 먼저 불려져서 문제가 없었지만, 템플릿을 재구성하며 순서가 뒤로 가자 문제를 일으켰던 것이었다.

오늘의 결론 : 나비효과는 무섭다