jQuery 작고 강력한 자바스크립트 라이브러리

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

jQuery는 매우 다양한 기능을 가지고 있기 때문에 어디서부터 시작해야 할지 금방 알아차리기가 쉽지 않다. jQuery는 설계의 일관성과 균형을 유지하고 있으며, 대부분의 개념은 HTML의 구조와 캐스케이딩 스타일 시트(CSS, Cascading Style Sheets)로부터 나온 것이다. 다수의 웹 개발자들이 자바스크립트 자체보다 이러한 웹 기술들에 대한 경험을 훨씬 더 많이 가지고 있기 때문에, jQuery 라이브러리는 프로그램 경험이 많지 않은 디자이너가 접근하기에 용이하도록 설계되어 있다. 우리는 1장의 초반부에서 단 3줄의 코딩만으로 훌륭하게 동작하는 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장 중에서

jQuery, 왜 좋은가

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

* CSS에 대한 지식을 최대한 활용. jQuery는 CSS 셀렉터로 페이지 요소의 위치를 찾아내는 메커니즘을 기반으로 하고 있어, 도큐먼트의 구조를 명료하면서도 읽기 쉬운 형식으로 표현할 수 있도록 한다.

* 확장 지원. jQuery는 피처 크리프(feature creep)를 피하기 위해 보편적이지 않은 기능은 플러그인으로 이관하였다. 새로운 플러그인을 만드는 것은 그리 어렵지 않으며, 문서화가 잘 되어 있고, 다른 사람들이 개발한 창의적인 산출물들과 다양하고 유용한 모듈들의 도움을 받아 개발할 수 있다. jQuery는 기본적으로 플러그인 아키텍처를 가지고 있어 필요한 기능을 선택적으로 사용할 수 있으며, 더 작은 라이브러리를 필요로 한다면 이 플러그인 아키텍처 자체를 제거하여 더 가볍게 사용할 수도 있다.

* 브라우저의 차이로부터 해방. 불행히도 실제 웹 개발에서 브라우저는 표준과 약간씩 다른 고유한 특징들을 가지고 있다. 웹 애플리케이션 개발의 상당 부분이 바로 플랫폼 별로 다른 기능들을 처리하는 데 할당된다. 브라우저는 끊임없이 발전하기 때문에 브라우저 중립적인 고급 기능을 개발하는 것이 거의 불가능하지만, jQuery는 추상화된 레이어를 제공함으로써 일상적인 작업들을 일반화하고, 코드의 크기를 줄이며, 극도로 단순하게 개발할 수 있도록 해준다.

* 언제나 집합을 가지고 작업. 우리는 jQuery에게 "'collapsible'이란 이름의 스타일 클래스를 가진 요소들을 찾아 감추기를 수행하라"라고 명령하는 방식으로 접근한다. 각각의 개별 요소를 처리하기 위해 루프를 돌릴 필요가 없다. 요소를 감추는 기능을 수행하는 .hide() 메소드를 각 개별 요소들에 적용하는 대신 객체 집합에 적용한다. 이것을 묵시적 순환(implicit iteration) 기법이라고도 하는데, 루프를 구성할 필요가 없으므로 코드 양...jQuery, 왜 좋은가

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

* CSS에 대한 지식을 최대한 활용. jQuery는 CSS 셀렉터로 페이지 요소의 위치를 찾아내는 메커니즘을 기반으로 하고 있어, 도큐먼트의 구조를 명료하면서도 읽기 쉬운 형식으로 표현할 수 있도록 한다.

* 확장 지원. jQuery는 피처 크리프(feature creep)를 피하기 위해 보편적이지 않은 기능은 플러그인으로 이관하였다. 새로운 플러그인을 만드는 것은 그리 어렵지 않으며, 문서화가 잘 되어 있고, 다른 사람들이 개발한 창의적인 산출물들과 다양하고 유용한 모듈들의 도움을 받아 개발할 수 있다. jQuery는 기본적으로 플러그인 아키텍처를 가지고 있어 필요한 기능을 선택적으로 사용할 수 있으며, 더 작은 라이브러리를 필요로 한다면 이 플러그인 아키텍처 자체를 제거하여 더 가볍게 사용할 수도 있다.

* 브라우저의 차이로부터 해방. 불행히도 실제 웹 개발에서 브라우저는 표준과 약간씩 다른 고유한 특징들을 가지고 있다. 웹 애플리케이션 개발의 상당 부분이 바로 플랫폼 별로 다른 기능들을 처리하는 데 할당된다. 브라우저는 끊임없이 발전하기 때문에 브라우저 중립적인 고급 기능을 개발하는 것이 거의 불가능하지만, jQuery는 추상화된 레이어를 제공함으로써 일상적인 작업들을 일반화하고, 코드의 크기를 줄이며, 극도로 단순하게 개발할 수 있도록 해준다.

* 언제나 집합을 가지고 작업. 우리는 jQuery에게 "'collapsible'이란 이름의 스타일 클래스를 가진 요소들을 찾아 감추기를 수행하라"라고 명령하는 방식으로 접근한다. 각각의 개별 요소를 처리하기 위해 루프를 돌릴 필요가 없다. 요소를 감추는 기능을 수행하는 .hide() 메소드를 각 개별 요소들에 적용하는 대신 객체 집합에 적용한다. 이것을 묵시적 순환(implicit iteration) 기법이라고도 하는데, 루프를 구성할 필요가 없으므로 코드 양을 많이 줄여준다.

* 여러 동작을 한 줄에 쓴다. 임시 변수 사용을 최소화하거나 불필요한 반복을 피하기 위해, jQuery가 제공하는 메소드 체인(chaining)이라는 프로그래밍 패턴을 활용할 수 있다. 이것은 객체를 조작한 결과가 객체가 되어, 다음 조작을 적용할 수 있게 된다는 것을 의미한다.

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