자바스크립트는 웹 2.0과 Ajax라는 웹 개발 패러다임의 변화 속에서 최근 몇 년간 폭발적으로 성장해왔다. 이러한 성장의 결과로 마치 춘추전국시대를 방불케 하는 많은 프레임워크들이 개발되고 있고 또 사라져가고 있다. 하지만 가장 성공적이며 다른 많은 프레임워크의 기반이 되고 있는 것이 Prototype이다. Scriptaculous 또한 Prototype 라이브러리를 이용하여 개발된 강력한 사용자 인터페이스 관련 라이브러리이다.

Prototype을 사용하면 스파게티 코드처럼 복잡하게 엉켜있는 자바스크립트 코드를 OOP의 철학에 맞게 객체 기반으로 작성할 수 있다. 또 상속과 같은 개념을 자바스크립트에 적용할 수 있으며 복잡한 Ajax 관련 코딩을 단 몇 줄만으로 작성할 수 있다. 이와 더불어 Scriptaculous는 드래그 앤 드롭, 다양한 시각적인 효과 등을 제공하여 사용자가 즐겁게 애플리케이션을 사용할 수 있도록 해준다.

이 책은 600쪽이라는 적지 않은 분량에도 불구하고 엄청나게 많은 예제를 들어 설명하고 있어 읽기 쉽고 이해하기 쉬우며 각 부의 내용만을 따로 보아도 즉시 실제 업무에 활용할 수 있도록 구성되어 있다. 따라서 여러분의 기존 코드에 Ajax를 적용하여 사용성을 높이고 싶거나 시각적인 효과를 적용하고 싶다면 관련 장을 바로 찾아보고 새로운 코드를 즉시 추가할 수 있을 것이다.

많은 Ajax 관련 서적들이 특정 서버 측 언어에 맞추어 집필된 데 반해, 이 책은 특정한 서버 측 개발언어에 대해서만 다룬 것이 아니라 부록을 통해 대부분의 서버 측 언어로 포팅하는 방법들을 친절하게 설명하고 있으므로 자바, C#, .NET, PHP, 루비온레일스 등 어떠한 서버 측 언어를 사용하는 개발자라도 쉽게 읽을 수 있다.

시간적으로 여유가 있는 분들은 첫 페이지부터 정독하기를 권하며, 이를 통해 이 두 가지 라이브러리와 자바스크립트 자체에 대해 상세하게 이해할 수 있을 것이다. Prototype과 Scriptaculous에 관련한 문서로는 이 책이 최고이며 감히 바이블이라 부를 수 있을 정도이다.

추천의 글

“어떻게 Prototype과 Scriptaculous가 여러분이 중요하게 생각하는 문제, 즉 여러분의 아이디어를 구현하는 것에만 집중할 수 있도록 해주는지를 보여준다” —Scriptaculous의 창시자 Thomas Fuchs의 서문에서

“내 서가의 많은 책 중에서, 이 책이 가장 자주 보는 책이다” —CardPlayer.com의 Philip Hallstrom

“Ajax개발을 단순하게 해주는 위대한 참고서적이다” —MATRIX Resources, Inc 의 Mark Eagle

“이 책에서 얻은 아이디어를 구현하고 싶어서 참을 수가 없다” —The Weather Channel Interactive의 Jeff Cunningham

“이 책은 Prototype과 Scriptaculous에 대한 바이블로 여겨져야 마땅하다. 이 책의 참 맛을 느껴보려면 이 책의 예제를 다운받아서 실행시켜 보라” —JavaLobby

“훌륭하고 견고한 입문서이다. Prototype뿐만 아니라 자바스크립트에 대해 환상적일 정도로 유용한 내용들이 많다. 예를 들면, 함수 컨텍스트와 클로저에 관한 절은 이 주제에 대해 내가 읽은 것들 중 단연 최고이다” —Amazon UK

“만약 여러분이 자바스크립트의 고급 주제에 대해 배우려고 하거나 이 강력하고 유용한 두 라이브러리 중 하나를 사용할 계획이라면 이 책은 반드시 가지고 있어야 한다! 돈이 아깝지 않다 ” —bn.com

데이브 크레인(Dave Crane)

베스트셀러인 <Ajax 인 액션>과 <Ajax 인 프랙티스>를 집필한 권위 있는 저자이다. 현재 영국에 위치한 Historic Futures Ltd.의 수석개발자로 전원에 위치한 기업들과 다국적 기업들을 연결하는 차세대 사회적 책임 공급망 시스템을 Ajax를 사용하여 개발하고 있다.

베어 바이볼트(Bear Bibeault)

자바 프로그래머로 미국 엔터프라이즈 웹 애플리케이션 분야에서 20년이 넘게 활동하였다. 그는 Java Ranch의 유명한 사회자이며 <Ajax 인 프랙티스>의 공동저자이다.

톰 로크(Tom Locke)

영국에 사는 웹 개발자이며 루비온레일스의 전문강사이다. 그는 Logix라는 복수 언어 프로그래밍 시스템의 창시자이며 LiveLogix의 CTO이다.

 

서문

편리함이 핵심이다.

모든 주요 브라우저들이 다양한 버그를 가지고 있고 또 스펙에 명시된 사항들을 완전하게 지원하지도 않는 것은 제외하더라도, 사용자 인터페이스를 구성하는 컨트롤의 결여와 불필요할 만큼 복잡한 자바스크립트 코딩, 그리고 당연한 것이겠지만 끔찍한 브라우저들 간의 비호환성 같은 기본적인 한계에 금새 부딪히게 된다.

자, 이런 모든 것은 잊도록 하자. 이 책은 정말로 중요한 것-여러분의 생각을 구현하는 것-에 집중하기 위해 어떻게 Prototype과 Scriptaculous를 사용하는지 보여줄 것이다. 어떻게 이 목표를 달성할 것인가에 대한 간단한 전제는 편리함이다. 편리함이라는 개념은 두 라이브러리 내의 모든 단계에 걸쳐 녹아 있다. 대개의 경우 여러분은 짧은 라인의 코드만을 작성하면 되고 그 코드는 잘 동작할 것이다. 또 라이브러리들은 전반적으로 일정한 스타일을 따르므로 여러분이 처음으로 사용할지라도 아주 많은 것들을 배워야 할 필요도 없다. 소스코드는 아주 읽기 편하게 최적화되어 있다(단지 조금만 시간을 투자하면 된다!). 이 덕분에 아주 짧은 시간에 풍부한 사용자 인터페이스를 생성하여 이러한 편리함을 사용자에게 전해줄 수 있다. 실제로 밑단의 기술을 어떻게 작동시킬까를 고민하는 대신에 약간의 변경만을 통해 사용자 인터페이스를 개선할 수 있다. 이런 방법을 통해 초기부터 디자이너들과 사용자들을 프로세스에 참여하게 할 수 있는 생산적인 ‘반복적인 개발(rinse and repeat)’ 사이클을 확보할 수 있다.

편리한 기능은 아주 쓸모가 많다. 웹사이트 개발 시에 기반이 되는 백엔드부터 사용자 화면에 걸쳐 모든 면에서 편리함이 적용되고 있다. Scriptaculous 사용자는 “puff effect가 절 눈물 흘리게 만들었어요. 그것은 기쁨의 눈물이었습니다”라고 얘기하기도 한다. 여러분이 이처럼 반응하지는 않을지 몰라도 여러 가지 방법으로 이 라이브러리들을 즐길 수 있다. 아마 가장 좋은 것은 여러분이 일찍 개발을 끝냈기 때문에 제 시간에 집에 퇴근하는 것이다

웹에 훌륭한 것을 만들어 내는 재미를 즐겨보라. 그리고 여러분이 좋다면 IRC 채널과 메일링 리스트에 가입해서 배운 것을 커뮤니티에 환원해라. 더 나아가 패치를 작성하고 버그를 수정하거나 Prototype과 Scriptaculous를 위한 여러분만의 오픈소스 확장모듈을 개발하라!

토마스 푹스, CTO, wollzelle - Scriptaculous 창시자

박천구

자바, 오픈소스, 미디어 서비스 등에 관심을 가지고 있으며, 2004년부터 온라인 음악 포털의 기술그룹장을 역임하고, 현재는 새로운 온라인 미디어 서비스를 개발하고 있다. EJB&WebLogic(2002. 가메출판사)을 집필하기도 했다.

역자 서문

2002년에 처음 책과 인연을 맺은 지 6년이 지나서야 다시 책과 인연을 맺게 되었습니다. 그동안 인터넷 생태계는 참 많이 변해서 오픈소스, 웹 2.0, Ajax, MVC 프레임워크, 자바스크립트 프레임워크 등이 탄생하였습니다. 물론 주목할 만한 변화들이 이보다는 많겠지만 이 책은 이러한 패러다임들 중에서 자바스크립트 프레임워크와 Ajax에 대한 내용을 다루고 있습니다.

아마 대부분의 개발자들은 누군가가 작성한 코드를 유지보수하거나 읽어본 적이 있으실 겁니다. 제 경우에는 가장 괴로운 부분이 바로 ‘자바스크립트’였습니다. 읽기 어려웠을 뿐 아니라 이곳 저곳에 중복된 기능이 산재해 있고 심지어 모듈화되어 있지도 않아서 한 군데를 수정해도 모두 적용이 되지 않아 일일이 다 찾아서 수정을 해줘야 했습니다. 또한 특정 브라우저에서만 정상적으로 수행되는 코드들로 인해 타 브라우저에 대한 서비스는 아예 초기부터 포기하는 경우도 많았습니다.

하지만 이제 우리는 이러한 고민들을 하지 않아도 됩니다. 걸출한 개발자 샘 스티븐슨이 개발한 Prototype을 사용하면 브라우저 간의 호환성을 보장하는 것은 물론이고 획기적으로 코딩량을 줄일 수 있으며 OOP와 유사한 개념을 적용하여 클래스 형태로 개발할 수 있고 상속의 개념을 적용하여 계층구조로 설계할 수도 있습니다.

또한 요즘의 모든 애플리케이션들이 Ajax 기능을 적극적으로 채택하고 있다는 것을 고려하면 Prototype이 지원하는 Ajax 관련 기능은 너무나 매력적입니다. 단 몇 줄의 코딩만으로 이전에는 상당한 양의 코딩이 필요했던 작업을 수행할 수 있으니 말입니다. Ajax에 대한 지원을 위해 Prototype은 여러가지 형태의 Ajax 관련 클래스를 제공하고 있습니다. Prototype이 자바스크립트 전반에 걸친 라이브러리라면 토마스 푹스의 Scriptaculous는 웹 페이지 내에서 사용자의 UX(User Experience)를 향상시킬 수 있는 기능을 제공하는 시각효과에 특화된 라이브러리입니다. Scriptaculous는 크게 효과와 컨트롤로 구분이 되며 10여 개에 달하는 효과를 제공하므로 웹 페이지에 다양한 효과를 구현할 수 있고 이들의 조합 또한 쉬워서 상당히 많은 효과를 사용할 수 있습니다. 또한 컨트롤의 경우는 Prototype이 제공하는 Ajax 기능을 사용하여 서버 측과 자연스럽게 연동이 되므로 간단한 설정만으로 구글의 검색어 추천 기능과 같은 컨트롤을 사용할 수 있게 됩니다.

Scriptaculous를 사용하면 페이지 내의 엘리먼트들을 움직이게 하거나 사라지게 하거나 또는 크기를 변경하는 작업 역시 쉽게 구현할 수 있습니다. 플래쉬나 실버라이트와 같은 툴을 사용해야 할 수 있던 일을 아주 간단하게 수행할 수 있다는 말이지요. 가장 강력한 것은 데스크탑 애플리케이션의 경우와 같은 드래그 앤 드롭 기능을 너무도 쉽게 사용할 수 있다는 것입니다. 여러분은 이 기능을 사용하여 사용자들이 좀 더 친숙한 환경인, 데스크탑과 같이 사용하도록 유도할 수도 있습니다. 저는 요즘 왜 개발자가 3D 업종이 되었을까? 하는 고민을 하고 있습니다. 끊이지 않는 야근, 밤샘작업, 주말근무, 불안한 미래 등등 헤아릴 수 없이 많습니다만 가장 힘이 드는 건 고되고 긴 근무시간입니다. 하지만 이제 적어도 자바스크립트에 관련된 개발을 진행할 때는 Prorotype과 Scriptaculous를 적절히 사용한다면 좀 더 일찍 퇴근해서 책도 읽고 오픈소스의 커미터로 활동하는 여가를 즐길 수도 있을 겁니다. Prototype과 Scriptaculous를 사용해서 환상적인 애플리케이션을 많이 개발하시기 바랍니다. 이렇게 훌륭한 라이브러리를 개발해준 두 개발자 샘 스티븐슨과 토마스 푹스에게 감사 드리고, 루비온레일스와 부록 부분의 번역과 검토에 도움을 주신 손권남님, 꼼꼼한 베타리딩과 편집으로 저를 도와주신 위키북스의 관계자분들, 직장 상사 및 동료들 그리고 넉 달의 시간 동안 매진할 수 있도록 도와준 아내 지영, 딸 민서, 그리고 곧 태어날 아이 바다에게 고마움을 전합니다.

박천구

2008년 봄

  • 1부 시작하기
  •  
  • 1. Prototype과 Scriptaculous에 대한 소개
    • 1.1 간략하게 알아보는 Ajax의 역사
    • 1.2 Prototype이란?
    • 1.3 Scriptaculous란?
    • 1.4 Prototype과 Scriptaculous 적용하기
    • 1.5 요약
  •  
  • 2. QuickGallery 애플리케이션 소개
    • 2.1 설계와 구현
    • 2.2 전통적인 웹 애플리케이션 모델의 검증
    • 2.3 요약
  •  
  • 3. Prototype을 사용하여 Ajax 구현을 간단하게
    • 3.1 Ajax 구현을 위한 재설계
    • 3.2 XML과 Ajax 함께 사용하기
    • 3.3 JSON과 Ajax 함께 사용하기
    • 3.4 요약
  •  
  • 4 Prototype의 고급 Ajax관련 기능 사용하기
    • 4.1 Prototype이 제공하는 고급 Ajax 관련 클래스
    • 4.2 HTML과 Ajax 함께 사용하기
    • 4.3 데이터 중심 Ajax와 컨텐트 중심 Ajax의 비교
    • 4.4 요약
  •  
  • 2부 Scriptaculous 빨리 익히기
  • 5. Scriptaculous의 Effect 기능
    • 5.1 단기성공과제(Quick win) : 단 한 라인의 추가로 효과 추가하기
    • 5.2 Scriptaculous와 예제 설정
    • 5.3 Scriptaculous가 지원하는 효과(Effect)의 유형
    • 5.4 효과(Effect) 이해하기
    • 5.5 Show, Hide 효과를 토글로 쉽게 제어하기
    • 5.6 transition 다루기
    • 5.7 효과가 지속되는 동안의 제어권 획득
    • 5.8 효과 사용을 취소하기
    • 5.9 다수의 효과 관리하기
    • 5.10 요약
  •  
  • 6. Scriptaculous가 제공하는 Control
    • 6.1 이번 장을 위한 예제프로그램 사용하기
    • 6.2 in-place 텍스트 에디터
    • 6.3 InPlaceCollectionEditor
    • 6.4 Ajax 기반의 텍스트필드 자동완성(autocompleter) 컨트롤
    • 6.5 Scriptaculous의 로컬 자동완성(autocompleter) 컨트롤
    • 6.6 슬라이더(slider) 컨트롤
    • 6.7 요약
  •  
  • 7. Scriptaculous의 드래그 앤 드롭
    • 7.1 이번 장을 위한 예제 코드
    • 7.2 드래그 하기
    • 7.3 드래그한 아이테을 드롭하기
    • 7.4 드래그 앤 드롭으로 정렬(sorting)하기
    • 7.5 요약
  •  
  • 3부 Prototype에 대해 상세히 알아보기
  • 8. Object에 대한 모든 것
    • 8.1 스크래치패드 애플리케이션 소개
    • 8.2 Object의 타입
    • 8.3 Object와 Prototype
    • 8.4 요약
  •  
  • 9. 함수와 재미있게 놀아보기
    • 9.1 자바스크립트 함수
    • 9.2 Prototype.js로 함수 확장하기
    • 9.3 요약
  •  
  • 10. Array로 쉽게
    • 10.1 Array의 소개
    • 10.2 내장 자바스크립트 Array
    • 10.3 Prototype.js와 Array
    • 10.4 Enumerable 오브젝트의 메소드
    • 10.5 해시(Hash)와 오브젝트레인지(ObjectRange) 다루기
    • 10.6 요약
  •  
  • 11. 다시 브라우저로
    • 11.1 DOM 메소드에 대한 단기강좌
    • 11.2 Prototype과 DOM
    • 11.3 Event 오브젝트 확장하기
    • 11.4 HTML 폼 다루기
    • 11.5 요약
  •  
  • 4부 고급수준의 주제들
  • 12. 실전에서의 Prototype과 Scriptaculous
    • 12.1 QuickGallery 애플리케이션의 요구사항
    • 12.2 슬라이드쇼 에디터 개발하기
    • 12.3 Ajax 기반의 저장기능 추가
    • 12.4 툴바의 생성
    • 12.5 모든 것을 합치기
    • 12.7 요약
  •  
  • 13. Prototype, Scriptaculous, 그리고 레일스
    • 13.1 자바스크립트의 생성
    • 13.2 Ajax 헬퍼
    • 13.3 Scriptaculous 헬퍼
    • 13.4 JavaScript 써? 말어?
    • 13.5 다음 단계: RJS
    • 13.6 요약
  •  
  • 부록A HTTP 입문
  • 부록B HTTP 트래픽의 측정
  • 부록C Tomcat 5.5의 설치와 실행
  • 부록D PHP의 설치와 실행
  • 부록E 서버 측 기술의 포팅

예제코드 관련 GitHub 페이지

관련 글