이 책은 센차터치(Sencha Touch)와 ExtJs를 만드는 데 도움을 주는 통합 툴인 센차 아키텍트(Sencha Architect)를 이용해 쉽게 모바일 웹앱과 네이티브 앱을 만드는 방법을 설명한다. 센차 아키텍트는 센차터치의 파일 각각을 코딩해 만드는 방법이 아닌 위지윅 기능을 이용해 필요한 컴포넌트를 끌어다 놓음으로써 쉽게 앱을 구축할 수 있도록 도와준다. 또한 터치 차트, 서버로의 직접 배포, 네이티브 앱으로의 빌드 기능 등 명실상부한 강력한 모바일 웹앱 도구의 중심으로서 손쉽게 모바일 앱을 개발할 수 있다. 『센차터치2+폰갭 프로그래밍』과 함께 읽으면 더욱 유용하다.


## 이 책에서 설명하는 센차 아키텍트 2.2.1 버전을 다운로드하시려면 여기를 클릭해주세요.


[ 이 책에서 다루는 내용 ]

■ 센차 아키텍트의 설치와 환경 설정
■ 센차 아키텍트를 이용한 센차터치 프로그래밍
■ 센차 아키텍트에서 직접 웹앱 형태로 서버에 배포하는 방법
■ 센차 아키텍트에서 네이티브 앱으로 빌드하는 방법
■ 센차 아키텍트에서의 폰갭 연동


[ 이 책의 대상 독자 ]

■ 가장 강력한 웹앱을 학습하려는 개발자
■ 센차터치를 어려워하는 웹앱 개발자
■ 쉽고 빠르게 웹앱을 구성하려는 개발자
■ 웹앱으로 네이티브 앱을 만들고 싶은 개발자


[ 이 책의 구성 ]

1장, ‘센차 아키텍트와 환경 설정’에서는 센차 아키텍트가 무엇인지 알아보고, 기본적인 환경설정 방법을 학습한다. 왜 센차 아키텍트를 사용해야 하는지 알 수 있다.

2장, ‘센차 아키텍트 시작’에서는 센차터치 모바일 앱을 작성해보고 MVC 패턴에 대해 학습한다. 센차 아키텍트는 MVC 패턴 형태를 기본적으로 지원한다.

3장, ‘센차터치 화면 구성’에서는 화면의 구성을 나타내는 레이아웃을 구성한다. 수작업에 비해 센차 아키텍트가 얼마나 편리하게 레이아웃을 구성할 수 있는지 알 수 있다.

4장, ‘센차터치 컴포넌트’에서는 센차터치 컴포넌트를 구성하고 읽고 쓰기를 수행한다. 툴바에 있는 컴포넌트를 끌어다 놓음으로써 쉽게 컴포넌트를 배치하고 사용할 수 있다.

5장, ‘다양한 화면 구성’에서는 센차터치가 지원하는 다양한 화면을 만든다. 여러 형태의 화면을 센차 아키텍트로 구현해본다.

6장, ‘리스트의 사용’에서는 리스트 뷰와 데이터 뷰를 만든다. 모바일 앱에서 가장 많이 사용되는 리스트 뷰와 데이터 뷰를 센차 아키텍트가 어떠한 방식으로 쉽게 지원하는지 알아본다.

7장, ‘서버 데이터 사용’에서는 서버로부터 Ajax 데이터를 읽어오고 MVC 아키텍처 형태로 구현한다. 서버와의 연동을 지원하는 방법을 학습한다.

8장, ‘멀티미디어’에서는 비디오, 오디오, 지도 기능 등을 쉽게 사용할 수 있다.

9장, ‘센차터치 차트’에서는 센차터치 차트에 대해 알아보고 사용해본다. 센차 아키텍트에 통합된 센차터치 차트를 쉽게 구성할 수 있는 방법을 알아보고 데이터 적용법을 학습한다.

10장, ‘안드로이드 개발 환경 설정’에서는 안드로이드 개발과 폰갭을 위한 환경 설정을 알아본다. 기본적인 설치 방법과 더불어, 폰갭에 대해서도 학습한다.

11장, ‘네이티브 앱 개발’에서는 폰갭, 센차 아키텍트가 지원하는 네이티브 앱을 알아보고 구현한다. 센차 아키텍트의 네이티브 방식과 안정화된 폰갭을 사용해 구성하는 법을 학습한다.

[ 저자 서문 ]

『센차터치2+폰갭 프로그래밍』책을 출간한 이후 불과 얼마 안 되는 사이에 센차터치를 비롯한 제품들은 계속해서 변화를 꾀했다. 그중 가장 큰 변화라면 센차 아키텍트가 아닐 수 없다. 뒤늦게라도 이 책으로 센차 아키텍트(Sencha Architect)를 소개할 수 있어서 매우 기쁘다. 센차터치를 사용하는 데 있어 센차 아키텍트의 활용은 아쉬웠던 센차터치의 통합 개발 툴에 단비와 같은 소식이기 때문이다.

센차터치는 단순히 웹앱을 넘어서 종합적인 모바일 프레임워크로 자리잡아가고 있다. 특히 가장 광범위하고 강력한 센차터치 라이브러리를 중심으로, 네이티브 코드추가, 센차 커맨드, 센차터치 차트 등 모바일 웹앱, 하이브리드 앱에 필요한 모든 요소를 갖추고 있다. 이제 남은 일은 각 기능을 하나의 통합된 툴로 관리하고 사용하는 것이다. 센차 아키텍트는 모든 요소를 통합한 하나의 통합 개발 툴이다. 따라서 센차아키텍트는 독자적인 제품이면서 또한 그렇지 않기도 하다. 센차 아키텍트는 모든 제품을 포함한 하나의 툴이기 때문이다. 현재 센차 아키텍트를 이용해 모바일 하이브리드 플랫폼을 개발하고 서버로 배포할 수 있으며, 다양한 모바일 앱에 단순한 조작만으로 등록과 배포가 가능해졌다. 다만 새로워지는 모바일 환경에 적응할 기간이 필요하고, 연동해야 할 네이티브 기능도 더욱 다양하게 지원할 시간이 필요하다.

센차 아키텍트의 출현은 개발자에게도 반가운 소식이다. 초보자는 디자인 툴을 이용해 화면을 쉽게 구성할 수 있으며, 경험자는 좀 더 정형화된 코드로 웹앱을 만들 수 있다. 이제 어떠한 방식으로 MVC 아키텍처를 만들어야 하는지 명확해졌고, 좀 더 폭넓은 층이 웹앱을 쉽게 구성할 수 있는 능력을 갖추게 됐다.

이렇듯 센차 아키텍트가 출시됨에 따라, 모바일 웹앱 개발을 망설일 이유가 일순에 사라졌다. 이젠 마우스를 이용해 센차터치 앱을 만들어볼 시간이다.


[ 저자 소개 ]

이병옥
원광대학교 제어계측공학과를 졸업했으며, 비트교육센터 전문가 과정을 거쳐 IT계에 입문했다. 금융 IT와 관련된 개발 업무를 주로 했으며, LG CNS를 거쳐 현재 IBK 시스템에 근무 중이다. 금융권 모바일 프로젝트에 참여했으며, 웹앱과 안드로이드, 윈도우 프로그램에 관심이 많다. 저서로는 에이콘출판사에서 펴낸 『센차터치 모바일 프로그래밍』(2011), 『센차터치2+폰갭 프로그래밍』(2012),『나홀로 개발자를 위한 안드로이드 게임 프로그래밍』(2013)이 있다.

목차

• 1부 센차 아키텍트 소개
  
• 1장 센차 아키텍트와 환경 설정
  • 1.1 센차 아키텍트 소개
  • 1.2 아파치 톰캣 서버 설치
  • 1.3 센차 아키텍트 설치
• 2장 센차 아키텍트 시작
  • 2.1 Hello 센차 아키텍트
  • 2.2 디버깅
  • 2.3 센차터치 MVC 아키텍처
  • 2.4 센차터치 클래스의 기본
    
• 2부 센차 아키텍트 활용
  
• 3장 센차터치 화면 구성
  • 3.1 센차터치 레이아웃
  • 3.2 복합적인 레이아웃 구성
• 4장 센차터치 컴포넌트
  • 4.1 폼 컴포넌트의 사용
  • 4.2 컴포넌트 읽고 쓰기
  • 4.3 셀렉트, 슬라이더, 토글 필드의 사용
  • 4.4 셀렉트, 슬라이더, 토글 필드의 사용(MVC)
  • 4.5 픽커 필드와 픽커 컴포넌트의 사용
  • 4.6 아이콘과 UI
  • 4.7 메시지 박스와 사용자 함수
    
• 5장 다양한 화면 구성
  • 5.1 탭 패널과 애니메이션
  • 5.2 캐러셀
  • 5.3 오버레이 창
  • 5.4 페이지 이동과 구성
    
• 6장 리스트의 사용
  • 6.1 리스트 뷰
  • 6.2 데이터 뷰
    
• 7장 서버 데이터 사용
  • 7.1 Ajax 데이터 가져오기
  • 7.2 Ajax와 MVC 아키텍처
    
• 8장 멀티미디어
  • 8.1 오디오와 비디오
  • 8.2 구글 지도
    
• 9장 센차터치 차트
  • 9.1 센차터치 차트의 종류
  • 9.2 센차터치 차트의 사용
    
• 3부 네이티브 앱 적용
  
• 10장 안드로이드 개발 환경 설정
  • 10.1 이클립스와 안드로이드 SDK 설치
  • 10.2 폰갭 설치
    
• 11장 네이티브 앱 개발
  • 11.1 센차 아키텍트와 폰갭을 이용한 앱 구현
  • 11.2 센차 아키텍트를 이용한 네이티브 앱 구현
  • 11.3 센차 디바이스 소개

정오표

[76p 4행]

display 값을 → style 값을

[112p 누락]

도구상자에서 DEFAULT의 Controller 추가한다.

[122p 6행]

Lable과 Button을 순서대로 추가한다 → 도구상자 Forms의 Lable과 Button을 순서대로 추가한다

[128p 아래에서 7행]

('myTextBox') → ('myTextField')

[137p 아래에서 3행에 추가]

id를 myCarousel 입력한다.

[142p 5행]

alias → user alias

[142p 6행]
center → centered

[143p 추가]

리스트 5-3 의 3줄~5줄

[174p 누락]

DataView 설정 store에서 Mystore 선택, autoLoad 선택

[183p]
최하단 LstTel → tellList

[198p 아래에서 5행]
getBtn → btnDats
[name=BtnGet]
→ [name=BtnData]

[258p 추가]

속성의 style을 background-color:white 입력
속성의 centered를 false
속성의 fullscreen을 true

[180p 7행]
(2015.05.11 등록)
C:\Tomcat\webapps\sencha\jap\ajaxdata.jsp -> C:\Tomcat\webapps\ROOT\sencha\jsp\ajaxdata.jsp