저자 서문

Ext JS 4는 크로스플랫폼 웹 애플리케이션 개발을 위한 센차(Sencha)의 최신 자바스크립트 프레임워크다. 웹 표준에 기반을 둔 Ext JS는 폭넓은 UI 위젯과 데이터 조작 클래스를 제공해 빠른 애플리케이션 개발을 돕는다. Ext JS 4는 Ext JS 3를 기반으로 새로운 위젯과 범용적으로 사용되는 MVC 아키텍처, 사용자 정의가 쉬운 테마, 플러그인 차트 기능을 도입했다.

이 책은 Ext JS 4의 기초부터 고급 기능과 애플리케이션 설계까지 프레임워크 전반적인 내용을 다룬다. 110개 이상의 상세하고 실용적인 예제를 통해 Ext JS 4가 제공하는 주요 위젯과 기능을 설명한다. 이 책과 Ext JS 프레임워크를 통해 진정한 상호작용 및 반응형 웹 애플리케이션을 개발하는 방법을 배울 수 있다.

Ext JS 4의 기초부터 시작해서 지원하는 위젯과 기능을 살펴본 뒤 애플리케이션 설계와 코드 구조에 관한 확장 기능까지 다룬다.

110개 이상의 실용적이고 상세한 예제를 통해 폼(form)과 그리드(grid), 데이터뷰(data view), 차트(chart)를 어떻게 사용하고 만드는지 설명한다. 또한 데이터 저장 및 조작 방법과 애플리케이션 구축, 모범 설계 사례를 배운다. 이 책은 순서대로 읽을 필요는 없다.

『Ext JS 반응형 웹 애플리케이션 개발』은 실용 예제를 사용해 상호작용 및 반응형 웹 애플리케이션을 만드는 데 필요한 지식을 제공한다.

옮긴이의 말

바야흐로 자바스크립트의 시대다. 자바스크립트는 이전의 단순한 웹페이지에서 벗어나 좀 더 동적이고 풍부한 사용자 경험을 제공해줄 수 있다. 가장 큰 장점은 플래시나 액티브엑스 등 브라우저의 플러그인을 이용하지 않고 브라우저만으로도 가능하다는 점이다.

다만, 모든 것을 처음부터 다 구현하기에는 시간과 비용이 많이 소모된다. 이미 많은 라이브러리가 나와 있지만 그중 Ext JS 4는 웹 애플리케이션을 빠르고 쉽게 구축할 수 있으며 오랜 시간 다듬어졌기 때문에 안정성과 품질에 있어 탁월한 선택이 될 수 있다.
- 이범희

웹 기반 서비스가 인기를 끌면서 주변에서 웹 개발자나 기획자, 디자이너 그리고 테스트 엔지니어까지 어렵지 않게 찾아볼 수 있다. 다양한 직군이 융합되는 이러한 시대의 흐름 속에서 조직에 기여할 수 있는 한 명의 구성원이 되려면 이제 개발자가 아니더라도 웹에 대한 깊은 도메인 지식이 요구된다. 웹은 발전 속도가 빠른 만큼 검증된 프레임워크를 통한 학습이 중요한데, Ext JS 4는 튼튼한 프레임워크와 기술 문서, 커뮤니티를 기반으로 웹 서비스 관련 종사자들에게 좋은 선택이 될 수 있다. 물론, 기존의 Ext JS 3를 사용해 개발하는 중급 개발자들에게도 훌륭한 선택이다.
- 최근호

<b>이 책에서 다루는 내용</b><br/><br/>■ 모범 사례를 따라 애플리케이션을 구성하고, DOM을 조작하며, 사용자와 프레임워크로 인해 발생하는 이벤트를 다루는 방법<br/>■ Ext JS에서 사용할 수 있는 레이아웃을 알아보고, 이들을 조합하는 방법<br/>■ 미려하고 사용자 친화적인 폼 만들기, 클라이언트 측 유효성 검사, 서버 제출 방법<br/>■ 트리와 탭 방식의 레이아웃, 데이터뷰, 템플릿에서 데이터를 구성하고 다루는 방법<br/>■ AJAX 요청과 모델 데이터 객체 만들기, Ext.Direct 사용, CRUD 동작으로 데이터 조작, HTML5를 사용해 로컬 저장소로 통합하는 방법<br/>■ SASS와 컴퍼스(Compass)를 활용해 애플리케이션 외관을 사용자 정의하는 방법<br/><br/><b>이 책의 대상 독자</b><br/><br/>이 책의 대상 독자층은 초보자이거나, 알고 있는 지식을 확장해 상호작용하는 웹 애플리케이션을 만들고자 하는 Ext JS 경험자 모두를 대상으로 한다.<br/><br/><b>이 책의 구성</b><br/><br/>1장 ‘클래스, 객체지향 원칙, 애플리케이션 구조화’에서는 Ext JS 4의 새로운 클래스 체계를 활용하고 MVC 패턴을 이용해 애플리케이션을 설계하며 프레임워크의 기능을 확장하는 방법을 다룬다.<br/><br/>2장 ‘DOM 조작, 이벤트 핸들링, AJAX 요청 생성’에서는 문서 객체 모델(DOM) 엘리먼트를 선택하고 생성, 조작하는 방법을 배운다. 기본 제공 애니메이션을 엘리먼트에 적용하거나 사용자 애니메이션을 만드는 방법도 살펴본다. AJAX 요청을 생성하는 방법과 데이터를 JSON이나 HTML 형식으로 인코딩, 디코딩하는 방법을 설명한다. 그 밖에 이벤트 핸들링, 날짜 다루기, 브라우저 기능 알아내기, 객체 타입이나 값 평가도 다룬다.<br/><br/>3장 ’컴포넌트 배치’에서는 Ext JS 4의 레이아웃 시스템을 살펴보고 UI 컴포넌트 배치 방법을 설명한다. 이 장에서는 FitLayout, BorderLayout, HBoxLayout, VBoxLayout, ColumnLayout, TableLayout, AccoridionLayout, CardLayout, AnchorLayout, AbsoluteLayout을 다룬다. 말미에는 이러한 레이아웃을 조합해 리치 애플리케이션(rich desktop-style application) 프레임워크를 구축하는 예제를 실었다.<br/><br/>4장 ‘UI 블록 쌓기: 트리, 패널, 데이터뷰’에서는 Ext JS의 기본 컴포넌트 중 리치 애플리케이션을 제작하는 데 필수적인 세 가지 UI 컴포넌트를 소개한 다음, 어떻게 설정하고 사용하는지 살펴볼 것이다.<br/><br/>5장 ‘폼 로딩과 제출, 유효성 검사’에서는 Ext JS 4의 폼(form)을 소개한다. 첫 번째 예제로 고객 문의 페이지 만들기를 실습해본다. 특정 필드에 치중하기보다 폼 사용의 포괄적인 방법을 설명한다. 특히 폼 채우기나 제출, 클라이언트 유효성 검사, 콜백/예외 처리 등을 다룬다.<br/><br/>6장 ‘폼 필드 사용과 설정’에서는 완벽한 사용자 경험을 제공하는 폼을 만들어나가기 위해 Ext JS 4의 기본 폼 필드와 기능을 사용하고 설정하는 방법을 비중 있게 다룬다. 다양한 폼 필드를 알아보고, 기본 제공 폼 필드를 설정하는 방법부터 부드럽고 연결성 있는 사용자 경험을 제공하기 위해 폼 필드 레이아웃을 사용자 정의하는 방법까지 배워본다.<br/><br/>7장 ‘Ext JS 데이터 패키지’에서는 데이터 패키지의 핵심 주제를 다룬다. 특히, 모델(model)과 스토어(store), 프록시(proxy)가 어떻게 애플리케이션의 데이터를 구조화하는지 예제를 통해 설명한다.<br/><br/>8장 ‘표 데이터 표현과 편집’에서는 간단한 그리드 기초부터 스크롤 기능이 제공된 그리드와 그루핑 같은 고급 주제를 다룬다. 또한 데이터를 쉽게 편집하거나 변경하고 다른 Ext JS 컴포넌트와 그리드를 연결하는 방법을 다룬다.<br/><br/>9장 ‘버튼과 메뉴로 툴바 구성’에서는 가장 기본적인 애플리케이션 상호작용 도구인 툴바와 버튼, 메뉴를 살펴본다. 툴바는 대부분 사용자에게 친숙한 안내 도구이며, 사용자가 애플리케이션을 처음 접할 때 어디부터 출발해야 하는지 알려주는 역할을 한다. 9장에서는 이렇게 중요하게 다뤄지는 컴포넌트를 살펴보고 동적인 사용자 경험을 제공하기 위해 애플리케이션에 추가하는 방법을 알아본다.<br/><br/>10장 ‘그리기와 차트’에서는 Ext JS 4에 새롭게 도입된 차트(chart)와 그리기(drawing) 사용법을 소개한다. 특히, 다양한 차트 데이터를 표현하는 여러 가지 방법을 알아본다. 기본 차트 패키지로 사용되는 Ext.draw 패키지를 익힌다. 우선 도형과 텍스트 그리기가 가능한 도구를 소개한 다음, 빨리 만들 수 있는 매력적이고 상호작용적인 차트를 앱으로 통합할 수 있게 해주는 Ext.chart 클래스를 배워본다.<br/><br/>11장 ‘테마 적용’에선 Ext JS로 만들어진 애플리케이션의 외관을 원하는 대로 변경하는 법을 설명한다. SASS와 컴퍼스(Compass)의 기본 사용법부터 SASS 컴파일에 이르는 수준까지를 배운다. 그 후 SASS 옵션과 사용자 정의 믹스인으로 테마를 어떻게 사용자 정의하는지 살펴본다. 말미에는 센차 SDK에 있는 슬라이스 도구를 사용해 레거시 브라우저를 다루는 방법도 알아본다.<br/><br/>12장 ‘완벽한 애플리케이션을 위한 고급 Ext JS’에서는 좀 더 돋보이는 애플리케이션을 만들기 위한 Ext JS의 고급 주제를 다룬다. 첫 번째는 텍스트 필드에 추가하는 플러그인으로 편집 모드와 표시 모드 사이를 전환하는 기능을 구현해본다. 다음으로는 예제를 통해 애플리케이션 구조화에 추천되는 MVC 패턴을 알아본다. 우선 파일과 클래스 구조를 알아본 뒤 애플리케이션과 함께 연동되는 방법을 배운 다음, 앞서 본 예제를 MVC 패턴을 준수하는 구조로 만들어본다. Ext.Direct 패키지가 폼과 스토어를 어떻게 연동해서 서버 통신을 수행하는지 살펴보고 그 밖에 상태 관리와 예외 처리, 이력 관리, 작업 관리 같은 고급 주제도 설명한다.