센차터치 1.x에서 2.x로 업그레이드

한국센차유저그룹 번역팀

번역 : 정건우 [Gunwooj@me.com]

교정 : 윤가희 [a5312559@facebook.com]

원문 : http://docs.sencha.com/touch/2-0/#!/guide/upgrade_1_to_2

센차터치2 프레임 워크는 전보다 많이 개선되었다. 이러한 변화는 응용 프로그램의 코드 일부를 업데이트 하도록 요구한다. - 이 가이드는 업데이트를 위해 필요한 내용을 담고 있다.

기이드 외에도 보다 쉽게 센차터치2 이전 프로세스가 하위 호환성 빌드와 함께 제공된다. 이 빌드가 1.0 앱의 지속적인 외부 동작을 보장할 수 없음을 주의해야 한다. 호환성 빌드는 1.0 앱 코드가 2.0 API 로 통하는 경로를 가능한 한 연결하려 노력한다. 배치된 빌드가 경고를 콘솔에 기록하며 업데이트가 언제 필요한지 말해준다.

하위 호환성 지원은 센차터치 2 PR4 기준으로 베타 1 부터의 모든 빌드를 완성하고 있으며, 호환성을 그대로 유지하기 위해 앱을 이전하면서 빌드를 다르게 사용한다. 단계에 따라서 그때마다 호환 레이어로 센차터치 2.x를 실행한 다음, 응용 프로그램의 결과에 대해 알려주어 경고를 해결한다.

센차터치 1.x에서 2.x로 업그레이드 비디오 보기

클래스 시스템

앱을 이전해 오게되면, 많은 변화로 인해 클래스가 정의된 방식에 대한 확인이 필요 하다. 센차터치2는 EXT 4 로부터의 업그래이드된 클래스 시스템, mixins와 같이 새롭고 강력한 기능을 제공하는, 동적로딩 및 config 시스템을 사용한다.

센차터치1에선, 2가지 방법으로 클래스 정의를 하였다 - Ext.extend이나 regModel 및 regController 같은 MVC 고유의 편리한 기능 중 하나를 사용한다. 센차터치2 에서는, 모든 클래스는 Ext.define을 사용하는 것과 동일한 방식으로 정의된다. 다음은 클래스 1.x에서 2.x로 이전하는 방법이다:


Geo.views.BillSummary = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: "Loading...",
styleHtmlContent: true,
initComponent: function() {
this.tpl = Ext.XTemplate.from('billsummary');
Geo.views.BillSummary.superclass.initComponent.call(this);
},

/**
* billSummary를 가져와 패널의 내용을 업데이트 한다.
*/
getBill: function(bill) {
Geo.CongressService.getBillSummary({
bill: bill
}, this.onBillSummaryResponse, this);
},

// private
onBillSummaryResponse: function(billSummary) {
if (Ext.isArray(billSummary.Paragraph)) {
this.update(billSummary);
} else {
this.update('No Bill Summary Available');
}

}
});

2.x에선, 이렇게 대신 작성한다.


Ext.define('Geo.view.BillSummary', {
extend: 'Ext.Panel',

config: {
scroll: 'vertical',
html: 'Loading...',
styleHtmlContent: true
},

initialize: function() {
this.callParent(arguments);

this.tpl = Ext.Template.from('billsummary');
},

/**
* billSummary를 가져와 패널의 내용을 업데이트 한다.
*/
getBill: function(bill) {
Geo.CongressService.getBillSummary({
bill: bill
}, this.onBillSummaryResponse, this);
},

// private
onBillSummaryResponse: function(billSummary) {
if (Ext.isArray(billSummary.Paragraph)) {
this.setHtml(billSummary);
} else {
this.setHtml('No Bill Summary Available');
}
}
});

첫번째로 주의할 부분은 Ext.define을 위해 Ext.extend를 바꾼 적이 있다는 것이다. 여전히 예전 구성 부분이 모두 존재한다, 다만 새로운 문법을 여기저기 섞어 사용 하였다. 2.x에서 클래스 이름 모두가 문자열을 기반으로 하는 것을 확인할 수 있다. 그때까지 해당 클래스가 존재하지 않을 경우 페이지에 자동으로 로드 되도록 동적 로딩 시스템을 활성화 시킨다. 자세한 내용은 클래스 시스템 가이드를 참조.

그 다음은 설정 객체로 환경설정 옵션을 모두 이동 하는 것이다. 각 클래스에 대한 구성 옵션은 클래스 설명서에서 찾을 수 있다. 정의할 때 클래스의 구성 섹션에 있는 것은 클래스의 구성 개체에 배치해야 한다.

구성 시스템은 몇 가지 주요 이점을 제공, 주로 API의 일관성을 보장한다. 예를들어, html 구성옵션은 언제나 getHtmlsetHtml를 호출할 수 있도록 보장하며, 어림잡아서 호출로 어느 함수인지 알아낸 뒤 제외한다. 모든 단일 구성 옵션은 getHtml과 setHtml 같은 패턴을 따르는 getter 및 setter 함수를 가진다. onBillSummaryResponse 함수에서 편의를 위해 사용하여, 그때 비워진 setHtml 함수와 예전 '업데이트'함수를 대체한다.

마지막으로, 초기화와 함께 initComponent를 교체 하였다. 1.x에서, initComponent은 컴포넌트 클래스에서만 가능하였다, 이것은 모델, 컨트롤러 및 유틸리티와 같은 다른 클래스는 모두 제외된다. 2.x에서 각 클래스는 어떤 로직이 인스턴스에서 수행하기를 원하는 경우 구현할 수 있는 초기화 기능을 가지고 있다. 여기서 주의해야 할 다른 세부사항은 더 이상 불필요 하다는 점이다. Geo.views.BillSummary.superclass.initComponent.call(this); - 슈퍼함수 호출로 대신 언제든지 this.callParent(arguments)를 호출할 수 있다.

MVC 이전

센차터치2의 MVC 아키텍처는 센차터치1 부터 접근하여 개선한 것이다. 개념의 대부분은 동일하지만 구문을 더 표현할 수 있도록 일부 API를 개선하고, 코드를 읽고 테스트할 수 있게 되었다.

모델

센차터치2에선 다른클래스를 함께 쓸 수 있고, 모델 및 데이터 패키지의 나머지 환경설정은 설정 블록에 배치 될 예정이다. 센차터치2는 또한 모든 응용 프로그램의 클래스를 정의하는 방법을 통합하였다: Ext.regModel은 더이상 필요하지 않다 - 대신 모델은 다른 클래스처럼 defined된다. 모델을 이전하는 것은 매우 간단하다 - 아래와 같은 모델을 가졌다:


Ext.regModel('MyApp.model.User', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'alive', type: 'boolean', defaultValue: true}
],

validations: [
{type: 'presence', field: 'age'},
{type: 'length', field: 'name', min: 2}
],

sayName: function() {
alert(this.get('name'));
}
});

센차터치 2에선 아래와 비슷하게 보일 것이다:


Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',

config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'alive', type: 'boolean', defaultValue: true}
],

validations: [
{type: 'presence', field: 'age'},
{type: 'length', field: 'name', min: 2}
] },

sayName: function() {
alert(this.get('name'));
}
});

모델은 일반적으로 4단계로 이전 된다:

  1. Ext.regModelExt.define 교체
  2. 새 모델 클래스 Ext.regModel를 확장했는지 확인
  3. 그 구성 블록으로 모델의 구성을 모두 이동
  4. 구성 블록 외부의 사용자 정의 함수는 (위의 sayName 등) 남겨둔다

이외에도 새 클래스 시스템 문법 이전에서 뷰 이전은 아주 간단하다. 주의해야 할 중요한 것은 뷰 클래스 주위의 이름 규칙이다. 센차터치 2 이후에서는 여러분의 뷰 클래스 이름 패턴 MyApp.view.SomeViewName으로 수행하는 것이 좋다. '보기'가 단수형임을주의 - 이것은 자동으로 파일을 응용 프로그램 /보기 / SomeViewName.js에서 뷰 클래스를 로드하는 클래스 시스템을 가능하게 한다.

응용프로그램

Ext.application 정의로 오면, 1.x 응용 프로그램 에서의 문법을 대부분 유지할 수 있다:


Ext.application({
name: 'MyApp',

icon: 'resources/images/logo.png',

launch: function() {
Ext.create('MyApp.view.Main');
}
});

여기서 새로운 부분은, MyApp.view.Main의 인스턴스로 Ext.create를 사용하고 있다는 것이다, 이것은 앱의 기본 화면이다.

변경사항 외에 모델, 뷰, 컨트롤러 및 저장된 애플리케이션 요구 사항을 읽어 오게 하여 접근 방법이 가볍게 변화하였다. 1.x에서 당신의 모델, 뷰 및 점포의 * 일부 *와 함께 Ext.application 블록 안에 컨트롤러를 모두 정의하는 것이 일반적 이었다. 종속적으로 나머지는 응용 프로그램 곳곳에 퍼져있다 던가, 어렵게 응용 프로그램이 구성되어 정확하고 쉽게 이해하기 위해 만든다.

센차터치2에서 컨트롤러 내부에 그 중 일부를 삽입하는 대신 Ext.application 블록 내부의 응용 프로그램의 종속성을 모두 정의하는 것이 좋다. 예제는 다음과 같다:


Ext.application({
name: 'MyApp',

icon: 'resources/images/logo.png',

models: ['User', 'Group'],
controllers: ['Users', 'Login'],
views: ['Main', 'Users'],
stores: ['Users'],

launch: function() {
Ext.create('MyApp.view.Main');
}
});

컨트롤러

모델과 마찬가지로 센차터치 2 컨트롤러가 다른 클래스 처럼 정의된 것으로 예상, Ext.regController 기능이 중지되도록, 1.x에서 이러한 컨트롤러를 가지고 있다:


Ext.regController("searches", {
showSomething: function() {
alert('something');
}
});

2.x쪽에선 이렇게 된다:


Ext.define('MyApp.controller.Searches', {
config: {
routes: {
'search/:query': 'doSearch'
}
},

doSearch: function(query) {
alert('searching for ' + query);
}
});

마찬가지로 앞서 언급한, 1.x에서 컨트롤러가 추가 모델, 뷰 또는 저장 종속성으로 정의하는 경우 하는 대신 응용 프로그램으로 이들을 이동해야 한다.

Routes

센차터치 1.x의 컨트롤러는 종종 외부로 내보낼 수 있는 기능을 수집 하였다. 대개 이것은 응용 프로그램이 Ext.dispatch를 호출한다는 의미이다, 컨트롤러 이름을 지정, 함수에 인자를 전달하고 함수를 호출한다. 때로는 자동으로 내보낸다, routes에서 포착된 url의 변화에서 계기가 된다.

컨트롤러는 2.x에서 훨씬 더 주도적으로 config 블록 안에 관심을 가지는 routes 등록을 활성화 한다:


Ext.define('MyApp.controller.Searches', {
config: {
routes: {
'search/:query': 'doSearch'
}
},

doSearch: function(query) {
alert('searching for ' + query);
}
});

컨트롤러가 페이지 URL과 일치할 때마다 별도의 routes 파일을 필요로 하지 않고도 'search/:query'를 나타낼 수 있으며, doSearch 기능이 query와 함께 호출된다. 예를 들어, 페이지 URL은 현재 http://myapp.com/#searches/abc123인 경우 doSearch는 ‘abc123’으로 호출 된다. 페이지 URL이 나중에 오게되는 경우 #serchs/sencha’, ‘doSearch’는 ‘sencha’로 다시 호출된다.

새로운 기능

센차터치2 에서 다수의 새로운 기능의 컨트롤러를 익혔으며, 가장 강력한 참조들 및 컨트롤이다. 더 자세한 정보는 컨트롤러 가이드를 확인.

자세한 도움말

일단, 이 가이드를 기반으로 더 이상 콘솔 경고가 없도록 업데이트할 수 있는 코드를 모두 이전 하였다, 앱은 대부분 기능적이어야 한다. 특정 문제에 대한 도움말을 얻을 수 있는 가장 좋은 장소는 센차터치2 포럼을 참조한다.