웹 디자이너, 프로그래머 모두에게 강력하게 추천하는 라이브러리 핸드북!



크로스 브라우저의 문제 해결과 예쁜 디자인을 위해서 자바스크립트 라이브러리 사용이 필수인 시대가 되었다. 수많은 라이브러리가 우후죽순처럼 만들어지고 있는데, 선택을 도와줄 가이드가 없는 실정이다. 이 책은 수많은 자바스크립트 라이브러리와 jQuery 플러그인 중에서 도움이 되고, 재미있고, 실제 적용할 수 있는 111가지의 라이브러리를 엄선하여 샘플 소스와 함께 소개하고 있다. UI(사용자 인터페이스), 스마트폰, 유용한 팁, 프레임워크, 테스트 등 총 5개의 주요 파트로 나눠져 있으며, 각 라이브러리는 먼저 명료한 설명을 제공해준 후에 라이브러리의 URL과 필요한 파일 등을 표 형식으로 보여주고 있다. 또한, 본문에서는 라이브러리를 사용할 때 주의해야 할 점이나 주요 기능의 사용법에 대한 설명이 이어진다.



각 라이브러리는 예제 코드와 자세한 코드 설명을 함께 수록하여 사용법을 명확하게 이해할 수 있도록 하였다. 또한, 주요 파라미터, 속성, 메소드, 이벤트, 옵션 등을 목록으로 제공하고 있어서 사용하고자 하는 라이브러리의 기능을 곧바로 적용할 수 있도록 하였다. 편리한 기능의 엄선된 라이브러리를 발견하는 즐거움과 라이브러리를 실제로 활용할 수 있는 장점을 실감할 수 있을 것이다.

 

이 책은 수많은 자바스크립트 라이브러리 중 자주 사용되는 것들을 엄선한 책이다. 원서가 일본어로 작성된 것이라서 우리나라의 개발 환경과 다소 차이가 나는 부분도 있겠지만, 이 책에서 설명하는 주요 라이브러리를 잘 이해하기만 한다면 우리의 환경에도 충분히 응용할 수 있을 것이라 판단한다. 우리나라 웹 개발자들에게 부디 유용하게 활용되길 바란다.
_ix

 

jQuery의 코드는 ‘무엇’을 ‘어떻게’ 하는가가 기본이다(그림 05). 그리고 그중에서도 ‘무엇’을 나타내는 $() 함수는 jQuery에 있어서 코드의 시작점이기도 하여 jQuery 학습의 기본 열쇠라고도 말할 수 있다.
_11

 

vTicker 플러그인은 리스트 009-02와 같이 <ul> 리스트를 준비해두기만 하면 바로 사용할 수 있다. 따라서 다른 플러그인에 의해 생성된 리스트에 대해 티커 효과를 추가하는 용도에도 쉽게 대응할 수 있다.
_62

 

uploadify는 jQuery 플러그인이지만, 파일 업로드 자체는 Flash 컴포넌트를 이용하고 있다. 따라서 브라우저에서 Flash Player가 동작 가능해야 한다. 또한, 업로드한 파일을 서버에 저장하기 위해 서버 사이드에서 동작하는 스크립트가 필요하다.
_163

 

LightBox는 볼티모어 거주의 웹 디자이너 로케쉬 드하카(Lokesh Dhakar)가 개발한 JavaScript 라이브러리다. 배경을 어둡게 하여 지정된 콘텐츠를 확대 표시하는 LightBox는 많은 웹 사이트에서 사용되고 있으며, 또한 유사한 기능의 라이브러리를 다수 공개하고 있다. Facebox도 LightBox와 비슷한 라이브러리다. 기능으로서는 간소한 팝업 표시밖에 없지만, 간단한 팝업을 표시할 때에 참으로 안성맞춤인 라이브러리다.
_236

 

flatiron 템플릿 엔진은 ‘plates’다. plates는 HTML에 데이터를 바인딩하도록 만들어져 있어 템플릿 엔진 고유의 특별한 작성법은 필요 없다. 리스트 076-02의 HTML은 서적의 리스트를 표시하는 예제다. 보다시피 속성도 포함하여 HTML로서 특수한 작성법이 필요 없다. 이 HTML에 대해 책 데이터를 바인딩하여 보자.
_403

1부 소개
시작에 앞서 - 이 책을 활용하기 위한 소개 _ 2
HTML5의 기본 _ 4
jQuery의 기본 _ 7

2부 UI
1 <ul> 리스트를 고급스런 메뉴로 꾸며주기 _ 20
2 구글 맵과 연계한 페이지 손쉽게 작성하기 _ 25
3 트위터에서의 트윗을 키워드 검색하기 _ 31
4 HTML 테이블로부터 막대 그래프나 꺾은 선 그래프 등 생성하기 _ 35
5 등급 바 만들기 _ 39
6 이미지/동영상 줌업 표시하기 _ 42
7 이미지 슬라이더 만들기 _ 46
8 페이지에 하테나(Hatena) 북마크나 트위터/페이스북 버튼 설치하기 _ 52
9 RSS 피드를 리스트 표시하기 _ 57
10 Ticker 식의 뉴스 목록 생성하기 _ 61
11 코드 리스트 예쁘게 표시하기 _ 64
12 폼에 검증 기능 부여하기 _ 69
13 정렬/페이징 대응의 고급스러운 그리드 테이블 작성하기 _ 76
14 파일 업로더 만들기 _ 80
15 책 넘기는 동작 구현하기 _ 85
16 일반 폼을 마법사(Wizard) 형식으로 꾸미기 _ 90
17 동영상 사이트의 콘텐츠 손쉽게 삽입하기 _ 95
18 MP3 파일의 재생 플레이어 설치하기 _ 97
19 멋진 셀렉트 박스 만들기 _ 101
20 HTML에 class 지정만으로 그리드 레이아웃 구현하기 _ 106
21 HTML에 class 지정만으로 멋진 컴포넌트 생성 _ 111
22 HTML에 class 지정만으로 동적 UI 구현 _ 119
23 풍선 도움말 형식의 툴팁 표시하기 _ 126
24 드래그 앤 드롭으로 편집 가능한 폴더 트리 표시하기 _ 130
25 모달 다이얼로그 표시하기 _ 136
26 슬라이드 다운(아코디언) 메뉴 표시하기 _ 140
27 세로쓰기 표시하기 _ 144
28 구글 캘린더 같은 달력 컴포넌트 _ 148
29 다채롭고 예쁜 그래프 그리기 _ 153
30 여러 파일을 지원하는 업로드 스크립트 _ 162
31 인터랙티브한 그래프 표시하기 _ 169
32 jQuery UI로 전형적인 UI를 간단한 코딩으로 구현하기 _ 174
33 아코디언 식의 패널 생성하기 _ 181
34 텍스트 박스에 자동 완성 기능 부여하기 _ 185
35 날짜 선택 상자 구현하기 _ 192
36 범용적인 대화 상자 표시하기 _ 196
37 슬라이더 만들기 _ 201
38 Resize 가능한 패널 만들기 _ 205
39 드래그 앤 드롭 조작 가능하게 하기 _ 209
40 클릭 앤 드래그 조작으로 선택 가능한 리스트 작성하기 _ 214
41 드래그 조작으로 요소의 정렬 순서 변경하기 _ 218
42 전개 가능한 메뉴 생성하기 _ 222
43 탭 패널 만들기 _ 226
44 툴팁 표시하기 _ 230
45 LightBox 형식으로 모서리가 둥근 이미지 팝업 만들기 _ 235
46 고기능 그리드 표시하기 _ 241
47 여러 메시지를 정렬하여 팝업 표시하기 _ 248
48 조작 가능한 손잡이 방식의 그래프를 그릴 수 있는 라이브러리 _ 252
49 불과 6KB인 날짜 선택기 _ 256
50 커서 부근에 로딩 아이콘 표시하기 _ 261
51 간단히 팝업을 구현한 jQuery 플러그인 _ 265
52 폼 요소의 모양 개선하기 _ 269

3부 스마트폰
53 아이폰 형태의 UI 스마트폰 사이트 만들기 _ 274
54 다채로운 애니메이션으로 화면 전환하기 _ 281
55 모바일에 특화된 jQuery 호환 라이브러리로 모바일 사이트 만들기 _ 288
56 스마트폰 전용 이벤트 쉽게 구현하기 _ 296
57 jQuery 호환 라이브러리 Zepto.JS를 사용한 모바일 사이트 만들기 _ 300
58 Canvas를 사용하여 Flash처럼 움직이는 콘텐츠 만들기 _ 308
59 HTML5를 사용하여 스마트폰 게임 만들기 _ 311
60 모던 브라우저용으로 최적화된 jQuery 호환 라이브러리 만들기 _ 318

4부 유용한 팁
61 JavaScript로 쿠키 쉽게 조작하기 _ 322
62 짧고 안전한 고성능 코드 작성하기 _ 325
63 객체지향 코드 작성하기 _ 333
64 처리를 짧게 작성하기 _ 339
65 HTML5 + JavaScript 기반으로 게임 만들기 _ 343
66 브라우저 상에서 로컬 영역에 스토리지 만들기 _ 347
67 SVG, VML의 그래픽 라이브러리 _ 351
68 입력 보완 라이브러리 _ 355
69 JavaScript 기반의 데이터베이스 _ 361

5부 프레임워크
70 HTML 자체를 템플릿으로 동적 표시 실현하기 _ 368
71 뷰와 컨트롤러를 조립하여 DOM 업데이트 코드 생략하기 _ 374
72 Node.js로 웹 애플리케이션 만들기 _ 379
73 프레임워크를 사용하여 Node.js로 효율적인 웹 애플리케이션 만들기 _ 384
74 RIA(Rich lnternet Application) 개발하기 _ 389
75 고급스런 화면 레이아웃 만들기 _ 393
76 심플하고 가벼운 Node.js용 프레임워크 _ 399
77 URL에 따라 처리 분할하기 _ 405
78 각종 라이브러리를 사용하여 고기능 웹 애플리케이션 구축하기 _ 410
79 데이터를 키/값의 쌍으로 캐시하기[YUI] _ 416
80 JSONP 등 외부 리소스로부터 데이터 검색하기[YUI] _ 420
81 드래그 앤 드롭 구현하기[YUI] _ 423
82 웹 페이지의 새로고침 없이 화면 전환 이력 취급하기[YUI] _ 428
83 이미지를 필요한 시기에 로드하기[YUI] _ 432
84 탭 UI 구현하기[YUI] _ 435
85 대규모 프레임워크에서 Ajax 애플리케이션 만들기 _ 438
86 MVC 패턴으로 애플리케이션 구축하기 _ 449
87 Backbone.js의 Model을 조작하여 이벤트 취급하기 _ 460
88 Backbone.js의 Collection을 조작하여 이벤트 취급하기 _ 464
89 MVVM 패턴으로 애플리케이션 구축하기 _ 469
90 LINQ 형식으로 컬렉션 조작하기 _ 477
91 linq.js의 Enumerable과 jQuery를 상호 변환하기 _ 485
92 CoffeeScript로 MVC 프레임워크 사용하기 _ 488
93 CoffeeScript로 동적인 애플리케이션 만들기 _ 492
94 프레임워크를 사용하여 개발을 편하게 하기 _ 497
95 MVC로 애플리케이션 디자인하기 _ 503
96 LINQ 형식으로 Observer 패턴 처리하기 _ 509
97 DOM 이벤트 발생 시에 하려는 처리를 쿼리 형식의 메소드 체인으로 정의하기 _ 517
98 비동기 처리를 쿼리 형식의 메소드 체인으로 처리하기 _ 522
99 외부 파일, 웹 서비스로부터 가져온 템플릿과 객체 바인딩하기 _ 527
100 각종 컬렉션 조작 수행하기 _ 534
101 템플릿과 객체로부터 문자열 생성하기 _ 539

6부 테스트
102 서버를 만들어 각 브라우저에서 테스트하기 _ 544
103 assert, should, expect의 세 가지 표현 방법으로 테스트하기 _ 549
104 다양한 브라우저 환경에서 JavaScript의 테스트가 가능 _ 555
105 Node.js와 브라우저에서도 간단하게 테스트 작성이 가능 _ 560
106 Stub 및 Mock, 가짜 객체를 취급하는 라이브러리 _ 566
107 다양한 환경에서의 테스트 결과 관리하기 _ 573
108 RSpec식의 구문으로 BDD용의 테스트 코드 작성하기 _ 580
109 Jasmine의 Spy 기능으로 테스트 더블 만들기 _ 588
110 Stub, Mock, Spy 같은 테스트 더블 만들기 _ 593
111 테스트 코드를 실행하여 브라우저로 결과 확인하기 _ 605