서론

Sencha 는 MVC 패턴으로 웹 앱을 개발할 수 있는 자바스크립트 프레임워크이다. MVC 패턴은 개발시 기능에 따라 모듈로 분리할 수 있고, 하는 역활을 체계적으로 분리하기 때문에 작업을 분업하거나 유지보수에 상당한 이점이 있는 소프트웨어 모델이다. 하지만 우리는 MVC 패턴을 먼저 연습하지 않을 것이다. Sencha에서 MVC를 한번에 이해하기는 어렵기 때문이다. 그래서 View, Model, Controller 순으로 각각의 모듈을 나누어서 설명하고 연습하면서 서서히 MVC에 익숙해질 수 있도록 예제를 준비했다. 우리는 Sencha를 자바스크립트 UI 프레임워크라고도 부리기도 하지만 생각보다 Sencha는 더 많은 부분을 구조화하고 UI 뿐만 아니라 로직까지 포함되어 있는 웹 앱 개발 프레임워크라는 것을 알게될 것이다.

서론

Sencha Touch는 아이폰, 안드로이드, 블랙베리 등 다양한 모바일 디바이스의 웹 앱 개발을 지원하는 자바스크립트 프레임워크이다. 자바스크립트 프레임워크라는 말에 촛점을 맞출 필요가 있는 이유는 Sencha Touch는 거의 대부분의 코드를 Javascript로 생성하기 때문이다. Appspresso(앱스프레소)를 이용해서 하이브리드 앱을 개발하는 방법에 대해서 포스팅하는 가운데 UI javascript 프레임워크 선정할때 후보로 Sencha Touch와 JQuery Mobile, JTouch 를 생각했는데 가장 네이티브 앱에 가까운 다양한 UI 제공과 MVC 프로그래밍을 할 수 있게 설계되어 있는 아키텍처 때문에 Sencha를 HTML5 를 이용한 하이브리드 앱 개발의 UI 프레임워크로 결정했다. (HTML5 기반 앱을 만들기위해서 미리 구입한 Sencha Touch 책이 있기 때문이기도 했는데 현재 판매되고 있는 것은 Sencha Touch 1.x 기반의 책들이다. Sencha Touch 2와 Sencha Touch 1은 구조 자체가 달라졌기 때문에 이전 책을 구입하면 조금 당항할 수도 있다. 물론 Sencha 공식 사이트에서 migration 정보를 문서로 제공하고 있지만 처음부터 Sencha Touch 2로 시작하는 것을 추천하고 싶다.) 하이브리드 앱 개발하는 과정에서 UI 프로그래밍은 필수 조건이다. 그래서 Appspresso에 관련된 포스팅에 연결해서 연재하려고 하다가 Sencha 자체만해도 내용이 방대하고 어렵기 때문에 Sencha라는 카테고리로 분리해서 작성하려고 한다. (참고로 jQuery 정로도 생각하면 정말 이해하는데 어려움을 겪을수 있다.)

Sencha는 데크스탑용과 모바일용 프레임워크가 따로 존재한다. 여기서는 Sencha Touch에 대한 포스팅을 진행할 것이다. Sencha Touch 2에 관한 내용만 포스팅할 것이며 Sencha Touch 1에 대한 비교나 문의에 대해서 답변을 할 수 없을지도 모른다. 이 글을 포스팅할 시점에는 Sencha Touch 2가 릴리즈된 상태이고, 하이브리드 앱 개발 연구에 Sencha Touch 2를 도입하기로 결정하고 Sencha Touch 2부터 바로 적용하기 위해서 이전 버전에서 마이그레이션하는 방법에 대해서는 논의하지 않겠다. (다만, Sencha의 공식 웹 사이트에서 http://docs.sencha.com/touch/2-0/#!/guide/upgrade_1_to_2 에서 마이그레이션하는 방법을 문서로 제공하고 있으니 참고하길 바란다.)

Sencha Touch 2의 공식 문서는 http://docs.sencha.com/touch/2-0/ 에서 확인할 수 있다. 현재 Sencha Touch 2에 관한 책이 나오지 않은 관계로 대부분 공식 사이트의 문서를 참조해서 테스트를 진행하려고 한다. 설명의 편의를 우해서 Sencha Touch 2를 Sencha로 표현하겠다.

서론

Appsspresso(앱스프레소)의 WAC를 이용하면 단일 코드로 WAC를 지원하는 디바이스의 Contact(연락처)정보를 가져올 수 있다. 우리는 앞에 포스팅된 deviceapis를 이용하여 WAC의 모든 모듈에 접근 가능하다는 것을 예제를 통해서 실습을 했고, ADE를 이용해서 변수 내부를 확인하는 방법도 실습했었다. 이 포스팅에서는 AddressBook을 찾아서 그 안에 속한 Contacts 연락처 정보를 사용하는 방법에 대해서 실습하기로 한다.

서론

Appspresso로 하이브리드 앱을 만들 때 최고의 강점은 UI 개발을 단일 코드로 진행할 수 있다는 것이 아닌가 생각한다. 그러면 UI가 디바이스 종류와 상관없이 모두 동일해진다는 말이 된다는 이야기인데 우리는 기존 UX를 무시하고 무조건적으로 일방적으로 아이폰의 UX나 안드로이드의 UX를 강요하기 위해서 단일 UI를 만들어버릴 수 있다. 고객은 특정 모델에 따라 다른 UI를 요구할 수도 있다. 또는 UI에서 디바이스의 상태를 확인하기 기능을 넣기 원할 수도 있다. 배터리의 충전 상태나, 디바이스가 가속도 센스를 지원하는지, 또는 디스플레이의 상태에 따라서 다른 UI를 제공하고 싶어할 수도 있을 것이다. WAC의 deviceStatus를 이용하면 이런 문제를 쉽게 해결할 수 있다. 만약 이러한 속성을 Appspresso의 WAC를 사용하지 않는다면 아마도 네이티브 코드로 디바이스의 상태를 확인하고 stub method를 이용해서 javascript와 call by name으로 메세지 전송을 해야할 것이다. 그럼 WAC의 deviceStatus를 이용해서 얼마나 편리하게 디바이스 정보를 얻을 수 있는지 살펴보자. (ADE의 Inspector의 사용법을 알고 있어야하기 때문에 이 방법에 대해서는 Appspresso를 사용하여 하이브리드앱 개발하기 - 11.WAC Devicepai 사용하기 글을 참고한다.)

WAC

WAC (Whole Applications Community) 는 네트워크 사업자, 장치 및 네트워크 장비 제조 업체를 포함한 전세계 통신 회사들로 구성된 오픈 동맹이다. WAC는 단일 크로스 플랫폼 API 연산자에 의해 전달 네트워크 운영자 API를 사용하여 혁신 개발자를위한보다 쉽게 ​​만들기 위해 노력하고 있다. 즉, 다시 말하면 앱스토어나, 안드로이드 마켓과 간튼 벤더에 종속된 마켓의 앱 시장을 가지는 것이 아니라 전체적으로 사용할 수 있는 커뮤니티(마켓)을 만들기 위한 모임이다. 이러한 WAC 에서 단일 코드로 크로스 플랫폼을 지원하는 방법 (api)을 연구하고 spec을 만들어가고 있는데, WAC를 지원하는 디바이스는 앞으로 개발할 때 각기 다른 언어로 개발하고 다른 방법으로 개발하는 것이 아니라 WAC spec에서 제공하는 api를 이용해서 개발을 할 수 있게 되는 것이다. Appspresso(앱스프레소)에서는 WAC 2.0을 지원하고 있다. 이 포스팅에서는 Appspresso(앱스프레소)에서 WAC를 사용하는 방법에 대해서 간단한 예제로 알아 보기로 한다. (앞에서 우리는 1~10 까지의 Appspresso(앱스프레소)로 아이폰 안드로이드 앱을 동시에 개발하는 방법을 살펴보았다. 이 과정에서는 프로젝트 생성, 빌드, 디버깅 과정이 포함되어 있다. 앞으로 11번째 이후 부터는 프로젝트 생성에 대한 방법에 대해선 따로 설명하지 않을 것인데 이전 글들을 참조하기 바란다.)