Ext JS 반응형 웹 애플리케이션 개발(acorn+PACKT)

★ 요약 ★



Ext JS 4의 기초부터 애플리케이션 설계를 포함한 고급 기능까지 프레임워크의 전반적인 내용을 다룬다. 110개 이상의 상세하고 실용적인 예제를 통해 Ext JS 4가 제공하는 주요 위젯과 기능을 배운다. 애플리케이션 설계와 코드 구조에 관한 확장 기능까지 학습한 후에는 Ext JS 프레임워크를 사용하는 진정한 상호작용 및 반응형 웹 애플리케이션을 만들 수 있다.



★ 이 책에서 다루는 내용 ★



■ 모범 사례를 따라 애플리케이션을 구성하고, DOM을 조작하며, 사용자와 프레임워크로 인해 발생하는 이벤트를 다루는 방법

■ Ext JS에서 사용할 수 있는 레이아웃을 알아보고, 이들을 조합하는 방법

■ 미려하고 사용자 친화적인 폼 만들기, 클라이언트 측 유효성 검사, 서버 제출 방법

■ 트리와 탭 방식의 레이아웃, 데이터뷰, 템플릿에서 데이터를 구성하고 다루는 방법

■ AJAX 요청과 모델 데이터 객체 만들기, Ext.Direct 사용, CRUD 동작으로 데이터 조작, HTML5를 사용해 로컬 저장소로 통합하는 방법

■ SASS와 컴퍼스(Compass)를 활용해 애플리케이션 외관을 사용자 정의하는 방법



★ 이 책의 대상 독자 ★



이 책의 대상 독자층은 초보자이거나, 알고 있는 지식을 확장해 상호작용하는 웹 애플리케이션을 만들고자 하는 Ext JS 경험자 모두를 대상으로 한다.



★ 이 책의 구성 ★



1장 '클래스, 객체지향 원칙, 애플리케이션 구조화'에서는 Ext JS 4의 새로운 클래스 체계를 활용하고 MVC 패턴을 이용해 애플리케이션을 설계하며 프레임워크의 기능을 확장하는 방법을 다룬다.



2장 'DOM 조작, 이벤트 핸들링, AJAX 요청 생성'에서는 문서 객체 모델(DOM) 엘리먼트를 선택하고 생성, 조작하는 방법을 배운다. 기본 제공 애니메이션을 엘리먼트에 적용하거나 사용자 애니메이션을 만드는 방법도 살펴본다. AJAX 요청을 생성하는 방법과 데이터를 JSON이나 HTML 형식으로 인코딩, 디코딩하는 방법을 설명한다. 그 밖에 이벤트 핸들링, 날짜 다루기, 브라우저 기능 알아내기, 객체 타입이나 값 평가도 다룬다.



3장 '컴포넌트 배치'에서는 Ext JS 4의 레이아웃 시스템을 살펴보고 UI 컴포넌트 배치 방법을 설명한다. 이 장에서는 FitLayout, BorderLayout, HBoxLayout, VBoxLayout, ColumnLayout, TableLayout, AccoridionLayout, CardLayout, AnchorLayout, AbsoluteLayout을 다룬다. 말미에는 이러한 레이아웃을 조합해 리치 애플리케이션(rich desktop-style application) 프레임워크를 구축하는 예제를 실었다.



4장 'UI 블록 쌓기: 트리, 패널, 데이터뷰'에서는 Ext JS의 기본 컴포넌트 중 리치 애플리케이션을 제작하는 데 필수적인 세 가지 UI 컴포넌트를 소개한 다음, 어떻게 설정하고 사용하는지 살펴볼 것이다.



5장 '폼 로딩과 제출, 유효성 검사'에서는 Ext JS 4의 폼(form)을 소개한다. 첫 번째 예제로 고객 문의 페이지 만들기를 실습해본다. 특정 필드에 치중하기보다 폼 사용의 포괄적인 방법을 설명한다. 특히 폼 채우기나 제출, 클라이언트 유효성 검사, 콜백/예외 처리 등을 다룬다.



6장 '폼 필드 사용과 설정'에서는 완벽한 사용자 경험을 제공하는 폼을 만들어나가기 위해 Ext JS 4의 기본 폼 필드와 기능을 사용하고 설정하는 방법을 비중 있게 다룬다. 다양한 폼 필드를 알아보고, 기본 제공 폼 필드를 설정하는 방법부터 부드럽고 연결성 있는 사용자 경험을 제공하기 위해 폼 필드 레이아웃을 사용자 정의하는 방법까지 배워본다.



7장 'Ext JS 데이터 패키지'에서는 데이터 패키지의 핵심 주제를 다룬다. 특히, 모델(model)과 스토어(store), 프록시(proxy)가 어떻게 애플리케이션의 데이터를 구조화하는지 예제를 통해 설명한다.



8장 '표 데이터 표현과 편집'에서는 간단한 그리드 기초부터 스크롤 기능이 제공된 그리드와 그루핑 같은 고급 주제를 다룬다. 또한 데이터를 쉽게 편집하거나 변경하고 다른 Ext JS 컴포넌트와 그리드를 연결하는 방법을 다룬다.



9장 '버튼과 메뉴로 툴바 구성'에서는 가장 기본적인 애플리케이션 상호작용 도구인 툴바와 버튼, 메뉴를 살펴본다. 툴바는 대부분 사용자에게 친숙한 안내 도구이며, 사용자가 애플리케이션을 처음 접할 때 어디부터 출발해야 하는지 알려주는 역할을 한다. 9장에서는 이렇게 중요하게 다뤄지는 컴포넌트를 살펴보고 동적인 사용자 경험을 제공하기 위해 애플리케이션에 추가하는 방법을 알아본다.



10장 '그리기와 차트'에서는 Ext JS 4에 새롭게 도입된 차트(chart)와 그리기(drawing) 사용법을 소개한다. 특히, 다양한 차트 데이터를 표현하는 여러 가지 방법을 알아본다. 기본 차트 패키지로 사용되는 Ext.draw 패키지를 익힌다. 우선 도형과 텍스트 그리기가 가능한 도구를 소개한 다음, 빨리 만들 수 있는 매력적이고 상호작용적인 차트를 앱으로 통합할 수 있게 해주는 Ext.chart 클래스를 배워본다.



11장 '테마 적용'에선 Ext JS로 만들어진 애플리케이션의 외관을 원하는 대로 변경하는 법을 설명한다. SASS와 컴퍼스(Compass)의 기본 사용법부터 SASS 컴파일에 이르는 수준까지를 배운다. 그 후 SASS 옵션과 사용자 정의 믹스인으로 테마를 어떻게 사용자 정의하는지 살펴본다. 말미에는 센차 SDK에 있는 슬라이스 도구를 사용해 레거시 브라우저를 다루는 방법도 알아본다.



12장 '완벽한 애플리케이션을 위한 고급 Ext JS'에서는 좀 더 돋보이는 애플리케이션을 만들기 위한 Ext JS의 고급 주제를 다룬다. 첫 번째는 텍스트 필드에 추가하는 플러그인으로 편집 모드와 표시 모드 사이를 전환하는 기능을 구현해본다. 다음으로는 예제를 통해 애플리케이션 구조화에 추천되는 MVC 패턴을 알아본다. 우선 파일과 클래스 구조를 알아본 뒤 애플리케이션과 함께 연동되는 방법을 배운 다음, 앞서 본 예제를 MVC 패턴을 준수하는 구조로 만들어본다. Ext.Direct 패키지가 폼과 스토어를 어떻게 연동해서 서버 통신을 수행하는지 살펴보고 그 밖에 상태 관리와 예외 처리, 이력 관리, 작업 관리 같은 고급 주제도 설명한다.



★ 저자 서문 ★



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를 사용해 개발하는 중급 개발자들에게도 훌륭한 선택이다.

- 최근호

지은이 소개

기술 감수자 소개

옮긴이 소개

옮긴이의 말

들어가며



1장 클래스, 객체지향 원칙, 애플리케이션 구조화

___개요

___Ext JS의 새로운 클래스 체계를 이용한 사용자 정의 클래스 생성

___클래스 상속

___클래스에 믹스인 추가

___함수 스코프

___Ext JS 클래스 동적 로딩

___컴포넌트 에일리어스

___컴포넌트 쿼리로 컴포넌트에 접근

___Ext JS 컴포넌트 확장

___Ext JS 기능 오버라이딩



2장 DOM 조작, 이벤트 핸들링, AJAX 요청 생성

___개요

___DOM 엘리먼트 선택

___DOM 트리 순회

___DOM 엘리먼트 조작

___새로운 DOM 엘리먼트 생성

___엘리먼트와 컴포넌트의 이벤트 핸들링

___자식 객체로 이벤트 위임

___간단한 엘리먼트 애니메이션

___사용자 정의 애니메이션

___날짜 데이터 분석, 형식화, 조작

___AJAX를 이용한 데이터 로딩

___JSON 데이터 인코딩과 디코딩



3장 컴포넌트 배치

___개요

___FitLayout으로 컴포넌트 확장

___VBoxLayout으로 수직 레이아웃 만들기

___HBoxLayout으로 수평 레이아웃 만들기

___ColumnLayout으로 콘텐츠 나타내기

___AccordionLayout으로 축소 가능한 레이아웃 만들기

___CardLayout으로 스택 컴포넌트 나타내기

___부모 크기에 비례하는 앵커 컴포넌트 만들기

___BorderLayout으로 전체 화면 애플리케이션 만들기

___다양한 레이아웃 조합



4장 UI 블록 쌓기: 트리, 패널, 데이터뷰

___개요

___서버에서 트리 노드 가져오기

___트리 노드 정렬

___드래그 앤 드롭으로 노드 이동

___트리 메뉴에서 또 다른 패널로 콘텐츠 가져오기

___패널 가장자리로 아이템 고정

___윈도우로 간단한 폼 나타내기

___탭에 툴팁 나타내기

___탭 패널의 탭바 조작

___XTemplate에서 인라인 자바스크립트 실행

___Ext.XTemplate 멤버 함수 만들기

___Ext.XTemplate에 로직 추가

___Ext.XTemplate의 날짜 형식화

___데이터 스토어와 연결된 데이터뷰의 생성

___데이터뷰 클릭으로 상세 정보 표시



5장 폼 로딩과 제출, 유효성 검사

___개요

___복잡한 폼 레이아웃 구성

___폼 데이터 채우기

___폼 데이터 제출

___VType으로 폼 필드 유효성 검사

___사용자 정의 VType 만들기

___서버에 파일 업로드

___예외 처리와 콜백 함수 다루기



6장 폼 필드 사용과 설정

___개요

___라디오 버튼 나열

___체크박스 그룹 덧붙이기

___JSON으로부터 체크박스 그룹을 동적으로 만들기

___날짜 필드에서 선택 가능한 범위 설정

___날짜 필드 로딩과 구문 분석

___스피너 필드를 사용한 숫자 입력

___슬라이더 필드 값 조정

___콤보박스에 서버 데이터 로드

___콤보박스 자동완성

___콤보박스 아이템 렌더링

___HTML 필드를 사용한 리치 에디터

___반복되는 폼 필드와 필드셋 생성

___폼 필드 결합



7장 Ext JS 데이터 패키지

___개요

___데이터 객체 모델링

___프록시를 이용한 모델 로딩과 저장

___스토어로 크로스도메인 데이터 로드

___모델 관계 설정과 중첩 데이터 로딩

___모델 필드의 유효성 검사

___스토어 데이터 그룹핑

___스토어 예외 처리

___HTML5 로컬 저장소의 데이터 저장과 로딩



8장 표 데이터 표현과 편집

___개요

___간단한 표 데이터 나타내기

___RowEditor로 그리드 데이터 편집

___페이징 툴바 추가

___스크롤 기능이 제공된 그리드에서 데이터 다루기

___드래그 앤 드롭으로 그리드 간 레코드 이동

___그리드 그룹 생성

___템플릿 컬럼을 사용한 그리드 셀의 사용자 지정 렌더링

___그리드 데이터의 합계 행 만들기

___RowBody 기능으로 전체 행 너비에 맞게 데이터 표현

___그리드 행에서 동작하는 컨텍스트 메뉴 추가

___선택한 행으로 폼 채우기

___그리드 액션 컬럼에 버튼 추가



9장 버튼과 메뉴로 툴바 구성

___개요

___스플릿 버튼 생성

___컨텍스트 메뉴 사용

___콤보박스를 툴바에 추가해 그리드 필터링

___메뉴에서 색상 선택기 사용



10장 그리기와 차트

___개요

___기본 도형 그리기

___그라데이션 적용

___패스 그리기

___스프라이트의 전환과 상호작용

___외부 데이터로 막대 차트 생성

___로컬 데이터로 파이 차트 생성

___연속으로 갱신되는 데이터로 선형 차트 만들기

___레이블, 색상, 축 서식 사용자 정의

___차트 컴포넌트의 이벤트

___그리드 편집으로 차트 갱신



11장 테마 적용

___개요

___컴퍼스로 SASS 컴파일

___SASS 소개

___Ext JS의 SASS 변수 사용

___UI 설정 옵션

___테마 믹스인 생성

___패널 스타일 재정의

___레거시 브라우저를 지원하는 이미지 만들기



12장 완벽한 애플리케이션을 위한 고급 Ext JS 활용

___개요

___플러그인의 고급 기능

___MVC 패턴으로 애플리케이션 설계

___사용자 동작을 제어하는 컨트롤러 액션 추가

___MVC 패턴으로 실전 애플리케이션 만들기

___센차 SDK 도구로 애플리케이션 만들기

___Ext Direct 시작

___Ext Direct를 사용한 폼 로딩과 제출

___애플리케이션의 전반적인 예외 처리



찾아보기

스튜어트 애시워스 저자 스튜어트 애시워스는 스코틀랜드의 글래스고에서 여자친구, 애완견 메그와 함께 사는 웹 개발자이자 웹 괴짜다. 스트래스클라이드대학교에서 컴퓨터설계학과를 우수한 성적으로 졸업한 후, 글래스고의 작은 소프트웨어 회사에서 첫 번째 경력을 시작했다. 스튜어트는 센차를 3년 이상 사용하면서, 크고 작은 다양한 규모의 웹 애플리케이션과 모바일 애플리케이션, 프레임워크 플러그인을 개발했다. 2010년 말에는 공동 저자인 앤드류와 함께 스웜온라인(SwarmOnline)이라는 회사를 세워, 센차의 공식 파트너사로 성장했다. 이후에는 점차 해외로 사업 영역을 확장해, 작은 기업 고객부터 다국적 기업 고객까지 수많은 고객과 함께 프로젝트를 수행했다. 스튜어트는 축구와 스노보드를 즐기고, 새로운 도시를 찾아 떠나는 여행을 좋아한다. 스웜온라인 웹사이트에 센차에 관한 블로그를 운영하고 있으며, 트위터나 이메일, 센차 포럼을 통해서도 만나볼 수 있다.