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

[Ext JS4 파헤치기 #2 MVC패턴 이해하기]

규모가 큰 클라이언트 어플리케이션은 구현을 하면 할수록 복잡해지고 추가 구현이나 수정 및 보수작업이 어려워집니다. 그렇기 때문에 Ext JS 4의 어플리케이션 구조는 MVC와 유사한 패턴을 따릅니다. 이는 앞선 유지보수와 관련된 문제들을 해결할 수 있으며, 구조화를 통해 코드 이해도를 상승시키며, 버그 발생시 쉽게 찾아내고 제거할 수 있도록 도와줄 수 있습니다.

 

1. Ext JS 4 프로젝트 생성하기

먼저 Ext JS 4 어플리케이션의 구조를 한번 살펴보겠습니다. 구조를 직접 어플리케이션을 만들어 보면서 알아보도록 하겠습니다.

(1) Ext JS 4와 Sencha Cmd를 설치합니다.

- Ext JS 4 (http://www.sencha.com/products/extjs/download/ext-js-4.2.1/2281)

- Sencha Cmd (http://www.sencha.com/products/sencha-cmd/download/)

모든 설치가 완료되면, 명령 프롬프트를 실행시킵니다. sencha 명령을 입력하여 아래와 같은 결과가 나온다면 제대로 설치된 것입니다.

 

[명령 프롬프트 > sencha 명령 실행 결과]

 

(2) 다운받은 Ext JS의 압축을 풀고 Sencha cmd가 설치된 디렉토리로 이동시킵니다.

[sencha 디렉토리]

 

(3) 명령 프롬프트에서 sencha 명령어를 입력하여 프로젝트를 생성합니다.

>> sencha –sdk [Ext JS 4 디렉토리 경로] generate app [프로젝트 명] [프로젝트 생성할 디렉토리 경로]

 

[ExtJS 프로젝트 생성]

 

Sencha 명령어를 실행하면 아래 구조를 가지는 프로젝트가 생성됩니다. 만들어지 프로젝트의 디렉토리 구조는 아래와 같습니다. app 디렉토리 밑에 controller, model, view 디렉토리가 존재하는 구조입니다. 그 외 app.js, application.js, index.html과 같은 주요 구성요소에 대해 알아보겠습니다.

 

[ExtJS 프로젝트 디렉토리 구조]

[참조 - Benny Blog (http://benney.tistory.com/entry/XFile-1)]

  

 

2. Ext JS 4의 MVC패턴과 구성요소

그럼 Ext JS 4의 MVC과 주요 구성요소에 대해 알아보겠습니다.

[Model]

모델은 데이터를 구성하는 field들의 모음입니다. Ext JS 4의 MVC 패턴에는 실제 데이터모음의 Store라는 개념이 있는데, 이 Store 각 요소 하나하나가 어떻게 구성되어 있는지를 정의하는 개념이라고 생각하시면 됩니다.

[View]

Ext JS에서 어플리케이션 UI를 구성하는 컴포넌트를 칭합니다. Grid, tree, graph, panel 같은 것들이 View가 될 수 있습니다. 데이터가 필요한 view의 경우, 모델과 store를 통해 데이터를 받아 화면에 보여줍니다.

[Controller]

실제 어플리케이션이 수행할 일을 처리하는 역할을 합니다. Store를 조작하거나 View를 생성할 수 있으며, 이러한 컴포넌트들을 접근 및 제어 할 수 있습니다.

[Store]

View에 표현할 데이터 덩어리를 의미합니다. View에 따라 store의 구성은 다르며, Store를 구성하기 위해서는 model이 필요합니다. Proxy를 통해 데이터를 불러오며, sorting, filtering 등의 기능을 제공하기도 합니다.

  

그 외 중요한 javascript 파일에 대해 알아보겠습니다.

 

[index.html]

     웹에서 가장 먼저 실행되는 파일입니다. 

[index.html source]

  위 그림과 같이 index.html에서 Ext JS를 사용에 필요한 css파일과 js파일을 불러옵니다. 또한 app.js를 불러옴으로써 ExtJS의 application 인스턴스를 생성합니다.

  

[app.js]

         어플리케이션을 가리키는 application 인스턴스를 생성하는 코드입니다. 구현할 어플리케이션의 전역세팅을 포함하고 ‘Test.application’을 상속받아 이 페이지에 포함되는 모든 models, views, controllers, stores 코드를 불러옵니다. ‘Test.application’은 app/application.js에 정의합니다.

[app.js source]

 

[Application.js]

         app.js이 상속받은 ‘Test.Applcation’를 정의합니다. ‘Ext.app.Application’을 상속받고 페이지를 구성하는데 필요한 models, views, controllers, stores 코드를 불러옵니다.

[application.js source]

 

다음시간에는 MVC 모델로 간단한 컴포넌트를 구현해보겠습니다.