소프트웨어 개발분야에서 자바스크립트 코딩은 매우 까다롭고 유지보수하기 어려운 작업 영역이었다. 더욱이, 인터넷 애플리케이션 분야에 풍부한 사용자 경험이 중요한 화두로 등장하면서 클라이언트에 보다 많이 기능들이 요구되고 있고, 이 때문에 클라이언트 개발의 복잡도는 나날이 증가하였다.

이런 문제를 해결하기 위해 수많은 자바스크립트 라이브러리들이 등장하였지만, 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의 두 가지 라이선스로 제공되고 있다.

조나단 채퍼 Jonathan Chaffer

미시건 그랜드 래피드에 위치한 '스트럭처 인터랙티브' 사의 기술이사로, 다양한 기술을 사용하여 진행하는 웹 개발 프로젝트를 관리/감독하고 있으며, 동시에 매일 지속적으로 협업하면서 실제 개발작업도 하고 있다. 드루팔(Drupal) CMS에 자바스크립트 프레임워크로 jQuery를 선정하여 적용하는 등 오픈소스 커뮤니티에서도 왕성하게 활동하고 있다. 드루팔 사이트에서 구조적 컨텐츠를 관리하는 모듈로 널리 사용되는 ‘컨텐츠 컨스트럭션 키트(Content Construction Kit)'의 제작자이기도 하며, 드루팔의 메뉴 시스템과 개발자 API 레퍼런스를 담당하는 책임자 역할도 맡고 있다.

칼 스웨드버그 Karl Swedberg

미시건 주 그랜드 래피드에 있는 '스트럭처 인터랙티브' 사의 웹 개발자로 시멘틱 HTML, 잘 구성된 CSS 그리고 간결한 자바스크립트 개발 등 웹표준과 연관된 개발을 주로 진행하고 있다. 웹 개발에 투신하기 전까지 카피 편집자, 고등학교 영어교사 그리고 커피매장 주인이었다. 아직도 식지 않는 기술에 대한 그의 열의는 1990년대 초반 워싱턴 주 레드몬드에 있는 마이크로소프트에서 일을 하면서 시작되었다. 사진, 가라데, 영문법 그리고 아버지의 역할에도 많은 관심을 가지고 있다.

이승준

이승준 지난 14년간 C/C++과 Java 개발을 주로 해왔으며, 현재 ㈜일래스틱웨어의 대표로 기업용 웹 2.0 프레임워크를 지향하는 애플리케이션 프레임워크 제품인 EnRichClient를 제작하고 공급하는 일을 하고 있다.

박용우

국내에 닷넷 관련 책자가 없던 시기에 최초로 C#을 소개하는 책을 번역하면서 .NET과 인연을 맺게 되었다. 지금까지 닷넷 경력만 약 10년이라는 경험을 이용해 국내 SI 업체나 재직자들을 대상으로 교육을 하고 있다. RIA와 Computer Graphics 그리고 분산 프로그래밍과 보안 분야에 관심을 가지고 있으며, 현재는 (주)쌍용정보통신 교육센터에서 보안이나 닷넷에 대한 강의를 맡고 있다.

1. 본격적인 시작에 앞서
jQuery란 무엇인가
jQuery, 왜 좋은가
첫 번째 jQuery 도큐먼트

2. 셀렉터 - 원하는 노드를 얻는 방법
도큐먼트 객체 모델(Document Object Model)
$() 팩토리 함수
CSS 셀렉터들
XPath 셀렉터들
커스텀 셀렉터들
DOM 순회 메서드

3. 이벤트 – 트리거 사용하는 방법
페이지 로드 시점에 작업 수행하기
기본 이벤트들
합성 이벤트
이벤트를 제한하고 마무리하기

4. 효과들 – 액션을 멋지게 추가하는 방법
인라인 CSS 변경
기본적인 숨김과 보이기
효과와 속도
다중 효과
동시효과 대 연속효과
핵심정리
요약

5. DOM 다루기 — 동적으로 페이지 변경하는 방법
속성 조작하기
새로운 요소 삽입하기
요소 이동
요소 감싸기
요소 복사하기
DOM 조작 메서드 핵심정리
요약

6. AJAX – 최신 기법 적용하기
요청한 데이터 로드하기
데이터 형식 선택하기
서버로 데이터 전달하기
요청이 처리중임을 표시하기
AJAX와 이벤트들
보안 제약사항들
요약

7. 테이블 다루기
정렬하기
페이지네이션
완성된 코드
향상된 행 스트라이프 적용하기
행 하이라이트 적용하기
툴팁
감추기와 펼치기
필터링
완성된 코드
요약

8. 폼과 함수
폼 스타일의 단계적 기능 향상
폼 입력 데이터 검증
체크박스 다루기
완성된 코드
필드를 포함한 플레이스홀더 텍스트
AJAX 자동완성
완성된 코드
입력 마스킹
수치계산
항목 삭제하기
배송 정보 편집하기
완성된 코드
요약

9장. 셔플러와 로테이터
헤드라인 로테이터
이미지 회전 전환
이미지 확대
완성된 코드
요약

10장. 플러그인
플러그인 사용법
널리 알려진 플러그인들
플러그인 문서 찾아보기
플러그인 개발
요약

부록A. 온라인 리소스
부록B. 개발도구
부록C. 자바스크립트 클로저


22쪽 그림 위 코드에서
 .sub-level{backgournd-coor ---> .sub-level {background-color 

27쪽 가운데쯤 코드에서
 .highlight {fontweight: ---> .highlight {font-weight: 


  Edit page Add Comment Page Info My Prefs Log in
This page (revision-1) last changed on 19:33 17-Apr-2009 by unknown.
 

JSPWiki v2.4.87