[6기 부산 심현정] Ext JS4 파헤치기 #1

안녕하세요. 부산멤버십 23-1기 심현정입니다.

삼성소프트웨어멤버십에서 인트라넷을 개발팀에 소속되어 다양한 웹 지식과 경험을 쌓았으며, 멤버십 블로그를 통해 제 IT 지식을 공유하게 되어 기쁩니다. 저도 많이 부족하며 공부하는 단계이기 때문에 잘못 알고있는 부분이 있다면 꼭 알려주시면 감사하겠습니다(^^)

 

1.     Ext js

Ext js는 Sencha사에서 개발한 자바스크립트 라이브러리 프레임워크입니다. 일반적으로 웹에서 자바스크립트는 동작을 하는 Function을 만들기 위해 사용되는데, 이 프레임워크는 자바스크립트로 완성된 UI 컴포넌트들을 다양하게 제공함으로써 어플리케이션 개발 속도를 상승하도록 도와줍니다. Chart 또는 Tree 리스트와 같은 UI 구성은 복잡하면서 시간도 많이 잡아먹으며 버그없이 제대로 작동할거라고 확신할 수도 없습니다. Ext js를 사용함으로써 이러한 문제점을 쉽게 해결할 수 있죠. 

프레임워크인 만큼 Ext js 컴포넌트를 만드는 문법이 존재합니다.

(오타가 있네요. 1번 라인 .. -> . 입니다)

위의 코드는 Ext js 문법에 맞게 만든 view class입니다. JSON과 같은 형태를 띄기 때문에 웹개발에 익숙한 분들은 쉽게 배우실 수 있을거에요.

Ext js4 이전의 버전은 개발자의 의도에 맞게 컴포넌트들을 변경하는 것에 상당한 제약이 있었지만, Ext js4에서는 class와 MVC 아키텍처까지 제공하면서 객체지향적이면서 개발자의 커스텀한 컴포넌트들을 쉽게 개발을 할 수 있습니다. 현재 Ext js4로 개발을 하고 있으며 가장 최신 버전이기 때문에 Ext js4를 기준으로 적어볼까 합니다.

2.     개발 참고 사이트

A.     Sencha (http://docs.sencha.com/extjs/4.2.2/)

Ext js 사용법은 Sencha에서 모두 제공하고 있습니다. 오른쪽 상단의 검색기능을 통해 필요한 컴포넌트 정보를 바로 찾을 수 있어 편리합니다. 제공하는 컴포넌트 외에도 Ext js에 활용되는 개념들에 대한 정보도 제공하고 있습니다. 저에겐 Ext js의 백과사전으로 통합니다. 

 

B.     Ext JS Examples (http://dev.sencha.com/deploy/ext-4.0.0/examples/)

Sencha에서 제공하는 페이지입니다. Ext js4의 다양한 컴포넌트들의 샘플을 제공하고 있습니다. 새로운 것을 빨리 익힐 수 있는 방법 중 하나가 완성된 샘플을 분석하는 것이라고 생각합니다. 샘플을 변형해 가면서 컴포넌트를 이해할 수 있으며, 샘플을 긁어와서 개발 시간을 단축할 수도 있습니다. 저는 주로 샘플을 보면서 제가 어떤 컴포넌트가 필요한 지를 찾습니다.

[샘플1 - Bar Chart]

[샘플2 - Array Grid]

다음 시간에는 Ext js4의 핵심이 될 수 있는 MVC 아키텍쳐에 대해 알아보겠습니다. 읽어주셔서 감사합니다.