Kendo UI [1]

Kendo UI 소개

Kendo UI는 telerik 사에서 만든 library의 하나이다. Kendo UI는 jQuery 및 Angular, React, Vue 언어를 사용하는 환경에서 사용할 수 있으며 공식 docs에서는 이렇게 소개하고 있다.

• Kendo UI는 대화형 고성능 웹 사이트 및 애플리케이션을 구축하기 위한 포괄적인 HTML5 사용자 인터페이스 프레임워크입니다. 이 제품에는 70개 이상의 UI 위젯 라이브러리, 풍부한 데이터 시각화 가젯, 클라이언트측 데이터 원본 및 내장 MVVM(Model-View-ViewModel) 라이브러리가 함께 제공됩니다.
• jQuery용 Kendo UI는 Angular를 제공합니다.JS와 Bootstrap 통합은 프로젝트 요구 사항에 따라 선택할 수 있는 여러 제품 단위의 일부로 배포됩니다. 이 제품군에는 기업 등급의 비즈니스 애플리케이션을 위한 위젯이 포함되어 있으며 전문가와 시기적절한 기술 지원이 필요한 전문 웹 사이트를 만드는 데 적합합니다.

 

---

 

Kendo UI 쓰임새

이러한 Kendo UI를 사용하면 손쉽게 Grid 및 Chart, DropDownList, Toobar 등을 구현할 수 있는데, 필자는 jQuery 기반 환경에서 사용할 수 있는 Kendo UI에 대하여 알아보고, 응용한 기록을 작성할 생각이다.

 

---

 

Kendo UI 구현 가능 Component 목록 확인

Kendo UI의 공식 홈페이지 주소에 접속해보자. URL은 다음과 같다. https://www.telerik.com/kendo-ui 해당 URL 접속 시, 다음과 같은 화면이 보일 것이다.

해당 화면의 하단으로 내리다보면, 'All Kendo UI Components' 라는 글귀와 함께, Kendo UI로 구현할 수 있는 component 목록이 보일 것이다.

 

필자는 jQuery 기반의 환경에서 사용 가능한 component 목록을 확인하고자 한다. header 메뉴 중, 'DEMOS' tap이 존재할 것이다. 해당 tap에 마우스를 올리면 다음과 같이 출력된다.

펼쳐진 하위 tap 중, jQuery를 클릭하자. 'MOST POPULAR JQUERY COMPONENTS' 라는 글귀와 함께 다음과 같은 화면이 보일 것이다. jQuery component 중 가장 많이 사용되는 component들을 나열해 놓은 것이다.

해당 화면에서 조금 더 밑으로 내리면...

메인 화면에서의 'All Kendo UI Components'와 같이, jQuery 환경에서 구성할 수 있는 component 목록이 출력된다. 해당 목록에서 사용하고 싶은, 혹은 연습하고자 하는 component를 클릭하여 telerik 사에서 지원하는 예시를 확인하면 된다.

 

---

 

Kendo UI 연습하기

Kendo UI는 공식 홈페이지에서 자체적으로 연습할 수 있는 공간을 제공해주고 있다. 링크는 다음과 같다.

• Kendo UI Dojo : https://dojo.telerik.com/

해당 링크를 통하여 이동할 시, 다음과 같은 화면을 볼 수 있다.

해당 화면의 좌측은 Kendo UI를 연습해볼 수 있는 소스코드 입력란이며, 우측은 중앙 상단의 [ Run ] 버튼을 클릭 시, 좌측에서 입력한 소스코드에 대한 output이 출력되는 영역이다. 좌측의 소스코드 입력란에서는 Kendo UI 뿐만 아니라, jQeury 및 javascript 또한 적용되므로, 실제 활용 및 사용에 앞서 연습하기에는 최적의 공간이라 볼 수 있다.

 

물론, 실제로 사용하기에는 라이센스 비용을 지불해야 한다는 가장 큰 단점이 존재하지만...

 

 

 

---

 

 

 

[ 출처 ]

Kendo UI 소개 : https://www.telerik.com/kendo-ui

Kendo UI 소개 : https://docs.telerik.com/kendo-ui/introduction