블로그 이미지
올해목표 // 10월 어학연수 떠나자~ 자수씨

카테고리

전체글 (1457)
Brand New! (28)
주절주절 (213)
MOT (11)
해외쇼핑 (49)
쇼핑노트 (150)
취미생활 (94)
iPhone (4)
Eclipse (121)
Google (83)
Spring (31)
JAVA (176)
JavaScript (59)
WEB (49)
Database (20)
OS (26)
Tools (8)
Tips (26)
IT정보 (1)
Book (21)
Programming (37)
외부행사 (43)
주변인들 (17)
여행노트 (60)
학교생활 (30)
회사생활 (52)
사회생활 (5)
외국어공부 (12)
잡동사니 (30)
Total1,332,323
Today6
Yesterday38
 
Statistics Graph
 

달력

« » 2019.12
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
 

지난 금요일에 Ext JS 4 에 대해 포스팅 이 하나 더 올라왔습니다. 새로워진 Data Package 에 대해 알아보도록 하겠습니다.


Data Package 는 Ext JS 4 에서 완벽하게 다시 쓰여졌습니다. 하지만 이전 버전과 같은 접근 방식으로 사용할 수 있습니다.


무엇이 달라졌을까?
Ext JS 4 의 Data Package 는 43 종류의 클래스로 구성되어 있습니다. Model, Proxy, Store 가 가장 중요한 클래스 3개와 나머지로 구성되어 있습니다.





모델과 스토어
데이터 패키지의 중심은 Ext.data.Model 입니다. 모델은 어플리케이션에서 몇가지 데이터 타입으로 표현됩니다. 가장 심플한 모델은 필드와 데이터로 설정됩니다. Ext JS 3  에서는 Ext.data.Model 의 선구자 격인 Ext.data.Record 를 유사하게 사용하였습니다. 새로운 모델을 만드는 방법은 아래와 같습니다.

모델은 일반적으로 스토어와 함께 기본적인 모델 인스턴스의 집합으로 사용됩니다. 간단하게 스토어를 설정하고 데이터를 로딩하는 방법은 아래와 같습니다.

User 모델 인스턴스는 'users.json' 의 url 을 통해 로드됩니다. 스토어는 AjaxProxy 를 사용하며, url 을 통해 읽어들인 데이터를 Ext.data.Reader 클래스를 통해 디코드 하도록 설정되어 있습니다. 이 경우 서버는 json 을 반환하므로 응답에 대해 JsonReader 가 설정되어야 합니다.

스토어는 Ext JS 4 를 사용한다면, 리모트에서 뿐만 아니라, 로컬에서 정렬, 필터링, 그룹핑을 수행할 수 있습니다. 더 이상 별도의 GroupingStore 는 필요하지 않습니다. 다중 정렬, 필터링, 그룹핑을 표준 스토어에서 처리할 수 있습니다.

스토어가 생성되면, 데이터는 id 보다 name 을 우선순위로 정렬이 됩니다. name 이 'Ed' 인것만 포함되도록 필터링 되며, age 로 그룹핑될 것 입니다. Store API 를 통해 언제든지 쉽게 정렬, 필터링과 그룹핑을 변경할 수 있습니다.



프록시
아래를 통해 스토어를 사용하여 프록시에서 데이터를 어떻게 읽어들이는지 볼 수 있습니다. Ext JS 4 에서의 한가지 구조적 변화는 스토어에서 Reader 와 Writer 에 대한 직접 연결이 필요없다는 것 입니다. 이것은 엄청난 혜택을 제공합니다. 프록시를 모델에서 직접 정의할 수 있습니다.

첫번째는 같은 방식으로 데이터를 로드하는 모델을 사용하는 스토어의 중복을 피할 수 있습니다. 두번째는 모델 데이터의 저장과 불러오기를 스토어 없이 할 수 있습니다.

HTML5 의 새로운 기능을 활용하여 몇 가지 새로운 프록시를 도입하였습니다(LocalStoargeProxy, SessionStorageProxy). 이전 브라우저는 새로운 HTML5 API 를 지원하지는 않지만, 많은 애플리케이션들이 그들의 존재로부터 엄청난 혜택을 알고 있기에 유용합니다. 그리고 필요로 하는 프록시가 없는 경우 쉽게 만들 수 있습니다.



연관 (Associations)
프록시는 모델에 새로운 기능을 추가하는 것에 지나지 않습니다. 새로운 Association API 와 함께 모델을 연결할 수 있습니다. 대부분의 애플리케이션은 다양한 모델과 거의 대부분이 모델과 연관된 것으로 다루어 집니다. 블로그 작성 애플리케이션은 사용자(User), 포스트(Post)와 댓글(Comment)을 가지고 있을 것 입니다. 각 사용자는 포스트를 작성하고, 각 포스트는 댓글을 전달받을 것 입니다. 이들의 관계는 아래와 같이 표현할 수 잇습니다.

이것을 통해 애플리케이션에서 다른 모델들 간의 풍부한 관계를 표현하기 쉬워집니다. 각 모델들은 임의의 순서를 정의할 수 있는 모델을 통해 임의의 연관 번호를 가질 수 있습니다. 일단 모델 인스턴스를 갖는다면, 쉽게 연관 데이터를 조회할 수 있습니다. 예를 들어, 특정 사용자의 각 포스트에 만들어진 댓글을 로깅하기를 원한다면 아래처럼 할 수 있습니다.

각 hasMany 관계는 모델에 추가된 새로운 함수에 의한 결과 위에 만들어집니다. 각 사용자 모델은 hasMany 포스트로 선언되었습니다. user.posts() 호출에 의한 결과 스토어는 포스트 모델에 의해 구성됩니다. 결과적으로 설정된 hasMany 댓글 연관으로 인해 포스트 모델은 comments() 함수에서 댓글들을 가지고 올 수 있습니다.

User.load 호출에서 'success' 함수로 왜 전달을 해야 하는지 궁금해 할 수도 있습니다. 하지만 사용자의 포스트와 댓글을 접근할 때 그럴 필요가 없어졌습니다. 모든 데이터는 보통 어딘가에 있는 서버로 부터 로드되어야 하기 때문에 비동기적으로 로드될 것으로 간주합니다. 이것은 보통 위에 정의된 'success' 함수와 마찬가지로 데이터가 로드되었을 때 호출되는 콜백에 전달하는 것을 의미합니다.



중첩 데이터 로드(Loading Nested Data)
위에서 그랬듯이 연관을 설정함으로써, 프레임워크가 단일 요청에 의해 자동으로 중첩 데이터를 파싱 할 수 있습니다. 단일 서버에 응답으로 이 모든 데이터를 반환할 수 있습니다.

데이터는 프레임워크에 의해 모두 자동으로 파싱됩니다. 대부분 환경에서 데이터를 로드하는 모델에 대한 프록시들을 쉽게 구성할 수 있고, Reader 들은 대부분의 형식을 처리할 수 있습니다. Ext JS 3 과 마찬가지로, 모델과 스토어는 그리드, 트리와 폼과 같은 다양한 구성요소들의 프레임워크에 걸쳐 사용됩니다.


아래 그림은 Ext JS 4 가 곧 출시된다는 것을 표현한 것 입니다. 먼가 확 와닫는 디자인이네요.
 


Posted by 자수씨

댓글을 달아 주세요

글 보관함

최근에 받은 트랙백