서론

“Appspresso (앱스프레소)를 이용하여 iPhone과 Android 앱 동시에 개발하기”에 관련된 포스트 중에 “네이티브 앱을 하이브리드 앱으로 전환” 에 관련된 글에서 살펴보면 이벤트 핸들링 부터 MVC 까지 대부분 Sencha를 이용하고 있다. 실제 Sencha로 하이브리드 앱을 만들 수 있다.(단, 네이티브 코드를 사용하는 것이 아니라 개발은 웹 기술로 개발하고 앱을 스토어에 등록하기 위해서 packaging 작업을 할 때 물리적으로 웹이 아닌 네이티브 앱으로 만들어진다는 점에서, 네이티브 코드까지 개발하고 사용할 수 있는 Appspresso의 하이브리드의 개념과 다르다.). 그래서 자칫 Appspresso의 기능은 단지 HTML5와 Javascript 기반의 Sencha와 같은 UI를 개발하는 IDE로 생각할 수도 있다. 하지만 그렇게 생각하면 안된다.

하이브리드 앱은 단순하게 웹 개발 기술로 웹 앱을 만들고 그것을 네이티브 앱으로 사용할 수 있게 packaging만 하는 것이 아니라. Appspresso와 같이 WAC를 이용해서 네이티브 자원을 접근하거나 사용할 수 있어야 하며, 또한 네이티브 코드를 생산해서 웹 코드와 상호 연동을 하여 개발 할 수 있어야 진정한 하이브리드 앱 개발 프레임워크라 말할 수 있기 때문이다.

Sencha Touch 자체도 훌륭한 웹 앱 개발 프레임워크이다. 하지만 하이브리드 앱의 효과와 진가를 느끼기 위해서는 반드시 Appspresso의 WAC와 네이티브 코드의 상호연동하는 방법을 이용해 보길 권유하고 싶다.

이 포스팅은 이렇게 Sencha에서 해결할 수 없는 것을 Appspresso에서 지원하는 plugins으로 WAC로 해결할 수 있는 것을 소개하고자 한다. 이 블로그에서 우리는 “네이티브 앱을 하이브리드 앱으로 전환”이라는 주제로 앱을 마이그레이션 하고 있었다. 이 네이티브 앱은 iOS와 Android가 가지고 있는 네이티브 Map을 포털 재도의 API로 새롭게 만든 Daum Map API를 사용하고 있었기 때문에 우리는 Daum Map V3 API로 Javascript 기반의 API로 하이브리드 앱을 만들 때, Sencha와 연동해서 사용할 수 있도록 개발하였다. Sencha Touch 2에서는 Google Map을 API 레벨로 만든 Ext.MapPanel이 존재하지만 우리는 기존의 사용자에게 똑같은 지도 인터페이스를 제공하기 위해서 Sencha의 Map 컴포넌트를 사용하지 않고 Daum에서 제공하는 Map V3 API로 구현을 하였다. 이렇게 Sencha가 지원하지 않는 라이브러를 가지고 UI를 연동하다보니 Sencha가 가지고 있는 기능을 활용하지 못하는 경우가 생긴다.

서론

Coda는 Mac 에서 PHP를 개발할 때 가장 아름다운 IDE가 아닌가 생각이 든다. 이번 Coda 2 릴리즈는 망설임 없이 바로 연구소에 신청해서 구매하게 되었다. 이번 프로젝트는 PHP로 개발하기 때문에 무거운 Eclipse의 PHP 플러그인이나 Editor Plus와 같은 단순한 IDE가 아닌 아름답고 강력한 개발 환경을 지원해주는 Coda 2 런칭 기념으로 반값 할인을 할 때 Mac용과 iPad 용 두가지 앱을 모두 구입했다. Air Play 로 Mac과 iPad의 소스를 공유할 수 있는 멋진 기능도 있기 때문이다. Coda 2에 대한 리뷰는 다시 정식으로 하나의 포스팅으로 소개하겠다.

서론

이번 포스팅에서는 Appspresso를 사용해서 Sencha의 MVC (http://blog.saltfactory.net/category/Sencha) 기반으로 앱을 만드는 과정을 소개한다. 이전 아티클에서 상단 타이틀바 왼쪽에 위치한 “건물찾기”라는 버턴을 누르면 새로운 View가 열리게되고 이들 각각의 View와 Controller가 어떻게 상호 연동되어서 이벤트를 핸들링하는지, 이 때 Controller와 View에서 Model과 Store를 어떻게 활용하는지에 대한 내용도 포함이 되어 있다.

Appspresso를 사용하여 하이브리드앱 개발하기 - 18.Sencha Model과 원격데이터 요청에서 Appspresso(앱스프레소)의 plugins인 ax.ext.net.curl를 이용해서 서버로 json 형태의 데이터를 요청해서 json 데이터를 Sencha의 Model로 정의된 Store를 이용해서 다음 맵 API로 지도위에 Marker를 추가하는 작업을 하였다. 이때 우리는 Store 개념을 이해했을거라 예상된다. 한번 load된 Store를 재활용하는 방법도 이 글에서 소개된다. 이번 포스팅은 복잡도가 높은 편이다. 개념적으로 뷰에서 event를 핸들링하기 위해서 controller에서 view의 identifier로 찾아서 처리했던 부분을 View 마다 widget으로 인식해서 해당되는 widget 안에서 이벤트를 fireEvent로 등록해서 전파하는 방법을 사용하기 때문이다. 이 방법을 사용하기 위해서 우리는 단순하게 alias로 사용했던 View를 모두 widget으로 변경하는 작업을 할 것이다. 그리고 앱에서 필요한 View를 추가하고 각 View를 핸들링할 수 있는 Controller를 추가할 것이다. 복잡한 코드와 설명인만큼 주의하여 같이 진행해보도록 하자.

서론

맥은(Mac OS X) 훌륭한 개발 환경을 제공한다. 내가 Mac을 가장 좋아하는 이유는 데스크탑이나 랩탑안에 PC환경과 Server 환경 모두를 사용할 수 있기 때문이다. 더구나 설정만 잘 한다면 개발했던 경로, 환경을 새로 고침없이 바로 서버로 소스관리툴로 업데이트하여 다운타임 시간 없이 바로 서버 개발을 할 수 있다는 것이다. Mac OS X에서는 서버에서 사용할 수 있는 오픈 소스가 대부분 설치되어 있다. Mac OS X Lion으로 업데이트되면서 Java Runtime Engine이 제외되었지만 다운로드하여 설치할 수 있는 쉬운 방법을 제공해주고 있다. 또는 유닉스(리눅스) 소프트웨어를 Mac OS X에 쉽게 설치할 수 있는 Homebrew나 port로 built-in 되어 있지 않은 공개소프트웨어를 쉽게 추가하거나 관리할 수 있다. 내가 Mac 을 상용하는 이유가 바로 화려하고 이쁜 UI 뿐만 아니라 Unix-like system을 윈도우즈만큼 빠른 UI와 Unix만큼 편리한 command를 사용할 수 있어 서버 프로그램을 개발하는데 아주 유용하기 때문이다.

서비스개발 프로젝트를 하면서 경험적으로 느낀것은 최신기술, 유행하는 프레임워크가 아니라 프로젝트를 성공적으로 끝낼 수 있는 개발자에게 가장 자신있고 빠르게 코드를 리비전할 수 있는 언어를 선택해서 자유도와 완성도를 높게 만들어서 프로젝트를 완료하는게 중요하다는 것을 알게 되었다. 개인 혼자서 Springframework와 ORM framework를 사용하면서 엔터프라이즈급 서비스가 아닌데 무작정 유행하는 프레임워크를 도입하게 되면 프로젝트 개발도 힘들어지고 덩치가 커질염려가 있다. 그래서 이번에는 서버프로젝트를 가볍고 빠르게 개발하려는 목적과 현재 서버 프로그램을 담당할 연구원이 PHP를 사용하고 있던 기술이 있어서 프레임워크 도입을 PHP 기반으로 가기로 했다.

Mac에서는 기본적으로 Apache와 PHP가 설치되어 있다. 이 포스팅에서는 built-in으로 설치된 Apache와 PHP 그리고 Homebrew를 이용해서 mongodb를 설치하고 pear를 이용해서 PHP mongoDB driver를 설치한 후에 PHP에서 mongoDB를 사용할 수 있는 환경을 설정하는 것에 대한 내용을 소개하려고 한다.

서론

현재 Appspresso(앱스프레소)를 사용해서 하이브리드 앱을 개발하면 가장 많이 고민하는 부분이 바로 UI이다. 이것은 아직 공식화 되거나 표준화된 하이브리드 UI가 없기 때문이다. 네이티브 앱은 이런 고민을 하지 않아도 된다. 왜냐면 SDK에 이미 UIKit과 Widget이 제공하고 있기 때문이다. 그래서 하이브리드 앱을 개발할 때 Sencha, jQuery, Dojo, 등의 Javascript UI 라이브러리 선택을 하는데 고민하게 된다. 그래서 Sencha를 선택해서 UI 개발 환경을 정했다고 하자. 그렇다고 고민이 사라지는 것은 아니다. 왜냐하면 어느것을 어떤 수준까지 이용해야하냐는 것이다. 이 말은 이미 각각의 라이브러리들이 너무 많은 기능을 포함하고 있기 때문에 그 기능이 중복된다는 것이다. 네이티브 앱에서는 NSURLRequest을 URL을 요청할 때 사용하라고 (물론 다른 방법도 존재하지만 대부분 NSURLResponse를 위해서 NSURLRequest를 사용할 것이다. 아니면 패키징된 써드파티 클래스를) 이미 정해져 있지만 Sencha에서도 Ajax, JSONP를 이용해서 원격 데이터를 요청할 수 있는 기능이 있고, Appspresso의 ax.ext.net.curl을 이용해서 cross-domain url request를 요청할 수 있기 때문이다.

결론부터 말하자면, 개발자의 의도와 목적에 맞게 사용하는게 답인 것다. Sencha의 모든 기능을 이용하여 네이티브 앱으로 패키징하여 앱스토에 올리기 위해서 패키지 빌드용으로 Appspresso를 이용해도 되고, 순수 UI의 목적만 사용하고 나머지는 Appspresso의 plugins 기능이나 네이티브 코드를 이용해서 개발하라는 것이다. Sencha를 UI로 사용한다는 말은 Sencha의 MVC를 이용한다는 말과 다르지 않다. (물론 MVC 를 이용하지 않아도 되지만 코드가 복잡해지고 나중에 유지보수가 어려워질 것이다.) 그래서 그냥 단순하게 Sencha의 Model과 Store를 이용하기 위해서 proxy 속성을 이용해서 ajax나 scripttag나 jsonp 등을 이용해도 된다. 하지만, Appspresso 자체에 훌륭한 여러가지 plugins들이 존재한다. 우리는 이렇게 훌륭하게 잘 만들어진 Appspresso의 라이브러리와 Sencha의 라이브러리를 보완하면서 적당한 기능으로 나누어서 섞어서 사용하길 원할 수 있다. 그래서 이 포스팅에서는 원격 서버로 부터 데이터를 요청해서 Sencha의 Model을 이용하고 그것을 사용해서 UI에 반영하는 과정을 소개한다.