『자바스크립트 UI 개발과 Jindo 프레임워크』는 NHN에서 자체적으로 개발한 자바스크립트 프레임워크인 ‘Jindo 프레임워크‘를 주제로 자바스크립트 UI 개발의 원리와 구현 방법을 설명한다. Jindo 프레임워크가 주제이지만 웹 개발자들이 UI 개발에 친숙해지도록 기본적인 원리에 초점을 맞춰 설명했기 때문에 Jindo 프레임워크를 사용하지 않아도 괜찮다. 예제의 원리를 이해한다면 다른 프레임워크를 사용하거나 프레임워크를 사용하지 않아도 실제 UI 개발에 응용할 수 있도록 했다.

저자 : 박재성
저자 박재성은 건국대학교 컴퓨터공학과를 졸업했으며, 다양한 웹 프로젝트에 참여했다. SK커뮤니케이션즈에서 자바 개발자로 일하던 중 프런트 엔드 개발에 흥미를 느껴 NHN으로 이직했다. NHN에서는 지식iN, 카페, 블로그 등 다양한 네이버 서비스 개발에 참여했고, 현재는 AjaxUI팀에서 자바스크립트 기술 지원/분석과 교육 업무 등을 담당하고 있다. HTML5를 이용한 신기술과 더 나은 자바스크립트 개발에 관심이 많다.

저자 : 손병대
저자 손병대는 숭실대학교 미디어학부 졸업과 동시에 AjaxUI랩에서 인턴으로 시작해 지금까지 같은 랩에서 열심히 코딩을 즐기고 있다. 네이버 메인, 네이버 지도 개편 및 거리뷰 프로젝트에 참여했으며, 네이버 재팬 서비스를 지원하기도 했다. 현재는 자바스크립트로 할 수 있는 모든 것에 관심이 있으며, NodeJS와 하이브리드 앱 개발에 열정을 쏟고 있다.

Part 01 자바스크립트 프레임워크와 Jindo 프레임워크

01_ 자바스크립트 프레임워크와 UI 개발
AJAX 기술의 등장과 UI 개발의 시작
웹 애플리케이션과 UI 개발
자바스크립트 프레임워크

02_Jindo 프레임워크
Jindo 프레임워크의 역사
Jindo의 특징
Jindo 프레임워크의 구조
Jindo 프레임워크 사용

Part 02 Jindo 프레임워크

03_요소 선택과 조작
문서 객체 모델(DOM)과 요소 선택
CSS 선택자(Selector)와 요소 선택
요소 조작

04_ 브라우저와 문서 영역 조작하기
브라우저 창과 문서 영역
브라우저와 문서 영역 조작

05_이벤트와 이벤트 처리
이벤트와 이벤트 처리
Jindo의 이벤트 핸들링과 함수 바인딩

06_데이터 다루기
데이터 타입과 래퍼 객체
Jindo의 데이터 래퍼 객체

07_폼 데이터 검증
이벤트를 활용한 폼 데이터 검증
간단한 데이터 검증

08_서버와 통신하기
XHR 객체 이해하기
XHR 객체로 통신하기
$Ajax( ) 객체 기본 사용법
$Ajax( ) 객체 실습하기
그 외의 $Ajax( ) 객체 사용법

09_클래스와 템플릿
객체지향적으로 설계하기
템플릿을 활용한 DOM 구성

10_ 그 밖의 유용한 객체
날짜 조작하기
쿠키 사용하기
브라우저 정보 확인

Part 03 자바스크립트 UI 개발 실전 사례

11_레이어 다루기
레이어 보이기와 숨기기
레이어 배치하기
영역 크기 구하기
레이어 응용하기

12_드래그 앤드 드롭
드래그 앤드 드롭 과정
기본 구현
고급 구현 및 문제 해결
HTML5의 드래그 앤드 드롭

13_타이머
기본 사용법
응용 패턴 익히기

14_애니메이션
구현방법
CSS 속성을 이용한 애니메이션
타이머를 이용한 애니메이션

15_AJAX 고급 응용
크로스 도메인 문제
AJAX 히스토리

16_실시간 급상승 검색어의 롤링
UI 요구사항
롤링 동작 구현
마우스 오버 동작 처리
재사용 가능한 클래스 객체로 만들기

17_ 도서 관리 웹 애플리케이션 만들기
웹 애플리케이션 기획
요구사항
인터페이스 만들기
애플리케이션 설계
모델 만들기
컨트롤러 만들기
이벤트 적용
기능 개선

Part 04 부록

부록 A _코드 최소화를 통한 성능 향상
최소화(Minification)의 원리
최소화 도구 - YUI Compressor
최소화 코드 복원 - 코드 포매팅

부록 B _디버깅
브라우저 개발 도구
HTTP 트래픽 정보를 활용한 디버깅

부록 C _정규 표현식
정규 표현식과 문자열
정규 표현식 선언하기
캡처링(Capturing) 사용하기
비캡처링(Non-Capturing) 활용
test( ) 메서드와 exec( ) 메서드의 성능 차이
lastIndex 속성과 g플래그 옵션

부록 D _자바스크립트 코딩 컨벤션
네이밍 규칙
코드 작성 규칙
AJAX 응답 포맷 작성 규칙
소스 코드 표기법