Vue에서 Kendo UI의 kendo-vue-dropdowns 버전 1.0.0에서 1.2.0로 업그레이드

문제

회사에서 화면의 UI툴로 Kendo UI를 사용한다.

https://www.telerik.com/kendo-vue-ui/components/introduction/

Kendo UI for Vue Native Components Introduction - Kendo UI for Vue Native Docs & Demos

 

Kendo UI의 DoropDowns의 중 ComboBox를 사용하고 싶었으나, DoropDowns 1.0.0 버전는 ComboBox가 존재하지 않았다.

참고로, Kendo UI는 현재 버전이 3점대까지 나왔다. 2버전부터는 상업용 라이센스가 필요하다. (라이센스 관련 문서 참조: https://developer-minji.tistory.com/269)

 

 

문제 해결

package.json의 변경 전 dependencies는 아래와 같다.

이 중에서 kendo-vue-dropdowns 버전을 1.2.0으로 변경해주면 된다.

 

 

왜 1.2.0 버전이냐면, 1버전 중 가장 최신이 1.2.0이었다.

https://www.npmjs.com/package/@progress/kendo-vue-dropdowns?activeTab=versions 

 

참고로, 절대 kendo-vue-animation 등 다른 kendo-vue-xxxx 버전을 1.2.0으로 다함께 변경하면 안된다.

Build는 되지만, 기존에 잘 되던 기능들이 되지 않는다.

나는 dropdowns의 Combobox 기능만 추가로 필요했으므로, kendo-vue-dropdowns 버전만 1.2.0으로 변경해주었다.

 

변경 후, npm install하면 package-lock.json이 아래와 같이 변경된 것을 확인할 수 있다.

참고로, package-lock.json은 설치된 모듈이 변경될 때마다 같이 변경된다. 빨간 배경이 삭제된 부분, 초록 배경이 추가된 부분이다. 

 

빨간 박스를 보면 kendo-vue-dropdown이 1.2.0 버전으로 다운로드 된 것을 알 수 있다.

 

kendo-vue-dropdown 1.2.0 버전은 노란색 박스의 requires를 보면 kendo-vue-comon, kendo-vue-popup 모두 1.2.0 버전을 요구한다. 그럼 npm이 알아서 kendo-vue-dropdown의 dependency에 kendo-vue-common을 1.2.0으로 다운 받는 걸 확인할 수 있다.

 

kendo-vue-popup 1.2.0 버전은 녹색 박스를 보면 kendo-vue-animation, kendo-vue-common 모두 1.2.0 버전을 요구한다.

 

즉, kendo-vue-dropdow만 1.2.0으로 변경해도 npm이 알아서 요구되는 dependency로 설치해주는 것을 알 수 있다.

 

이번에 무턱대고 버전을 변경하려고 하다가 거의 이틀 동안 삽집을 많이 했는데, 버전을 변경할 때는 변경이 필요한 것만 바꾸면서 연관되는 나머지를 차근차근 변경하는 것이 좋다는 것을 깨달았다.

 

번외로 Kendo UI를 2점 대, 3점 대로 올리지 못한 이유는, 2점대 부터 라이센스가 필요한 것도 있지만, 현재 사용하고 있는 노드의 버전을 10에서 12로 올려야되는 문제도 있었다. 이미 라이브에서 사용되고 있는 서비스라 서비스 전체에 끼칠 영향도가 클 거 같아 major 버전을 변경하지 않았다.