부록 CD의 파일은 여기에서도 내려 받으실 수 있습니다.

Ajax를 전혀 모르는 초보 개발자뿐만 아니라 Ajax에 관심이 있는 기획자나 디자이너 등 비개발자도 쉽게 읽을 수 있는 『Ajax 첫걸음』은 복잡한 자바스크립트 내용이나 어려운 예제는 배제하고 난이도가 낮은 예제를 중심으로 설명함으로써 Ajax에 익숙하지 않은 사람들이 쉽게 Ajax의 동작 방식과 효과를 이해할 수 있게 안내한다. 난이도가 낮으면서도 웹사이트에 바로 코드를 가져다가 적용할 수 있을 만큼 유용한 예제들은 이 책의 또 다른 장점이다.

[ 소개 ]

쉽게 익혀 바로 가져다가 실전에 적용할 수 있는 완전 초보를 위한 Ajax 첫걸음

여러분은 Ajax의 유용함에 대해 들어보셨을 것입니다. Ajax를 사용하면 웹사이트의 사용성, 인터랙션, 응답성이 개선된 좋은 웹사이트를 만들 수 있습니다. 『Ajax 첫걸음』을 읽고 Ajax를 바로 적용해보기 바랍니다. 이전에 스크립트를 작성한 경험이 없어도 문제 없습니다. 몇 가지 핵심적인 내용을 배우고 예제 몇 개를 살펴본 후 라이브 CD를 실행하면 바로 적용할 수 있는 코드를 찾아낼 수 있을 것입니다.

『Ajax 첫걸음』에 포함된 프로그램은 다른 곳에서도 잘 동작합니다. 마이클 모리슨의 친절한 설명을 통해 여러분은 이해의 수준을 높이게 될 것입니다. 프로그램을 수정하고, 기능을 추가하고, 재사용하는 방법도 배울 것입니다. 자신만의 새로운 프로그램을 만드는 기술도 얻을 것입니다. 지금 전문가로 향하는 길을 떠나기 바랍니다.

이 책에서 다루는 Ajax 기능

■ 동적으로 웹 데이터 로드하기
■ 동적으로 목록 추가
■ RSS 뉴스피드
■ 입력 오류를 줄이는 자동 완성 기능
■ 실시간 검증 기능이 포함된 응답성 높은 GUI
■ 이미지를 보여주는 뛰어난 인터페이스 제작
■ 정보나 광고를 제공하는 멋진 팝업 창
■ 실시간 날씨 정보
■ 전자상거래 상품 배송비 계산 프로그램
■ 사이트에 별점 매기기 기능 추가

[ 이 책의 대상 독자 ]

여러분에게 거짓말을 하지는 않겠습니다. 이 책을 보려면 다양한 Ajax 예제에서 알 수 있는 것처럼 자바스크립트와 PHP에 대해 기초적인 지식이 필요합니다. 그러나 이 책의 기본적인 목표는 HTML과 CSS 지식이 있는 사람이 이해할 수 있게 하는 것이며, 클라이언트(자바스크립트)나 서버(PHP) 측 스크립트에 대한 지식이 반드시 필요한 것은 아닙니다. 현실적인 목표인지 확신할 수는 없지만 스크립트를 잘 모르는 사람도 두려워하지 않고 잘 이해할 수 있는 Ajax 예제를 열심히 만들었습니다.

기억해야 할 것은 이 책을 보기 위해 적어도 HTML은 어느 정도 알고 있어야 한다는 점입니다. CSS는 몰라도 큰 문제가 되지는 않지만 종종 언급할 것이므로 CSS도 미리 알아두면 좋습니다. 이 정도만 알고 있다면 HTML은 Ajax의 기초이므로 자바스크립트를 쉽게 알 수 있습니다. 그러나 웹 스크립트를 잘 알지 못해도 이 책에 있는 자바스크립트 코드를 이해할 수 있으리라 생각합니다. 그리고 재사용할 수 있는 Ajax 도구들도 갖게 될 것입니다. 책 전체에 걸쳐 나오는 PHP 코드는 매우 간단하며, 어떻게 동작하는지 정확히 설명했으므로 PHP를 알지 못하더라도 이해하는 데 어려움은 없습니다.

[ 이 책의 구성 ]

■ 1부. ‘Ajax의 시작’ 충분한 기초 지식을 전달하기 위해 시간을 낭비하지 않으므로 Ajax 예제 프로그램을 많이 살펴보지는 않을 것입니다. 현실에서 상용으로 운영되는 여러 Ajax 애플리케이션을 살펴보고, 이 책의 CD에 포함돼 있는 Ajax 도구를 살펴봅니다. 1부를 끝낼 때쯤이면 실제 동작하는 Ajax를 알 수 있습니다.

■ 2부. ‘Ajax 애플리케이션 제작’ 이 책의 대부분을 차지합니다. 2부는 Ajax를 사용해 현실 세계의 문제를 해결하는 데 초점을 맞췄습니다. 데이터 입력 폼에서 입력된 우편번호를 사용해 도시/주 정보를 동적으로 얻어오는 것에서부터 페이지에 삽입할 수 있는 별점 시스템에 이르기까지 알차게 구성했습니다. 하지만 설명으로 가득 채워져 있거나 Ajax의 역사와 같은 내용을 기대하지는 마세요. 2부는 실행이 중요한 부분입니다.

■ 3부. ‘부록’ 여러분에게 도움이 될 만한 추가 정보를 제공합니다. 부록 A에서는 Ajax가 어디서 시작해 어떻게 발전할 것인지 보여줍니다. 웹 페이지에 Ajax 기능을 추가하는 방법을 아는 것만큼 중요하지는 않습니다. 그러나 최근 Ajax와 관련된 이야기에 대한 다양한 관점을 더해줄 것입니다. 부록 B는 Ajax의 핵심에 해당하는 자바스크립트 객체에 대한 레퍼런스입니다. 이 책에서는 책 전반에 걸쳐 Ajax 도구를 사용하기 때문에 겉으로 드러나지 않지만 코드를 더 자세히 이해하고 도구를 수정하고자 한다면 XMLHttpRequest 객체를 이해할 필요가 있습니다. 마지막으로 부록 C에서는 이 책에 포함돼 있는 라이브 리눅스 CD의 사용법을 설명하므로 가장 유용한 부록이 될 것입니다. 라이브 CD에 대해 들어본 적이 없더라도 전혀 걱정할 필요가 없습니다. 또한 리눅스를 공부하거나 리눅스를 설치할 필요도 없습니다. 부록 C에서는 라이브 CD의 역할을 설명하고 특정 하드웨어를 설정하기 위해 필요한 방법을 설명합니다.

[ 저자 서문 ]

이 책에 대한 아이디어는 임의의 두 가지 기술적 주제를 뽑아 한 권의 책으로 낼 수 없을 것이라는 편집자와의 내기에서 시작했습니다. 이야기는 진행돼 ‘Ajax’와 ‘라이브 CD’라는 결과가 나오게 됐습니다. 이 책은 블루레이 온 레일스나 아이팟 디자인 패턴에 대한 책이 될 수도 있었습니다. 그러므로 여러분이 Ajax와 라이브 CD에 대한 책을 보게 된 것은 행운이라 할 수 있습니다.

여러분이 이 말을 믿는다면 내가 새롭게 시작하려고 생각 중인 회사에 투자하는 데 관심을 갖게 할 수도 있을 것 같네요. 사실 Ajax와 라이브 CD는 아주 잘 맞는 짝입니다. 라이브 CD는 Ajax 애플리케이션을 만들고 테스트하는 데 필요한 완벽한 환경을 제공해줍니다. 라이브 CD는 한 장의 CD에 실행 가능한 운영체제가 포함돼 있습니다. 운영체제 내에 Ajax 애플리케이션을 실행시킬 수 있는 웹 서버 같은 원하는 프로그램을 포함시킬 수도 있습니다.

완전히 자바스크립트로만 개발된 순수한 클라이언트 애플리케이션과 Ajax 애플리케이션을 비교할 때 차이점은, Ajax 애플리케이션에서는 서버에서 처리하는 작업이 필요하다는 점입니다. 다시 말해 Ajax의 중요한 전제는 클라이언트와 서버 간의 통신입니다. 이것은 단순히 서버가 필요한 것뿐만 아니라 어느 정도 관리할 수 있는 서버가 필요하다는 의미입니다. 적어도 Ajax 애플리케이션에서 필요한 서버에서 동작하는 서버 측 스크립트를 설치하고 테스트할 수 있어야 합니다. 라이브 CD는 Ajax 프로그램을 만들고, 테스트하고, 실행하는 데 매우 최적화된 플랫폼을 제공한다는 점에서 매우 만족스러운 방법입니다.

라이브 CD가 매우 멋지긴 하지만 이 책의 95%는 Ajax에 대한 내용입니다. 이 책에서 라이브 CD에 대한 내용은 주로 Ajax 애플리케이션이 순수한 클라이언트 프로그램보다 환경의 영향을 많이 받는다는 사실 때문에 이를 해결하기 위한 방법에 대한 것입니다.

좋습니다. 이 책은 주로 Ajax를 설명하는데, 이것은 무슨 의미일까요? 이것은 이 책의 상당히 많은 부분에서 다음과 같이 Ajax와 관련된 내용을 배울 것이라는 의미입니다.

■동적으로 이북을 로드하는 웹 기반의 이북 뷰어(3장)
■실시간 주가 현황판(4장)
■RSS 뉴스 피드를 지원하는 뉴스 수집기(5장)
■웹사이트에 자동 완성 기능 추가(6장)
■폼과 지역 정보의 유효성을 실시간으로 확인(7장)
■‘웹 2.0’ 이미지 뷰어를 만들어 이미지를 보여주는 페이지를 개선(8장)
■작은 정보를 동적으로 보여주기 위한 정보 팝업의 사용(9장)
■링크에 실시간 날씨 정보 팝업 적용(10장)
■미국 우편국에 Ajax 요청을 보내 실시간으로 배송료 계산(11장)
■웹페이지에 별점 시스템 적용(12장)

이것들은 Ajax 사용해 만들 수 있는 여러 종류의 동적인 애플리케이션입니다. 더 중요한 것은 이 책에서는 이런 Ajax 애플리케이션에 여러 기능을 쉽게 추가할 수 있는 도구를 사용한다는 점입니다. 이 책에서 제공하는 여러 예제를 보며 Ajax에 대해 많은 것을 알게 되겠지만, 이 책의 목적은 여러분에게 Ajax를 가르쳐 주는 데 있지 않습니다. 목적은 이런 멋진 기능을 Ajax를 사용해 어떻게 만드는지를 보여주는 것입니다. 때로 이런 목적 때문에 여러분이 완전히 새로운 것을 배워야 할 수도 있습니다. 하지만 다른 경우에는 단순히 코드를 잘라 붙이기만 하면 될 것입니다. 실제 해보는 것이 이 책에서 중요하게 생각하는 점입니다.

내가 생각하기에 실제 해보는 것이 배우는 것입니다. 그러므로 이 책을 덮을 때쯤이면 이 책을 읽기 시작했을 때보다 Ajax에 대해 더 많은 것을 이해할 것입니다. 그러나 더 중요한 것은 이 책을 다 읽을 때쯤이면 여러분의 프로젝트에 적용해볼 수 있는 Ajax 컴포넌트를 갖게 될 것이라는 점입니다.


[ 저자 소개 ]

마이클 모리슨 (Michael Morrison)
작가, 개발자, 장난감 발명가인 동시에 자바, 웹 스크립트, 게임 개발, 모바일 개발 같은 여러 주제에 대한 책을 쓴 저자입니다. 마이클 모리슨이 쓴 책 중 유명한 것은 『JavaScript Bible 6판』(Wiley, 2006), 『Teach Yourself HTML and CSS in 24 Hours 7판』(Sams Publishing, 2005), 『Beginning Mobile Phone Game Programming』(Sams Publishing, 2004), 『Java Unleashed』(Sams Publishing, 1997)가 있습니다. 마이클 모리슨은 디지털씽크의 Introduction to Java 2시리즈와 JavaBeans for Programmers 시리즈, Win32 Programming 시리즈 등 여러 온라인 강좌에서 강사를 맡기도 했습니다(www.digitalthink.com).
마이클 모리슨은 작가와 기술 컨설턴트라는 직업뿐만 아니라 게임, 장난감과 인터렉티브 미디어에 특화된 엔터테인먼트 회사인 Stalefish 연구소(www.stalefishlabs.com)의 설립자이기도 합니다. 컴퓨터 앞에 앉아 있지 않을 때는 스케이트보드를 타거나 하키를 하며, 그의 아내와 함께 영화를 보거나 작은 연못가에서 노는 것을 즐기곤 합니다.


[ 옮긴이의 말 ]

이 글을 쓰고 있는 2월 8일은 Ajax의 역사에서 보면 상당히 의미있는 날입니다. 지금으로부터 6년 전 오늘, 웹 애플리케이션의 역사에 큰 획을 그은 서비스 하나가 공개됩니다. 바로 구글 지도입니다. 구글 지도를 처음 봤을 때 놀라지 않은 사람은 아무도 없을 것입니다. 기존에는 지도를 보기 위해 별도의 데스크톱 프로그램을 설치해야 했습니다. 웹으로 지도를 제공하고 있는 서비스가 일부 있었지만 매우 느렸을 뿐만 아니라 현재 보고 있는 위치에서 다른 위치로 이동하려면 지도의 사방에 있는 아이콘을 이용해 이동을 해야 하는 등 일반 지도책을 보는 것보다도 큰 불편을 감수해야 했습니다. 그런데 바로 구글 지도가 이런 불편함을 모두 해소해줬고 이런 서비스를 만들 수 있는 핵심 기술 중 하나가 바로 Ajax였습니다.

6년이 지난 지금도 Ajax의 영향력은 여전합니다. 시간이 흐르고 Ajax에 대한 자료가 많이 공개되면서 구글 같이 수천 명의 사람으로 구성된 대형 기업뿐 아니라 단지 몇 명으로 구성된 작은 회사에서도 서비스에 Ajax를 적용하고 있습니다. 웹페이지를 다시 로드하지 않고도 데이터를 서버에서 가져올 수 있다는 Ajax의 기술적 특징이 주는 가치로 인해 Ajax는 점점 더 많은 웹사이트에 적용될 것입니다.

이런 흐름에서 사용자에게 더 좋은 가치를 제공해주는 서비스를 만들기 위해서는 개발자뿐 아니라 기획자나 디자이너도 Ajax를 이해해야 할 필요가 있습니다. Ajax는 반드시 사용해야 하는 도구가 됐습니다. 도구의 특성을 잘 이해하고 올바른 사용법을 익혀야 할 때입니다. 기획자는 Ajax를 제대로 사용해 제공할 수 있는 가치를 고민하고 디자이너는 Ajax로 구현 가능한 새롭고 훌륭한 UI와 UX를 궁리하고, 개발자는 기획자와 디자이너의 아이디어를 실현해야 할 것입니다.

이 책은 웹서비스를 만드는 모든 사람을 위한 Ajax 책입니다. Ajax의 기초부터 살펴볼 수 있으며, 웹페이지에 바로 적용할 수 있는 유용한 예제들로 가득 차 있으므로 기획자나 디자이너가 웹서비스에 더할 수 있는 가치를 모색할 때 도움이 될 것입니다. 또한 상세한 설명과 어렵지 않은 코드 덕분에 Ajax를 처음 접하는 개발자에게도 좋은 길잡이가 될 것으로 생각합니다. 이 책을 통해 좋은 웹서비스를 꿈꾸는 사람들이 최고의 웹서비스를 만들 수 있게 되기를 빌어 봅니다.


[ 옮긴이 소개 ]

장정환
서울대학교 전기공학부를 졸업하고 NHN에서 디스플레이 광고 시스템을 담당했으며, 지금은 NHN Ajax UI 랩의 랩장으로, 자바스크립트를 사용한 RIA와 UI 개발 업무를 맡고 있다. 자바스크립트에 능숙한 개발자를 확대할 수 있는 방법과 효과적이면서도 체계적인 자바스크립트 개발 방법에 대해 항상 고민 중이며, 최근에는 웹사이트 최적화라는 주제에 대해 관심을 갖고 있다.

목차

• 1부 Ajax의 시작
  
• 1장 Ajax와 혁신적인 월드와이드웹
  • Ajax와 식사
  • AJAX, 스팅, 비동기성
  • 리로드할 것인가 하지 않을 것인가
  • Ajax의 정확한 정체
  • 현실에서의 Ajax
    • 구글 서제스트
    • 넷플릭스
    • 플리커
    • 구글 지도
  • Ajax는 만병통치약이 아닙니다
  • 배송료 계산 다시 보기
  • 정리
    
• 2장 Ajax 애플리케이션의 내부
  • AJAX의 기초
    • HTML과 CSS
    • 자바스크립트
    • XML과 Ajax 데이터
    • PHP와 서버
  • Ajax 요청의 주기
  • AJAX 도구의 이해
    • ajaxkit.js 파일
    • domkit.js 파일
    • modalimgkit.js 파일
    • validatekit.js 파일
    • infowinkit.js 파일
    • ratingkit.js 파일
  • 이북 뷰어 파헤쳐보기
    • 이북
    • 이북 뷰어 웹페이지
  • 이북 뷰어의 수정
  • 정리
    
• 2부 Ajax 애플리케이션 제작
  
• 3장 동적 웹 데이터 로드: XML 이북 뷰어
  • 도전 과제: 더 작은 크기의 데이터 로드
  • 설계: XML 이북 뷰어의 설계
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 이북 뷰어 작성
    • XML 이북
    • XML 이북 뷰어 웹페이지
    • XML 이북 뷰어 서버 스크립트
  • XML 이북 뷰어 프로그램 테스트
  • XML 이북 뷰어 프로그램의 개선
  • 정리
    
• 4장 Ajax를 이용한 동적 목록 작성: 주식 현황판
  • 도전 과제: 선택된 주식의 정보를 표시
  • 설계: 주식 현황판의 설계
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 주식 현황판 작성
    • 주식 XML 파일
    • 주식 현황판 웹페이지
    • 주식 현황판 서버 스크립트
  • 주식 현황판 프로그램 테스트
  • 주식 현황판 프로그램의 개선
  • 정리
    
• 5장 RSS 뉴스 피드의 활용
  • 도전 과제: 동적으로 뉴스 피드를 받아오기
  • 설계: 뉴스 구독기 설계
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 뉴스 구독기 작성
    • 뉴스 구독기 웹페이지
    • 뉴스 구독기 스타일시트
    • 뉴스 구독기 서버 스크립트
  • 뉴스 구독기 테스트
  • 뉴스 구독기 프로그램의 개선
  • 정리
    
• 6장 자동 완성 기능 활용
  • 도전 과제: 데이터 예측
  • 설계: 자동 완성 프로그램
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 자동 완성 프로그램 작성
    • 자동 완성 웹페이지
    • 자동 완성 서버 스크립트
  • 자동 완성 프로그램 테스트
  • 자동 완성 프로그램의 개선
  • 정리
    
• 7장 실시간 유효성 검사가 가능한 응답성이 좋은 GUI 작성
  • 도전 과제; 실시간으로 사용자 입력을 확인
  • 설계: 유효성 확인 프로그램
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 유효성 검사 프로그램 작성
    • 유효성 확인 프로그램 웹페이지
    • 우편번호 검색 서버 스크립트
  • 유효성 검사 프로그램 테스트
  • 유효성 확인 프로그램의 개선
  • 정리
    
• 8장 이미지 뷰어용 최고의 인터페이스
  • 도전 과제: 동적으로 이미지를 로드
  • 설계: 동적 이미지 뷰어
  • 이미지 뷰어 프로그램 작성
  • 이미지 뷰어 테스트
  • 이미지 뷰어 프로그램의 개선
  • 정리
    
• 9장 팝업 창에 정보 표시
  • 도전 과제: 팝업 제작
  • 설계: 정보 팝업 프로그램 설계
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 정보 팝업 프로그램 작성
    • 정보 팝업 프로그램의 웹페이지
    • 정보의 내용이 담긴 페이지
  • 정보 팝업 프로그램 테스트
  • 정보 팝업 프로그램의 개선
  • 정리
    
• 10장 Ajax를 이용한 일기 예보
  • 도전 과제: 날씨 정보 수집
  • 설계: 일기 예보기의 설계
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 일기 예보 프로그램 작성
    • 일기 예보 프로그램 웹페이지
    • 일기 예보 프로그램 서버 스크립트
  • 일기 예보 프로그램 테스트
  • 일기 예보 프로그램의 개선
  • 정리
    
• 11장 Ajax 배송료 계산기
  • 도전 과제: 실시간으로 배송료 정보 얻기
  • 설계: 배송료 계산 프로그램
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 배송료 계산 프로그램 작성
    • 배송료 계산 프로그램 웹페이지
    • 배송료 계산 프로그램 서버 스크립트
  • 배송료 계산 프로그램 테스트
  • 배송료 계산 프로그램의 개선
  • 정리
    
• 12장 Ajax를 적용한 별점
  • 도전 과제: 웹사이트에 별점 추가
  • 설계: 별점 프로그램 설계
    • 클라이언트 요청
    • 서버 응답
    • 클라이언트와 서버 간 통신의 이해
  • 별점 프로그램 작성
    • 별점 웹페이지
    • 쿠키 초기화 페이지
  • 별점 프로그램 테스트
  • 별점 프로그램의 개선
  • 정리
    
• 3부 부록
  
• 부록 A Ajax의 과거, 현재, 미래
  • Ajax의 시작
  • Ajax 전성시대
  • Ajax의 다음 단계
    
• 부록 B 짧고 간단한 XMLHttpRequest 레퍼런스
  • 메소드
    • open()
    • send()
    • abort()
    • overrideMimeType()
    • setRequestHeader()
    • getAllResponseHeaders()
    • getResponseHeader()
  • 프로퍼티
    • readyState
    • status
    • statusText
    • responseText
    • responseXML
  • 이벤트
    
• 부록 C 라이브 리눅스 CD의 사용법
  • 라이브 CD의 구성 요소
  • 라이브 CD의 실행
    • 네트워크 설정
    • 데이터 백업
  • 윈도우 PC에서 라이브 CD 직접 실행
  • 맥에서 라이브 CD 직접 실행