책

소프트웨어 개발분야에서 자바스크립트 코딩은 매우 까다롭고 유지보수하기 어려운 작업 영역이었다. 더욱이, 인터넷 애플리케이션 분야에 풍부한 사용자 경험이 중요한 화두로 등장하면서 클라이언트에 보다 많이 기능들이 요구되고 있고, 이 때문에 클라이언트 개발의 복잡도는 나날이 증가하였다.
이런 문제를 해결하기 위해 수많은 자바스크립트 라이브러리들이 등장하였지만, jQuery만큼 단시간 내에 크게 주목을 받는 라이브러리는 없었다. 2006년에 등장한 jQuery는 등장한 지 채 2년이 되지 않아 프로토타입(prototype)과 도조(Dojo)의 인기를 넘어 섰다. jQuery를 접해 본 사람들은 충분히 그럴만하다고 입을 모은다.

jQuery는 수십 줄의 자바스크립트 코드를 간편하게 단 몇 줄의 코드로 코딩할 수 있으면서도 작고 빠르게 유지할 수 있는 장점을 가지고 있다. 또한, 작고 가벼우면서 동시에 지속적으로 확장할 수 있는 플러그인 구성을 가지고 있어, Ajax 사이트를 손쉽게 그리고 강력하게 구현할 수 있도록 해준다.
이 책은 jQuery의 최신 버전인 1.2.x 버전에 대한 내용을 반영하고 있으며, 최초 설치부터 기본적인 구성과 활용 방법들을 다양한 예제를 통해 설명하고 있다. jQuery를 적용하여 진행하는 웹 개발에 필요한 대부분의 내용들(셀렉터와 DOM, 이벤트와 다양한 효과, Ajax 프로그래밍, 폼(Form), 자동완성, 입력 검사기 등)을 함축적으로 다루고 있어 입문서이면서도 활용도가 높은 코드들을 제공한다. 이 책에서 제공하는 예제와 소스 파일의 전체 내용은 이 책의 전용 웹 사이트인 http://book.learningjquery.com에서 바로 확인해 볼 수 있으며, 최신 버전에 대한 내용도 꾸준히 업데이트하고 있다.

책의 후반부는 실전에서도 바로 활용해 볼 수 있는 고급 주제들을 다루고 있으며, 플러그인 활용과 개발 방법 등도 설명한다. 덧붙여, 자바스크립트, XHTML, CSS에 관한 관련자료와 자바스크립트 클로저(Closure) 등을 부록으로 정리하여, 입문하는 사람들을 위해 배려도 아끼지 않고 있다.

jQuery, 왜 좋은가

최근, 동적인 HTML에 대한 관심이 다시 늘어나면서, 수많은 자바스크립트 라이브러리들이 등장하였다. 어떤 라이브러리들은 앞서 이야기한 기능들 중 한두 가지 기능에 특화되어 있으며, 어떤 것은 가능한 모든 동작과 애니메이션을 제공하려 하고 있으며, 또 몇몇 라이브러리들은 이런 모든 것을 묶어서 제공하고 있다. 다소 역설적으로 들릴 수 있겠지만, jQuery는 앞서 이야기한 포괄적인 기능들을 다루면서도 최대한 컴팩트하게 유지하기 위해 다음과 같은 전략을 가지고 있다.

CSS에 대한 지식을 최대한 활용. jQuery는 CSS 셀렉터로 페이지 요소의 위치를 찾아내는 메커니즘을 기반으로 하고 있어, 도큐먼트의 구조를 명료하면서도 읽기 쉬운 형식으로 표현할 수 있도록 한다.
확장 지원. jQuery는 피처 크리프(feature creep)를 피하기 위해 보편적이지 않은 기능은 플러그인으로 이관하였다. 새로운 플러그인을 만드는 것은 그리 어렵지 않으며, 문서화가 잘 되어 있고, 다른 사람들이 개발한 창의적인 산출물들과 다양하고 유용한 모듈들의 도움을 받아 개발할 수 있다. jQuery는 기본적으로 플러그인 아키텍처를 가지고 있어 필요한 기능을 선택적으로 사용할 수 있으며, 더 작은 라이브러리를 필요로 한다면 이 플러그인 아키텍처 자체를 제거하여 더 가볍게 사용할 수도 있다.
브라우저의 차이로부터 해방. 불행히도 실제 웹 개발에서 브라우저는 표준과 약간씩 다른 고유한 특징들을 가지고 있다. 웹 애플리케이션 개발의 상당 부분이 바로 플랫폼 별로 다른 기능들을 처리하는 데 할당된다. 브라우저는 끊임없이 발전하기 때문에 브라우저 중립적인 고급 기능을 개발하는 것이 거의 불가능하지만, jQuery는 추상화된 레이어를 제공함으로써 일상적인 작업들을 일반화하고, 코드의 크기를 줄이며, 극도로 단순하게 개발할 수 있도록 해준다.
언제나 집합을 가지고 작업. 우리는 jQuery에게 "'collapsible'이란 이름의 스타일 클래스를 가진 요소들을 찾아 감추기를 수행하라"라고 명령하는 방식으로 접근한다. 각각의 개별 요소를 처리하기 위해 루프를 돌릴 필요가 없다. 요소를 감추는 기능을 수행하는 .hide() 메소드를 각 개별 요소들에 적용하는 대신 객체 집합에 적용한다. 이것을 묵시적 순환(implicit iteration) 기법이라고도 하는데, 루프를 구성할 필요가 없으므로 코드 양을 많이 줄여준다.
여러 동작을 한 줄에 쓴다. 임시 변수 사용을 최소화하거나 불필요한 반복을 피하기 위해, jQuery가 제공하는 메소드 체인(chaining)이라는 프로그래밍 패턴을 활용할 수 있다. 이것은 객체를 조작한 결과가 객체가 되어, 다음 조작을 적용할 수 있게 된다는 것을 의미한다.

이러한 전략으로 jQuery 패키지를 매우 작게 유지(압축형태로 대략 20K 정도)하고 있으며 동시에 개발자의 코드 역시 작게 유지할 수 있도록 하는 기법들을 제공하고 있다.
라이브러리의 간결함은 자체 설계 때문이기도 하지만, jQuery 관련 프로젝트에 대한 주변의 매우 왕성한 커뮤니티 활동 역시 간결함을 유지하는 데 큰 공헌을 하고 있다. jQuery 사용자들은 플러그인 개발뿐만 아니라 라이브러리의 핵심 부분을 개선하기 위해 모여서 토론하고 있다.
이렇게 유연하고 강건한 시스템에 기울이는 많은 엔지니어들의 엄청난 노력에도 불구하고, 최종 산출물은 모든 사람들에게 무료로 제공하고 있다. 이 오픈소스 프로젝트는 GNU 퍼블릭과 MIT의 두 가지 라이선스로 제공되고 있다.

<독자 추천 서평>

저는 웹 기술, CSS 그리고 자바스크립트에 대한 많은 책들을 읽었습니다. 각 분야의 최고의 책들 조차 데이터 테이블을 표시하고 동작하는 스크립팅에 대한 설명이 부족해서 항상 불만이었는데, 이런 관점에서 볼 때, 이 책은 내가 읽어온 다른 모든 책들의 내용을 능가하고 있습니다. 데이터 출력을 많이 다루는 웹 리포팅 툴 디자이너의 입장에서 유일하게 이 책에만 별 다섯 개를 주고 싶군요.
- 브레트 메케이, 아마존 독자

이 책을 읽으면서 jQuery를 가지고 자바스크립트 개발의 세계에 뛰어들고 싶어하는 사람들을 위한 정말 뛰어난 교재라는 생각이 들었습니다. 또한 저처럼 숙련된 jQuery 개발자들도 미처 생각해 보지 못한 기법들을 발견할 수 있는 책입니다. 책을 모두 읽고 나서 코드를 좀 더 효과적으로 만들 수 있는 방법들을 알게 되었습니다.
- 메튜 배트첼더, borkweb.com

저는 25권의 컴퓨터 책을 썼으며, 200권의 책을 출판했는데, 이 책이야말로 정말 보물이라고 생각합니다. 이 책의 저자들은 여러분이 가진 지식을 기반으로 많은 것을 이룰 수 있도록, 정말 멋진 방법으로 jQuery를 가르쳐 줍니다. jQuery가 어떻게 동작하는지 보여주기 위해 좋은 예제들을 제공하고 있으며, jQuery를 간편하고 쉽게 다루는 방법들을 낱낱이 밝혀 줍니다. 이 책의 저자들은 jQuery에 대해 정말 심도 깊은 이해를 가지고 있는 것 같습니다.
- 미치 웨이트, Waite Group Press 전 발행인

이 책은 jQuery를 사용하는 사람들에게 정말 좋은 자료입니다. 저는 벌써 jQuery와 텍스트패턴(Textpattern) 라이브러리를 이용해서 어떻게 포토 갤러리를 꾸밀 수 있는지 알게 되었습니다. 말이 필요 없습니다. 만일 여러분이 jQuery에 대한 책을 찾고 있다면, 바로 이 책이 jQuery를 시작하기에 가장 좋은 책입니다.
- 나탄 스미스, 아마존 독자

오늘날 월드 와이드 웹은 매우 역동적인 환경이며, 사이트의 기능과 스타일 모두에 대한 사용자들의 기대치는 상당히 높다.
흥미롭고, 인터랙티브한 사이트를 구축하려는 많은 개발자들이 일반적인 작업들을 자동화하고 복잡한 작업을 단순하게 하기 위해 jQuery와 같은 자바스크립트 라이브러리를 사용하기 시작하고 있다. jQuery가 폭넓은 지지를 받는 주요한 이유는 개발에 필요한 다양한 기능을 폭넓게 제공하기 때문이다.

jQuery는 매우 다양한 기능을 가지고 있기 때문에 어디서부터 시작해야 할지 금방 알아차리기가 쉽지 않다. jQuery는 설계의 일관성과 균형을 유지하고 있으며, 대부분의 개념은 HTML의 구조와 캐스케이딩 스타일 시트(CSS, Cascading Style Sheets)로부터 나온 것이다. 다수의 웹 개발자들이 자바스크립트 자체보다 이러한 웹 기술들에 대한 경험을 훨씬 더 많이 가지고 있기 때문에, jQuery 라이브러리는 프로그램 경험이 많지 않은 디자이너가 접근하기에 용이하도록 설계되어 있다. 우리는 1장의 초반부에서 단 3줄의 코딩만으로 훌륭하게 동작하는 jQuery 프로그램을 작성해볼 것이다. 더불어 jQuery는 경험이 많은 프로그래머들에게는 개념들의 일관성을 유지하는 데 큰 도움을 준다. 이러한 내용들은 1장 이후에서 차근차근 살펴볼 것이다.
예제들을 가지고 라이브러리의 동작을 설명하기 전에, 우선 왜 jQuery가 필요한지 살펴보자.
jQuery란 무엇인가
jQuery 라이브러리는 일반적인 웹 스크립팅에 폭넓게 사용될 수 있는 추상 계층(abstraction layer)을 제공하므로, 스크립팅에서 필요로 하는 거의 모든 상황에 유용하게 활용할 수 있다. jQuery가 가지고 있는 확장성과 사용 가능한 모든 경우들을 한 권의 책에서 모두 설명하기란 불가능하다. 새로운 기능을 가진 플러그인들이 계속 개발되어 추가되고 있기 때문이다.
따라서, jQuery에 대해 꼭 알고 있어야 할 핵심 기능들을 중심으로 살펴보자.

? 페이지 일부분에 접근. 만일 여러분이 자바스크립트 라이브러리를 사용하지 않는다면, 도큐먼트 객체 모델(DOM) 트리에 접근하고, HTML 문서 구조의 특정 영역을 탐색하기 위해 상당히 많은 양의 코드를 작성해야만 한다. jQuery는 문서의 한 부분의 내부를 탐색 혹은 조작하기 위한 명료하고 효과적인 셀렉터 메커니즘을 제공한다.
? 페이지의 보여지는 모습 변경하기. CSS가 도큐먼트가 렌더링되어 보여지는 방식을 결정하는 매우 효과적이고 강력한 기법이긴 하지만, 브라우저들이 동일한 표준을 제공하지 않기 때문에 코드가 길어지는 경우가 많다. jQuery는 브라우저와 상관없이 동일한 표준을 제공하므로, 브라우저 간의 차이를 극복할 수 있게 해준다. 또한, jQuery는 페이지가 렌더링된 이후에도 클래스를 변경하거나 도큐먼트의 일부분의 스타일을 개별적으로 바꿀 수 있도록 해준다.
? 페이지의 컨텐트 변경하기. jQuery는 간단한 코드로 외관뿐만 아니라 도큐먼트 내용 자체를 바꿀 수 있다. 텍스트를 바꿀 수 있고, 이미지를 추가하거나 교체하고, 리스트의 순서를 바꾸거나 혹은 HTML 전체 구조를 완전히 새로 만들거나 확장할 수 있다 ? 이 모든 것이 간단한 API로 가능하다.
? 페이지와 사용자 간 상호작용 처리. 상호작용을 적절하게 제어할 수 없다면, 정교하고 강력한 기능이 별로 쓸모없게 된다. jQuery 라이브러리는 사용자의 링크 클릭 등을 포함한 광범위한 이벤트를 가로채어 처리하는 세련된 방식을 제공하기 때문에 HTML 자체에 이벤트 핸들러를 추가하여 HTML을 헤집어 놓을 필요가 없다. 동시에, 이벤트 핸들링 API는 웹 개발자를 괴롭히는 브라우저 간의 불일치 문제도 깔끔하게 해결해 준다.
? 페이지에 애니메이션 추가하기. 디자이너는 효과적인 상호작용을 제공하기 위해 사용자에게 시각적인 피드백을 제공해야 한다. jQuery 라이브러리는 페이드(fade), 와이프 (wipe)와 같은 일련의 효과 기능들을 제공할 뿐만 아니라 새로운 효과를 만들 수 있는 툴킷을 제공하고 있다.
? 페이지를 새로고침하지 않고 서버로부터 정보를 가져오기. Ajax로 알려진 코드 패턴과 부가적인 기능은 웹 개발자로 하여금 적절하게 응답하고, 기능이 풍부한 사이트를 만들 수 있도록 해준다. jQuery 라이브러리는 브라우저에 종속적이지 않은 Ajax 기능을 제공하므로, 개발자가 서버 측 기능에만 집중할 수 있도록 해준다.
? 일반적인 자바스크립트 작업 단순화. jQuery의 모든 도큐먼트 처리 기능에는 순환과 배열 조작과 같은 자바스크립트 확장기능이 추가로 제공된다.

- 1장 중에서