프로토타입과 스크립타큘러스

크리스토피 포트누브 저자(글) · 박영록 번역

인사이트 · 2008년 07월 25일

책 소개

라이브러리를 쉽게 사용할 수 있는 실용주의 레퍼런스북!

이 책은 자바스크립트 개발에서 필수적인 라이브러리가 된 프로토타입(Prototype)과 스크립타큘러스(script.aculo.us)를 소개한다. 프로토타입(Prototype)은 동적인 웹 애플리케이션 개발을 도와주는 자바스크립트 라이브러리다. 스크립타큘러스는 프로토타입의 확장 라이브러리 모음으로, 사용자 인터페이스 중심적인 기능들을 멋지게 보여준다.

본문은 사례 중심의 튜토리얼, 프로토타입 레퍼런스, 스크립타큘러스 레퍼런스 등 3부분으로 나뉘어져 있다. 실용주의 관점인 만큼 라이브러리를 쉽게 사용할 수 있는 예제들을 제시하였다. 이 예제들은 단순히 기능 하나만 보여주는 것이 아니라 그 기능이 왜 필요한지, 어떻게 써야 잘 쓰는 것인지, 어떻게 조합해서 쓰는 것이 좋은지를 보여준다.

그리고 어떤 단점이 있으며, 그런 단점들을 어떻게 피해갈 수 있는지에 대해서도 설명한다. 완성된 튜토리얼, 실제 상황과 그에 대한 해법, 부가 팁과 꼼수, 권장 사용 방법과 전방위적인 조언들이 모두 담겨 있다. 초급자들은 프로토타입과 스크립타큘러스의 기본 원리를 이해할 수 있고, 고급 사용자들은 모르고 지나쳤던 부분을 확인할 수 있을 것이다.

작가정보

저자(글) 크리스토피 포트누브

지은이 크리스토피 포트누브 Christophe Porteneuve

10년 이상 IT R&D에 종사했고 웹 개발의 선구자 중 한 명이다. 2005년부터 루비와 레일스에 관여하기 시작했고, 2006년부터 프로토타입과 스크립타큘러스에 참여하면서 많은 공헌을 했다. 프로토타입의 공식 웹사이트에서도 중추적인 역할을 맡고 있고 메일링 리스트와 프로토타입 코어 멤버에서 영향력이 큰 개발자다.

옮긴이 박영록

웹 프로그래머로 NHN, 오픈마루 등에서 일했다. 역서로 『Head Rush Ajax』를 출간한 적이 있고 자바스크립트에 관심이 많다. 지금은 회사라는 조직에 대한 대안을 찾기 위해 뜻이 맞는 사람들과 새로운 회사를 창업해서 일하고 있다.

번역 박영록

목차

• 1장 소개
  
  1부 프로토타입 Prototype
  
  2장 프로토타입을 발견하다
  2.1 프로토타입은 무엇인가? 그리고 또 무엇은 아닌가?
  2.2 프로토타입을 프로젝트에서 사용하려면
  2.3 프로토타입을 사용하면 자바스크립트가 어떻게 변하나?
  2.4 프로토타입의 용어와 개념
  2.5 근데 프로토타입이 뭐지?
  2.6 이 책의 프로토타입 코드 예제를 실행하는 법
  
  3장 달러 명령 빨리 배우기
  3.1 단축명령은 짧아야 한다
  3.2 $를 이용해서 엘리먼트 빨리 가져오기
  3.3 $w, 배열 상수가 지루하니까
  3.4 $$ 스타일로 찾아가기
  3.5 $A, 컬렉션 일반화
  3.6 $F는 필드 전문가
  3.7 $H는 대상을 해시로 만든다
  3.8 $R로 범위 다루기
  
  4장 스테로이드 맞은 자바스크립트
  4.1 일반적인 객체 다루기
  4.2 적절한 함수 바인딩
  4.3 함수는 사실 더 많은 일을 할 수 있다
  4.4 숫자
  4.5 문자열
  4.6 배열
  4.7 JSON 전폭 지원
  
  5장 Enumerable을 통한 컬렉션의 고급 활용
  5.1 핵심 메서드: each로 순회하기
  5.2 컬렉션에서 일반적인 정보 알아내기
  5.3 필터를 활용해서 원소 찾기
  5.4 그룹 짓기와 컬렉션 합치기
  5.5 컬렉션 파생과 값 계산하기
  5.6 바로 주문하기: 극값 가져오기와 사용자 정의 정렬
  5.7 임의의 컬렉션을 배열로 바꾸거나 디버깅용 문자열로 바꾸기
  5.8 Enumerable은 실제로는 모듈이다
  
  6장 일관된 이벤트 처리
  6.1 이벤트
  6.2 이벤트 명예의 전당
  6.3 폼 관련 내용 변화에 반응하기
  
  7장 DOM을 가지고 노는 것은 정말 재미있어!
  7.1 DOM 엘리먼트 확장하기
  7.2 Element, 여러분의 새로운 친구
  7.3 Selector
  7.4 DOM 관련 코드 디버깅하기
  
  8장 폼 관리
  8.1 더 나은 사용자 인터페이스를 위해
  8.2 폼 필드 찾기
  8.3 Ajax로 폼 전송하기
  8.4 폼과 필드 변화 관찰하기
  
  9장 Ajax가 이렇게 쉽다니!
  9.1 시작하기 전에
  9.2 달려보자: Ajax.Request
  9.3 바로 연결하기: Ajax.Updater
  9.4 기다리기: Ajax.PeriodicalUpdater
  9.5 Ajax 동작 모니터링하기: Ajax.Responders
  9.6 Ajax 디버깅하기
  9.7 Ajax는 해롭다? 접근성과 인간공학적 측면에 대한 고려
  
  10장 더 유용한 도우미 객체
  10.1 해시에 값 저장하기
  10.2 어떤 타입이든 다 범위로 만들 수 있어!
  10.3 중복 실행의 위험 없이 주기적으로 실행하기
  10.4 편리한 템플릿
  10.5 현재 브라우저 알아내기와 프로토타입 라이브러리
  
  11장 성능 문제
  11.1 엘리먼트 확장과 $ 함수
  11.2 순회 대 일반 루프
  11.3 쓸모없는 이벤트 핸들러
  11.4 알아둘 만한 최신 속도 개선 사항
  11.5 작은 것이 아름답다
  
  12장 종합 예제
  12.1 깔끔한 작업 목록 만들기
  12.2 바닥 깔기
  12.3 40줄만 있으면 돼: 자바스크립트 코드
  
  2부 스크립타큘러스 script.aculo.us
  
  13장스크립타큘러스를 발견하다
  13.1 스크립타큘러스의 모듈
  13.2 스크립타큘러스 사용하기
  
  14장 시각 효과
  14.1 이 효과들은 뭐고 왜 써야 하지?
  14.2 핵심 효과
  14.3 효과에 뛰어들기
  14.4 조합 효과
  14.5 또 다른 멋진 기능: 효과 대기열
  14.6 효과 도우미
  14.7 자신만의 효과 만들기
  
  15장 드래그 앤 드롭
  15.1 이리저리 드래그하기
  15.2 어떻게 시작하고 어떻게 진행하고 어떻게 끝낼지 제어하기
  15.3 유령 만들기
  15.4 드래그와 스크롤
  15.5 드래그 모니터링
  15.6 드롭하기
  15.7 드롭 동작 조정하기
  15.8 드래그 앤 드롭으로 정렬하기
  15.9 주의해야 할 단점
  
  16장 자동 완성
  16.1 기초
  16.2 로컬 자동 완성
  16.3 Ajax 이용하기
  16.4 마크업 풍부하게 하기
  16.5 한 필드에서 여러 개의 값을 자동 완성하기
  16.6 자동 완성에 콜백으로 반응하기
  
  17장 DOM 조각 쉽게 만들기: 빌더
  17.1 명시적으로 만들기
  17.2 XHTML 표현에 사용하기
  
  18장 즉석 편집
  18.1 즉석 편집이 정확히 뭘 말하는 거지?
  18.2 간단한 예제
  18.3 Ajax 저장 기능 조정하기
  18.4 외관 바꾸기
  18.5 여러 줄 처리하기
  18.6 대체 문법으로 텍스트 편집하기
  18.7 즉석 편집 비활성화하기
  18.8 텍스트 대신에 값의 목록 편집하기
  
  19장 슬라이더
  19.1 간단한 슬라이더 만들기
  19.2 기초적인 것 조정하기
  19.3 범위를 제한하거나 특정 값만 허용하기
  19.4 이미 만들어진 슬라이더를 조정하고 컨트롤 추가하기
  19.5 여러 개의 값 정의하기
  
  20장 플래시 없이 사운드 사용하기
  20.1 어디서 사용하면 좋은가?
  20.2 어떻게 사운드를 연주하는가?
  20.3 여러 개의 트랙에서 여러 개의 사운드 연주하기
  
  부록 A.확장하기, 공헌하기
  부록 B.더 읽을거리
  부록 C.루비 설치하고 사용하기
  찾아보기

출판사 서평

프로토타입(Prototype)과 스크립타큘러스(script.aculo.us)는 이제 자바스크립트 개발에서 필수적인 라이브러리가 되었다.

jQuery, Dojo 등의 경쟁자가 있고 이들도 좋은 라이브러리지만 프로토타입과 스크립타큘러스의 조합을 쓰는 사람이 훨씬 많다. 아마 어디 가서 웹 2.0 개발자라고 말하려면 이 둘을 몰라서는 대화하기 힘들 것이다.
하지만 이 훌륭한 두 라이브러리가 문서는 좀 부실했다. 재작년까지만 해도 공식 문서 사이트조차 없었고 지금은 문서가 많이 정비되었지만 아직도 문서화되지 않은 기능이 많다. 이런 상황에서 이 책이 구세주처럼 등장한 것이다. 단순히 레퍼런스 측면만 봐도 프로토타입과 스크립타큘러스에 관한 모든 자료 중 이 책이 최고다. 매뉴얼에 안 나오는 내용들까지 상세하게 설명하고 있다.
하지만 이 책의 진가는 단순한 레퍼런스를 넘어서 베스트 프랙티스를 제시한다는데 있다. 개발자라면 다들 이해하겠지만, 라이브러리의 기능을 다 안다고 제대로 쓸 수 있는 것은 아니다.
그 기능들을 어떤 이유에서 만들었는지, 어떻게 조합해서 쓰는 것이 좋은지를 이해해야 더 잘 쓸 수 있다. 이 책의 예제들은 단순히 기능 하나만 보여주는 것이 아니라 왜 그 기능이 필요한지, 어떻게 써야 잘 쓰는 것인지를 보여줄 수 있도록 세심하게 만든 예제들이다. 그뿐 아니라, 어떤 단점이 있는지, 그런 단점들을 어떻게 피해갈 수 있는지까지 서술하고 있다. 그래서 초급자들은 예제를 통해 원리부터 이해할 수 있고, 고급 사용자들도 몰랐던 내용을 많이 배울 수 있을 것이다.

이 책을 읽고 나면 이제 자바스크립트 개발이 단순한 카피 앤 페이스트(copy&paste)와 지저분한 코드, 경고 창으로 뒤덮인 짜증스러운 경험이 아니라 즐거운 프로그래밍이 될 수 있다는 사실을 알게 될 것이다.




[[ 이 책을 먼저 보신 분들의 글 ]]

프로토타입은 모든 Ajax 라이브러리들의 모태가 된 라이브러리
- 장동수 (주)한컴씽크프리, http://iolothebard.tistory.com/

웹2.0과 함께 불어 닥친 Ajax 열풍 덕분에 웹 개발 프로젝트에서 Ajax는 필수 조건으로 자리 잡고 있습니다. 그러나 현업의 개발자들은 HTML, DOM, CSS, 자바스크립트 그리고 크로스 브라우저(cross-browser) 삽질(?)에 대한 우려로 기피하는 것이 현실입니다.

Ajax라는 단어가 겨우 익숙해질 만하니, 이번에는 Prototype, jQuery, YUI, GWT, EXT, Dojo... 읽기도 힘든 이름을 가진 Ajax 라이브러리/툴킷/프레임워크들이 쏟아져 나오고 있습니다. Ajax 관련 책들도 넘치지만, 제대로 된 책을 찾기가 쉽지 않습니다. 그야말로 Ajax 열풍입니다. 그래서 인사이트가 Pragmatic Bookshelf의 『프로토타입과 스크립타큘러스』를 번역 출간한다는 소식이 더욱 반갑습니다.

이 책은 첫 번째 주제인 프로토타입은 이후의 모든 Ajax 라이브러리들의 모태가 된 라이브러리입니다. 아직 어떤 Ajax 라이브러리를 사용해야 할지 결정하지 못했다면, 첫 후보는 당연히 프로토타입 라이브러리입니다. 이미 다른 Ajax 라이브러리를 사용하고 있지만, 생소한 구조와 사용법에 애를 먹고 있다면 프로토타입이 그 이유를 명쾌하게 설명해 줄 것입니다. 제가 속한 회사에서는 Dojo 툴킷을 공통으로 사용하고 있지만, 신입사원들에게는 프로토타입을 먼저 익히게 합니다. 그것이 Ajax의 숲을 보는 (쉽지는 않지만) 빠른 길이기 때문이죠.

이 책은 두 번째 주제인 스크립타큘러스는 프로토타입의 확장 라이브러리 모음입니다. 다소 기괴한 이름의 라이브러리지만, 웹2.0에 관심이 있다면 어디에서나 스크립타큘러스를 볼 수 있습니다. 가장 흔한 예가 블로그 본문에서 작은 사진을 클릭하면 반투명 배경 위에 큰 사진을 예쁘게 보여주는 lightbox입니다. 그냥 자바스크립트로 300줄 정도가 필요한 작업이, 프로토타입을 사용하면 30줄, 스크립타큘러스까지 사용하면 3줄이면 끝납니다. 엄청난 생산성이죠? 스크립타큘러스는 심오한 철학이 담긴 라이브러리는 아니지만, 웹 개발 과정에서 마주치게 될 수고를 덜어주는 고마운 존재입니다. 라이브러리의 특성상 지루한 나열식 설명이 불가피한데, Pragmatic 시리즈 특유의 문체를 생생하게 살린 번역 덕분에 지루하지 않게 끝까지 볼 수 있습니다.

먼저 번역 출간된 『자바스크립트 완벽 가이드』가 이해가 될 때까지 꼼꼼히 읽어야 하는 이론서라면, 이 책은 말 그대로 실용주의 레퍼런스입니다. 빠르게 읽은 다음 가까이 두고, 이슈가 있을 때마다 펼쳐서 확인한 후 코딩에 임한다면 Ajax가 그리 험난한 길이 아님을 알게 될 것이라 확신합니다.

아직도 Ajax가 끝없는 삽질이라고 생각한다면, 그러나 그 삽질을 피할 수 없다면, 이 책은 독자들에게 큰 힘이 되어 줄 것입니다.

라이브러리를 쉽게 사용할 수 있는 예제들 풍부
- 옥정수 SK 커뮤니케이션즈, http://okjungsoo.tistory.com

자바스크립트는 클래스 기반의 언어들(Class Based Language, Java나 C++)과 달리 프로토타입 기반의 언어(Prototype Based Language)입니다. 처음 자바스크립트를 접했을 때에는 어떻게 객체를 생성하고 구현을 해야 할지 많이 고민하며 시행착오를 겪었었는데, 프로토타입 자바스크립트 프레임워크(prototype.js)를 접하면서 어떻게 프로그래밍을 해야 할지 처음으로 감을 잡았습니다. 게다가, 오픈소스여서 어떻게 구현하였는지도 바로 들여다 볼 수 있는 소중한 경험이었고요.
프로토타입으로 프로그램을 짜면서 함께 사용한 스크립타큘러스(script.aculo.us)는 부드러운 움직임과 세련된 화면으로, 어떻게 해야 사용자의 마음을 사로잡게 할 것인가를 보여주는 훌륭한 라이브러리였구요.
그러던 시절도 지나서 어느덧 프로토타입은 1.6을 맞이하였고 스크립타큘러스는 1.8을 맞이하였습니다. 두 라이브러리 모두 발전에 발전을 거듭하여서 다양한 기능과 클래스 스타일의 구현을 어떻게 할 것인지 고민한 결과물을 보여주고 있습니다.
이번에 박영록 님께서 번역하신 Pragmatic Bookshelf의 『프로토타입과 스크립타큘러스』는 이러한 변화들을 세세히 다루는 책입니다. 실용주의 관점인 만큼 라이브러리를 쉽게 사용할 수 있는 예제들도 풍부합니다. 실용주의인 만큼 내부 코드를 일일이 다루지는 않습니다만 어떻게 구성되었는지 왜 이렇게 하였는지 생각할 수 있는 힌트들이 많답니다.

프로토타입과 스크립타큘러스에 처음 입문하시는 분들이나 다양한 옵션에 대해서 많이 고민하셨던 분들께 추천해 드리고 싶습니다.

아직 완벽하게 적용하지 못하는 많은 분께 도움
- 이동국 NHN, http://blog.openframework.or.kr/

프로토타입은 웹 개발자로 하여금 스크립트 코딩에 대한 부담감을 덜어주는 일종의 자바스크립트 프레임워크입니다. 흔히 웹 개발자가 하나의 웹 개발을 시작하면 공통으로 사용하는 스크립트 함수를 매번 다시 만들거나 기존에 사용하던 스크립트를 정리해서 하나의 js파일을 만드는데 프로토타입은 이러한 수고를 덜 수 있도록 많은 역할을 합니다. 문자열에 관련된 함수들, 배열 처리에 관련된 함수들 그리고 최근에 부각되고 있는 Ajax개발에 관련된 다양한 함수 등 매우 다양한 함수를 제공하고 있습니다. 또 이 책은 웹 개발에서 공통으로 사용하는 문자열, 배열 또는 CSS및 이벤트 처리 그리고 Ajax 프로그래밍까지 다양한 케이스에 대한 사용 방법을 알려주고 있습니다. 더군다나 1.6 버전으로 들어오면서 기존의 틀을 버리고 다시 작성한 함수에 대한 내용을 정리하고 있어서 1.5를 사용하던 개발자로 하여금 1.6에서 바뀐 점을 쉽게 파악해서 무리 없이 적용할 수 있도록 도와줍니다. 책이라는 매체가 허락할 수 있는 분량의 한계가 있는 터이지만 기존 사용자나 새로운 사용자가 쉽게 적용할 수 있도록 다양한 예제를 담으려고 노력했습니다. 번역 수준 또한 책을 이해하는데 전혀 무리가 없도록 적절히 번역이 되었습니다. 물론 프로토타입을 완벽하게 활용하기 위해서는 이 책 한 권으로 부족하겠지만 처음 적용하거나 1.5 버전을 적용했던 개발자 그리고 아직은 완벽하게 적용하지 못하는 많은 분께 도움이 되리라 생각합니다.

핵심(core) 기술들에 깊숙이 접근하는 통로 역할
- 김양원 판도라티비, http://blog.ecmas4.com/

웹 2.0의 도래와 함께 Ajax/Rich UI 개발이 각광받으면서 자바스크립트 프레임워크(JavaScript Framework)는 매우 빠른 속도로 발전했고, 또 다양한 형태와 특징을 갖는 프레임워크들이 발표되었습니다. Dojo, jQuery, Mootools, ExtJS 등.
그 중에 하나인 프로토타입은 RIA 개발을 위한 프레임워크로 개발되어 현재는 매우 다양한 기술과 JavaScript의 객체지향 개념 그리고 표준의 중요성까지 잘 설명하고 있습니다. 이뿐 아니라 이를 기반으로 하는 스크립타큘러스(Script.aculo.us)는 다양한 FX(effect)를 지원하는 프레임워크까지 탄생하게 한 계기를 마련했습니다. 또, 프로토타입은 현존하는 자바스크립트 프레임워크 중 가장 많은 사용자층을 형성하고 있어 이를 이용한 다양한 RIA개발이 이미 이뤄지고 있기도 합니다.
이 책에서는 최근 발표한 프로토타입 1.6과 스크립타큘러스 1.8의 기술적인 내용을 다룹니다. 저자는 개발자의 입장에서 소스 분석과 적용 사례를 들어가며 독자와 말하듯이 쉽게 풀어 설명하고 있어 이 프레임워크들을 처음 사용하려는 개발자나 실무에 적용하려는 개발자 모두에게 레퍼런스 역할을 해줄 것입니다.
이 책은 RIA 개발을 위한 도구로서 프로토타입과 스크립타큘러스를 학습하는 데 도움이 될 뿐 아니라, JavaScript를 통한 객체지향, DOM/CSS 접근에 대한 이해, 사용자 이벤트를 포함한 핵심(core) 기술들에 좀 더 깊숙이 접근하는 통로 역할을 할 수 있을 겁니다. 달리 말해 Ajax/Rich UI 개발을 하는 하나의 도구가 아닌 토마스 퍽스(Thomas Fuchs)가 스크립타큘러스라는 또 다른 막강한 FX 프레임워크를 생산한 것과 같은 기술적 이해에 접근할 수 있는 계기가 되길 바랍니다.

기본정보

ISBN	9788991268425 ( 8991268420 )
발행(출시)일자	2008년 07월 25일
쪽수	463쪽
크기	185 * 240 mm
총권수	1권
원서명/저자명	Prototype and script aculo us : you never knew JavaScript could to/Porteneuve, Christophe