오늘날 웹은 비약적인 발전을 이뤄, 이전에는 할 수 없었던 많은 일들이 웹상에서 가능하게 됐다. 웹의 패러다임이 변한만큼 기술도 서버에서 클라이언트로 중심이 이동했다. 이 정에서 자바스크립트 UI 프레임워크가 대세로 자리 잡은 게 현실이지만, 코드는 복잡해지고 유지보수와 확장성의 한계를 드러내게 됐다. 그런 점에서 개발 단계에만 초점이 맞춰진 여타 프레임워크에 비해 ExtJS는 유지보수와 향후 확장이 용이한 MVC 아키텍처를 제공하고 있다.
이번 시간에는 ExtJS의 MVC 패턴을 구현해 보고, MVC 패턴을 실무에서 어떻게 활용할 수 있는지 알아보자. 우선 ExtJS에서 사용하는 MVC 패턴을 살펴보겠다.
M : 모델(Model)을 지칭한다. ExtJS에서는 데이터를 표현하는 단위가 모델이다. 스토어(Store)가 필요로 하는 Grid, DataView, Form 등의 컴포넌트와 연결될 수 있다.
V : 뷰(View)는 데이터를 표현할 수 있는 모든 컴포넌트를 지칭한다. 모델을 통해 뷰는 데이터를 전달받아 이를 표현한다.
C : 컨트롤러(Controller) 뷰 사이에서의 통신을 처리한다. 컨트롤러는 뷰와 스토어를 참조할 수 있고, 자신이 관장하는 모든 뷰에서 발생하는 이벤트를 감시하며, 각 뷰에게 특정 처리에 대한 명령을 내리는 핵심적인 역할을 한다.
우리는 한 가지 내용을 더 알아야 한다. 바로 스토어다. 스토어는 모델들의 집합체로, 서버에서 통신 데이터를 가져오고, 이 데이터를 모델단위로 탑재해 Grid, DataView, Tree 등과 같은 컴포넌트에 전달한다.
이제 코드를 통해 MVC 패턴을 구현해 보자. ExtJS는 Sencha Cmd에서 애플리케이션을 생성하고 빌드할 수 있도록 지원한다.
개발환경 구축
개발환경 구축을 위해 Sencha Cmd와 ExtJS를 다운로드 받아 설치하고 환경을 세팅해보도록 하겠다.
아래 <그림 0-0>과 같이 Sencha사이트에 접속하여 좌측의 "Download"를 클릭하여 ExtJS를 다운받고 우측 하단의 "Sencha Cmd"를 클릭하면 <그림 0-1>과 같이 Sencha Cmd를 다운받는다.
<그림 0-0> extjs와 Sencha Cmd 다운로드 페이지
<그림 0-1> Sencha Cmd다운로드 페이지
이제 다운로드 받은 프로그램을 설치 하도록 하자. 참고로 자바가 먼저 설치되어 있어야 한다.
첫번째는 Sencha Cmd 설치파일을 실행하고 아래 <그림 0-2>에서 "Next"버튼을 클릭한다.
<그림 0-2> Sencha Cmd설치 화면1
아래 <그림 0-3>에서 "I accept the agreement"에 체크하고 "Next"버튼을 클릭하자.
<그림 0-3> Sencha Cmd설치 화면2
아래 <그림 0-4>에서 설치 폴더를 설정하고 "Next"버튼을 클릭한다.
<그림 0-4> Sencha Cmd설치 화면3
이후 계속 "Next"버튼을 클릭하면 설치과정이 진행되고 최종 "Finish"버튼을 클릭하면 Sencha Cmd 설치가 완료된다.
설치가 정상적인지 확인하기 위해 명령프롬프트 창을 열고 "sencha"명령을 실행해서 아래<그림 0-5>와 같이 나오면 설치가 잘 된것이다.
<그림 0-5> Sencha Cmd설치 확인화면
이 과정을 거쳤다면 C드라이브에 Sencha라는 폴더가 생성되었고 안으로 들어가면 Cmd폴더에 Sencha Cmd가 설치 되었을 것이다. 이제 다운로드한 Extjs4 라이브러리를 압축을 해제하고 C:\Sencha폴더 아래에 옮기도록 한다.
<그림 0-6> 설치 이후 폴더구조
이제 테마컴파일을 위해 루비를 설치하자. 아래 사이트에 접속하여 루비 Ruby 1.9.3-p448를 내려받고 설치하자.
http://rubyinstaller.org/downloads/
Sencha Cmd에서는 1.8또는 1.9버전만 지원한다. 꼭 1.9버전을 설치하자.
다음으로는 <그림 0-7>과 같이 빌드 과정에서 테마를 위한 sass컴파일용 compass를 설치하자.
<그림 0-7> compass 설치과정
혹여 윈도우 7에 경우 정상적으로 설치 되지 않는 경우가 있는데 이때는 아래 사이트를 참고하여 수동으로 compass를 설치할 수 있다.
http://awordpress.net/install-sass-compass-manually-windows/
애플리케이션 생성
아래 명령을 실행하여 MyMvc라는 애플리케이션을 생성하자.
sencha -sdk C:\Sencha\ext-4.2.1.883 generate app MyMvc c:\Sencha\MyMvc
<그림 1> Sencha Cmd로 생성한 애플리케이션 폴더 구조
Sencha Cmd을 통해 생성된 애플리케이션의 주요 코드를 살펴보자. <리스트 1>은 app.js와 application.js의 코드다. 이 두 개의 파일에는 애플리케이션의 주요 설정이 들어있다. ①은 만들려는 애플리케이션 이름이다. 보통 패키지 명의 최상위 이름을 사용한다. ②에서는 application.js의 클래스를 상속했다. ③은 Viewport 객체를 자동으로 생성할 것인지를 설정하는 부분이다. 이때 값이 true이면 view 폴더의 Viewport 클래스를 자동으로 호출할 수 있다. ⑥은 ③이 false일 경우 이 함수 내부에서 Viewport를 별도로 생성하면 사용할 수 있다.
<리스트 1> app.js와 application.js 내부 코드
// app.js
Ext.application({
name: 'MvcApp', // ① 애플리케이션 명
extend: 'MvcApp.Application', // ② application.js를 상속했다.
autoCreateViewport: true // ③ view.Viewport의 인스턴스 생성
});
// application.js
Ext.define('MvcApp.Application', {
name: 'MvcApp',
extend: 'Ext.app.Application', // ④ 애플리케이션 실행 이후 처리
controllers: [
'FrameController' // ⑤ 사용할 컨트롤러
],
launch:function(){ // ⑥ 애플리케이션 실행 이후 처리
}
});
<리스트 1>에서 autoCreateViewport를 true로 설정해 view 폴더에 Viewport.js 파일을 만들어 구현해야 한다. <리스트 2>와 같이 border layout을 사용해 서쪽, 북쪽, 중간에 container를 배치한다.
<리스트 2> Viewport.js 파일 코드
Ext.define('MvcApp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout : 'border',
items: [{
region: 'north',
xtype: 'container',
height : 100,
style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }
}, {
region: 'center',
xtype: 'container',
style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }
}, {
region: 'west',
xtype : 'container',
style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' },
width: 200
}]
});
이제 애플리케이션을 실행해 보자. <리스트 3>과 같이 Sencha Cmd에서 제공되는 웹서버를 작동시킨다.
<리스트 3> 애플리케이션 실행 코드
C:\Sencha>sencha fs web -port 8000 start -map c:\Sencha\MvcApp
Sencha Cmd v4.0.0.126
[INF] Starting shutdown listener socket
[INF] Listening for stop requests on: 1916
[INF] Mapping http://localhost:8080/ to c:\Sencha\MvcApp...
[INF] Starting http://localhost:8080
[INF] jetty-8.1.7.v20120910
[INF] NO JSP Support for /, did not find org.apache.jasper.servlet.JspServlet
[INF] started o.e.j.w.WebAppContext{/,file:/C:/Sencha/MvcApp/}
[INF] started o.e.j.w.WebAppContext{/,file:/C:/Sencha/MvcApp/}
[INF] Started SelectChannelConnector@0.0.0.0:8080
[INF] Started http://localhost:8080
브라우저에서 실행하면 <그림 2>와 같은 결과를 볼 수 있다.
<그림 2> index.html 실행 결과
그 다음 컨트롤러를 구현하자. controller 폴더에 FrameController.js 파일을 만들고 <리스트 4>와 같이 작성한다.
<리스트 4> FrameController.js 코드
Ext.define(' MvcApp.controller.FrameController', {
extend : 'Ext.app.Controller',
views : [], // ① 참조할 뷰
stores : [], // ② 참조할 스토어
refs : [], // ③ 참조할 뷰 getter 설정
init : function(app) { // ④ 초기화
this.control({ // ⑤ 현재 컨트롤러 영역
'button' : { // ⑥ 이벤트를 일으킨 컴포넌트
click : function(){ // ⑦ 이벤트
console.log(arguments);
}
}
});
}
});
<리스트 4>를 자세히 살펴보자. ①에서는 컨트롤러가 참조할 View 클래스를 명시한다. 여기에 명시되면 각 뷰에서 발생하는 이벤트를 감지할 수 있다. ②에서는 애플리케이션에서 공유할 스토어를 명시했다. 단, 공유하지 않고 독립적으로 사용하는 스토어는 기입하지 않으며 각각의 View 클래스별로 따로 생성해야 문제가 없다.
③에는 참조된 View 클래스를 어떤 이름으로 사용할지 기입한다. 이 부분은 뒤에서 설명하겠다. ④는 컨트롤러의 핵심으로, 참조하는 모든 View 클래스에서 발생하는 이벤트를 감지하는 영역이다. ⑥과 ⑦은 Viewport의 Button에서 Click 이벤트가 발생하면 console.log를 실행하는 코드다.
이제 <리스트 4>가 작동되도록 <리스트 1>코드에 있는 ③ 'FrameController' 주석을 제거하고 <리스트 2>에서의 north 영역 코드를 <리스트 5>와 같이 수정하자.
<리스트 5> Viewport.js의 north 영역 코드
Ext.define(' MvcApp.view.Viewport', {
..
items: [{
region: 'north',
xtype: 'button',
text : 'Button',
height : 100,
style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }
},
..
코드를 실행하고 north 영역의 버튼을 선택하면 <그림 3>과 같은 결과를 얻을 수 있다. <그림 3>과 같이 선택된 버튼 이벤트를 컨트롤러가 감지해야 원하는 명령을 내릴 수 있다.
<그림 3> 버튼 추가 후 실행화면
이제 좀더 복잡한 코드를 만들어 보자. <그림 4>에서 빈 칸으로 남겨둔 views, stores, ref를 구현하겠다. 아직 비어있는 Viewport의 중간 패널에 간단한 그리드 패널을 추가하고 Click 이벤트를 가지고 특정 함수를 호출한다. <리스트 6>, <리스트 7>, <리스트 8>, <리스트 9>와 같이 클래스를 생성하고 각 폴더에 추가하자.
<리스트 6> Program Model 클래스
// app/model/Program.js
Ext.define(' MvcApp.model.Program', {
extend: 'Ext.data.Model',
fields: [
'pgm_nm',
'pgm_class'
]
});
<리스트 7> Program Store 클래스
// app/store/Programs.js
Ext.define(' MvcApp.store.Programs', {
extend : 'Ext.data.Store',
autoLoad : false,
model : ' MvcApp.model.Program',
proxy : {
type : 'ajax',
url : '/json/programlist.json',
reader : {
type : 'json',
root : 'entitys',
totalProperty : 'totalCount',
messageProperty : 'message'
}
}
});
<리스트 8> 스토어에 제공할 데이터 파일
// 웹루트에 json 폴더를 만들고 programlist.json 파일을 생성한다.
{"entitys":[{ "pgm_class":"benney.board.Board","pgm_nm":"게시판"},
{ "pgm_class":"benney.login.Login","pgm_nm":"로그인"}],
"errMsg":"","errTitle":"검색결과","message":"","success":true,"totalCount":"2"
}
<리스트 9> 새로 추가할 그리드 클래스
Ext.define(' MvcApp.view.MyGrid',{
extend : 'Ext.grid.Panel',
alias : 'widget.mygrid',
initComponent : function(){
var me = this;
Ext.apply(this, {
store : 'Programs',
columns : [{
text : '클래스 이름 ',
flex : 1,
dataIndex : 'pgm_class'
},{
text : '프로그램명 ',
flex : 1,
dataIndex : 'pgm_nm'
}]
});
me.callParent(arguments);
}
});
이때 컨트롤러에서 <리스트 9>의 MyGrid 클래스와 Programs Store 클래스를 참조할 수 있게 코드를 수정한다.
<리스트 10> 변경된 컨트롤러 클래스
Ext.define(' MvcApp.controller.FrameController', {
..중략..
views : ['MyGrid'], // ① 참조할 뷰
stores : ['Programs'], // ② 참조할 스토어
refs : [{
ref : 'myGrid',
selector : 'mygrid'
}], // ③ 참조할 뷰의 getter 설정
..
});
그리고 Viewport 클래스의 center 영역에 MyGrid 클래스의 widget명을 추가한다(<리스트 11> 참조).
<리스트 11> Viewport 클래스 center 영역 수정
{
region: 'center',
xtype: 'mygrid',
style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }
},
이제 브라우저를 재실행해 결과를 확인한다(<그림 4> 참조).
<그림 4> MyGrid 클래스를 추가한 결과
컨트롤러에 있는 views:[] 부분에 MyGrid 클래스를 등록해 Viewport 클래스에 있는 widget명인 'mygrid'로 사용할 수 있다. 만약 컨트롤러에 등록된 코드를 지우면 프로그램은 정상으로 작동하지 않는다.
그 다음 Viewport 상단 버튼을 선택해 하단 그리드에 있는 데이터가 표시되게 하고, 표시된 그리드를 선택하면 그리드 패널의 타이틀이 세팅되도록 <리스트 12>와 같이 수정하자.
<리스트 12> 수정된 FrameController 컨트롤러
Ext.define(' MvcApp.controller.FrameController', {
..
init : function(app) { // ④ 초기화
this.control({ // ⑤ 현재 컨트롤러 영역
'button' : { // ⑥ 이벤트를 일으킨 컴포넌트
click : function(){ // ⑦ 이벤트
this.getStore('Programs').load();// ⑧
}
},
'mygrid' : { // ⑨
itemclick : this.myGridClick // ⑩
}
});
},
myGridClick : function(){
var grid = this.getMyGrid(); // ⑪
grid.setTitle('그리드 클릭');
}
});
<리스트 12>를 자세히 설명하겠다. ⑥에 있는 이벤트를 발생시킨 컴포넌트로 인해 버튼에서 ⑦에서는 Click 이벤트가 발생했고, 그 결과 ⑧을 실행시킨다. ⑧에 있는 this.getStore() 메소드는 컨트롤러 상단 stores:[]에 등록된 스토어를 호출하게 해주고, 스토어의 load() 메소드가 호출됨으로써 그리드에 데이터가 출력된다.
⑨와 ⑩에서 그리드에 표시된 데이터 로우를 클릭하면 myGridClick 함수가 호출된다. 그리고 ⑪의 this.getMyGrid() 함수는 컨트롤러 상단의 ref 참조란에 표기된 ref:'myGrid'의 getter 메소드다. 또 this.getMyGrid() 함수를 통해 MyGrid 클래스의 인스턴스에 접근해 setTitle 메소드로 그리드 패널의 title 속성을 변경한 것이다.
변경된 코드를 실행하면 <그림 5>와 같은 결과를 얻을 수 있다.
<그림 5> 수정된 컨트롤러의 실행결과
이렇게 해서 하나의 MVC 애플리케이션을 완성했다. 이제 Sencha Cmd를 통해 배포과정을 진행해 보자. 애플리케이션 폴더로 이동해 <리스트 13>과 같이 빌드 과정을 진행한다.
<리스트 13> 애플리케이션 배포 코드
C:\Sencha\MvcApp>sencha app build
Sencha Cmd v4.0.0.126
[INF]
[INF] init-plugin:
[INF]
[INF] cmd-root-plugin.init-properties:
[INF]
[INF] init-properties:
… 중략…
[INF] -after-build:
[INF]
[INF] build:
[INF]
[INF] app-build:
빌드가 완료됐으니 최종 배포할 애플리케이션과 개발 단계의 애플리케이션이 어떻게 다른지 알아보자. <그림 6>은 빌드 전 캐시를 모두 지운 상태에서 최초로 실행한 결과이고, <그림 7>은 캐시를 이용 두 번째 실행한 결과를 개발자 도구에 있는 Network 탭에서 확인한 결과다.
<그림 6> 개발 버전의 최초 실행결과
<그림 7> 개발 버전의 두 번째 실행결과
이제 빌드를 완료한 배포판 애플리케이션을 실행하고 <그림 6>과 <그림 7>과 동일하게 <그림 8>과 <그림 9>처럼 확인하자. Sencha Cmd는 웹루트/build/MvcApp 이하에 애플리케이션을 빌드하므로 이를 브라우저에서 실행하면 된다.
<그림 8> 배포판의 최초 실행결과
<그림 9> 배포판의 두 번째 실행결과
<그림 6>부터 <그림 9>까지의 결과를 정리한 것이 <표 1>이다.
|
개발 버전 |
배포 버전 |
||
캐시 Ⅹ |
캐시 ○ |
캐시 Ⅹ |
캐시 ○ |
|
요청 파일 수 |
13개 |
13개 |
4개 |
3개 |
전송용량 |
6.8MB |
4.5KB |
2.2MB |
542Byte |
실행시간 |
894ms |
503ms |
626ms |
68ms |
<표 1> 개발 버전과 배포 버전의 네트워크 사용량 비교
<표 1>에서 캐시를 사용한 결과를 비교하자. Sencha Cmd는 빌드 시 사용되는 모든 클래스를 하나의 파일 합치고 공백과 변수 등을 1Byte로 줄여 전반적인 배포 용량을 줄였다. 이를 통해 실행시간 또한 대폭 줄어 든 것을 확인 수 있다. 이는 애플리케이션 규모가 커질수록 이런 빌드 과정이 절대적으로 필요함을 느끼게 해주는 부분이다.
정리하며
지금까지 ExtJS의 MVC 애플리케이션을 구현하고 Sencha Cmd를 통해 애플리케이션을 배포하는 과정을 알아봤다. 이후 진행될 연재에서는 지금까지 살펴본 것들을 가지고 게시판을 개발하면서 좀더 구체적인 ExtJS의 코드를 알아보겠다.
'자바스크립트 > Ext JS' 카테고리의 다른 글
| [ExtJS4 MVC 실전강좌] 멀티게시판 애플리케이션 구현(1) (1) | 2013.11.20 |
|---|---|
| [ExtJS4 MVC 실전 강좌] 시스템 뼈대 구현하기 (14) | 2013.10.13 |
| [ExtJS4 MVC 실전 강좌] ExtJS4 클래스 시스템 둘러보기 (4) | 2013.10.13 |
| Dynamic 하게 Loading되는 ExtJS Controller클래스의 빌드 포함 시키기. (0) | 2013.09.17 |
| ExtJS로 사이트를 만들고 있습니다. (2) | 2013.07.03 |
section2.zip
