불친절한자수씨

지난 금요일에 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 를 유사하게 사용하였습니다. 새로운 모델을 만드는 방법은 아래와 같습니다.
Ext.regModel('User', { fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ] })
모델은 일반적으로 스토어와 함께 기본적인 모델 인스턴스의 집합으로 사용됩니다. 간단하게 스토어를 설정하고 데이터를 로딩하는 방법은 아래와 같습니다.
new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true });
User 모델 인스턴스는 'users.json' 의 url 을 통해 로드됩니다. 스토어는 AjaxProxy 를 사용하며, url 을 통해 읽어들인 데이터를 Ext.data.Reader 클래스를 통해 디코드 하도록 설정되어 있습니다. 이 경우 서버는 json 을 반환하므로 응답에 대해 JsonReader 가 설정되어야 합니다.

스토어는 Ext JS 4 를 사용한다면, 리모트에서 뿐만 아니라, 로컬에서 정렬, 필터링, 그룹핑을 수행할 수 있습니다. 더 이상 별도의 GroupingStore 는 필요하지 않습니다. 다중 정렬, 필터링, 그룹핑을 표준 스토어에서 처리할 수 있습니다.
new Ext.data.Store({ model: 'User', sorters: ['name', 'id'], filters: { property: 'name', value : 'Ed' }, groupers: { property : 'age', direction: 'ASC' } });
스토어가 생성되면, 데이터는 id 보다 name 을 우선순위로 정렬이 됩니다. name 이 'Ed' 인것만 포함되도록 필터링 되며, age 로 그룹핑될 것 입니다. Store API 를 통해 언제든지 쉽게 정렬, 필터링과 그룹핑을 변경할 수 있습니다.



프록시
아래를 통해 스토어를 사용하여 프록시에서 데이터를 어떻게 읽어들이는지 볼 수 있습니다. Ext JS 4 에서의 한가지 구조적 변화는 스토어에서 Reader 와 Writer 에 대한 직접 연결이 필요없다는 것 입니다. 이것은 엄청난 혜택을 제공합니다. 프록시를 모델에서 직접 정의할 수 있습니다.
Ext.regModel('User', { fields: ['id', 'name', 'age'], proxy: { type: 'rest', url : '/users', reader: { type: 'json', root: 'users' } } }); //uses the User Model's Proxy new Ext.data.Store({ model: 'User' });
첫번째는 같은 방식으로 데이터를 로드하는 모델을 사용하는 스토어의 중복을 피할 수 있습니다. 두번째는 모델 데이터의 저장과 불러오기를 스토어 없이 할 수 있습니다.
//gives us a reference to the User class var User = Ext.getModel('User'); var ed = new User({ name: 'Ed Spencer', age : 25 }); //we can save Ed directly without having to add him to a Store first because we //configured a RestProxy this will automatically send a POST request to the url /users ed.save({ success: function(ed) { console.log("Saved Ed! His ID is "+ ed.getId()); } }); //load User 123 and do something with it (performs a GET request to /users/123) User.load(123, { success: function(user) { console.log("Loaded user 123: " + user.get('name')); } });
HTML5 의 새로운 기능을 활용하여 몇 가지 새로운 프록시를 도입하였습니다(LocalStoargeProxy, SessionStorageProxy). 이전 브라우저는 새로운 HTML5 API 를 지원하지는 않지만, 많은 애플리케이션들이 그들의 존재로부터 엄청난 혜택을 알고 있기에 유용합니다. 그리고 필요로 하는 프록시가 없는 경우 쉽게 만들 수 있습니다.



연관 (Associations)
프록시는 모델에 새로운 기능을 추가하는 것에 지나지 않습니다. 새로운 Association API 와 함께 모델을 연결할 수 있습니다. 대부분의 애플리케이션은 다양한 모델과 거의 대부분이 모델과 연관된 것으로 다루어 집니다. 블로그 작성 애플리케이션은 사용자(User), 포스트(Post)와 댓글(Comment)을 가지고 있을 것 입니다. 각 사용자는 포스트를 작성하고, 각 포스트는 댓글을 전달받을 것 입니다. 이들의 관계는 아래와 같이 표현할 수 잇습니다.
Ext.regModel('User', { fields: ['id', 'name'], hasMany: 'Posts' }); Ext.regModel('Post', { fields: ['id', 'user_id', 'title', 'body'], belongsTo: 'User', hasMany: 'Comments' }); Ext.regModel('Comment', { fields: ['id', 'post_id', 'name', 'message'], belongsTo: 'Post' });
이것을 통해 애플리케이션에서 다른 모델들 간의 풍부한 관계를 표현하기 쉬워집니다. 각 모델들은 임의의 순서를 정의할 수 있는 모델을 통해 임의의 연관 번호를 가질 수 있습니다. 일단 모델 인스턴스를 갖는다면, 쉽게 연관 데이터를 조회할 수 있습니다. 예를 들어, 특정 사용자의 각 포스트에 만들어진 댓글을 로깅하기를 원한다면 아래처럼 할 수 있습니다.
//loads User with ID 123 using User's Proxy User.load(123, { success: function(user) { console.log("User: " + user.get('name')); user.posts().each(function(post) { console.log("Comments for post: " + post.get('title')); post.comments().each(function(comment) { console.log(comment.get('message')); }); }); } });
각 hasMany 관계는 모델에 추가된 새로운 함수에 의한 결과 위에 만들어집니다. 각 사용자 모델은 hasMany 포스트로 선언되었습니다. user.posts() 호출에 의한 결과 스토어는 포스트 모델에 의해 구성됩니다. 결과적으로 설정된 hasMany 댓글 연관으로 인해 포스트 모델은 comments() 함수에서 댓글들을 가지고 올 수 있습니다.

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



중첩 데이터 로드(Loading Nested Data)
위에서 그랬듯이 연관을 설정함으로써, 프레임워크가 단일 요청에 의해 자동으로 중첩 데이터를 파싱 할 수 있습니다. 단일 서버에 응답으로 이 모든 데이터를 반환할 수 있습니다.
{ id: 1 name: 'Ed', posts: [ { id : 12, title: 'All about data in Ext JS 4', body : 'One of the areas that has seen the most improvement in Ext JS 4...', comments: [ { id: 123, name: 'S Jobs', message: 'One more thing' } ] } ] }
데이터는 프레임워크에 의해 모두 자동으로 파싱됩니다. 대부분 환경에서 데이터를 로드하는 모델에 대한 프록시들을 쉽게 구성할 수 있고, Reader 들은 대부분의 형식을 처리할 수 있습니다. Ext JS 3 과 마찬가지로, 모델과 스토어는 그리드, 트리와 폼과 같은 다양한 구성요소들의 프레임워크에 걸쳐 사용됩니다.


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