추가 적립 안내

PHP 개발자여, 자바스크립트에 도전하라!

'에이콘 웹 프로페셔널' 시리즈, 제18권 『PHP 개발자를 위한 실전 자바스크립트』. 새롭게 주목받고 있는 자바스크립트와 Ajax에 대한 내용으로 구성했다. 자바스크립트와 Ajax를 이용하여 다이내믹한 PHP 웹 애플리케이션을 작성할 수 있도록 인도한다.

MySQL, 그리고 PHP, XML와 연동이 가능하도록 설명함으로써 서버와 클라이언트 기술을 함께 사용할 수도 있다. 특히 웹사이트에 바로 적용할 수 있는 유용한 예제를 담아내 실무에 도움이 된다.

〈 요약 〉

기존의 딱딱한 PHP 웹사이트를 다이내믹한 데스크탑 애플리케이션처럼 사용할 수 있는 Ajax와 자바스크립트. 『PHP 개발자를 위한 실전 자바스크립트: 다이내믹한 PHP 사이트를 만드는 Ajax 기법』에서는 풍부한 실전 예제와 함께 PHP 개발자가 현업에서 바로 활용할 수 있는 내용을 다루고 있다.


〈 소개 〉

Ajax는 웹을 크게 바꿔놓았다. 이제 Ajax 덕분에 일반 웹 사용자는 사용이 더욱 편리해진 웹사이트를 이용할 수 있고 웹 개발자는 이런 웹사이트를 더욱 손쉽게 제작할 수 있다. Ajax라는 게 정말 대단한 것 같지 않은가!

Ajax는 기본적으로 사용성을 해치는 페이지 리로드 없이도 페이지 이동을 가능하게 해주는 기술이다. 페이지 리로드만 없애도 실시간 값 검증, 드래그앤드롭 등과 같이 기존에는 웹 애플리케이션에서 부드럽게 구현하기 어려웠던 기능을 자연스럽게 구현할 수 있게 된다. Ajax에 사용되는 기술(Ajax의 핵심인 XMLHttpRequest는 마이크로소프트 사에서 1999년에 공개했다) 자체는 완성단계이지만 그것들이 제대로 활용되기 시작한 지는 얼마 되지 않았고, 아마 앞으로도 한동안 그 활용 분야는 더욱 늘어날 것이다.

여기저기서 Ajax 사용에 대한 이야기가 나오고는 있지만 Ajax가 모든 문제의 해법은 아니다. 다른 기술과 마찬가지로 Ajax 또한 남용되거나 잘못 사용될 수 있다. 그리고 Ajax 자체에도 몇 가지 문제점이 있는데 그 중 북마크가 제대로 되지 않는 문제와 검색엔진이 크롤을 제대로 할 수 없는 문제, 브라우저 간 호환성 문제, 자바 스크립트를 지원하지 않는 브라우저에서 정상적으로 작동하지 않는 문제 등은 잘 알려진 것들이다. 또한 모든 이가 Ajax를 좋아하는 것도 아니다. 대규모 프로젝트의 코어에서도 자바스크립트를 이용하는 사람도 있지만, 자바스크립트를 아예 사용하지 않는 사람도 있다. 하지만 대개 남용을 피하는 선에서 적당히 사용하는 편이 좋을 것이다.

『PHP 개발자를 위한 실전 자바스크립트: 다이내믹한 PHP 사이트를 만드는 Ajax 기법』에서는 웹 개발에 반드시 필요한 실용적인 패턴과 예제를 소개한다. 그리고 흔히 저지르는 실수와 효율적인 Ajax 코드 작성법, 확장이 쉬운 설계법 등도 설명한다. 이 책에서 배운 내용은 기존의 PHP 웹 애플리케이션에 바로 적용해볼 수 있을 것이다.

이 책에서 설명하는 내용이 실무에 도움이 되기를 바란다. 이 책에 관련된 정보나 뉴스는 http://Ajaxphp.packtpub.com에서 볼 수 있다. 위의 사이트에서는 무료로 추가 설명과 리소스들을 제공하므로 시간이 있다면 한 번씩 확인해보자.


★ 이 책에서 다루는 내용 ★

기초에서부터 시작해 실제 업무에서 사용될 만한 예제까지 상세하게 설명한다. 이를 통해 개발 패턴을 익히고 실제 개발에 도움이 되게 했다.

■ 서버사이드 검증 방식의 폼 페이지
■ 온라인 채팅
■ 입력 도우미
■ SVG를 이용한 실시간 차트
■ 데이터베이스와 연동되고 편집 가능한 데이터 그리드
■ 웹 기반 RSS 리더
■ 드래그앤드롭으로 정렬 및 자료를 서버에 저장하는 목록(script.aculo.us 이용)


★ 이 책의 구성 ★

1장: Ajax와 웹 애플리케이션의 미래에서는 Ajax에 대한 기초와 Ajax를 이용해 사용성을 향상시킬 수 있는 다양한 방법에 대해 설명하겠다. 그리고 이해를 돕기 위해 간단한 예제도 작성해본다.

2장: 자바스크립트로 클라이언트 사이드 작업하기에서는 자바스크립트와 DOM, XMLHttpRequest 객체, XML을 이용해 Ajax 웹 클라이언트를 작성하는 방법을 설명한다. 2장에서는 관련된 모든 기술의 상세한 설명보다는 각 기술의 기본적인 사용법을 익히는 데 집중하겠다.

3장: PHP와 MySQL로 서버 사이드 개발하기에서는 Ajax 클라이언트와 연동되는 서버 스크립트 작성법을 알아보겠다. 기본적인 자바스크립트 보안과 에러 핸들링 등을 어떻게 처리하면 되는지도 다룬다.

4장: 빠르고 안전한 폼 유효성 검증에서는 실시간 Ajax 검증과 서버 사이드 검증을 모두 이용하는 폼 검증 방법에 대해서 알아보겠다.

5장: 가벼운 웹기반 채팅 솔루션 작성하기에서는 여러 채팅 솔루션과는 다르게 자바 애플릿이나 플래시 등의 라이브러리를 사용하지 않고 자바스크립트만을 이용해 채팅 솔루션을 작성해보겠다.

6장: 실시간 단어제안과 자동완성에서는 구글 검색어 제안 기능과 같은 인터페이스를 이용해서 PHP 함수를 검색할 수 있고 또 이렇게 검색된 함수의 공식 도움말 페이지의 링크도 제공하는 애플리케이션을 작성해보겠다.

7장: SVG로 실시간 차트 그리기에서는 Ajax와 SVG를 이용해 실시간으로 차트를 그려주는 애플리케이션을 작성해보겠다. SVG(Scalable Vector Graphics)는 텍스트 기반의 그래픽 언어로 도형이나 텍스트를 그리는 데 이용된다.

8장: 다이내믹 데이터 그리드에서는 Ajax를 이용해 강력한 데이터 그리드를 작성해보겠다. XSLT를 이용해 XML 문서를 파싱해서 출력을 생성하는 방법도 함께 알아보자.

9장: 웹기반 RSS 리더 작성하기에서는 SimpleXML PHP 라이브러리와 XML, XSLT를 이용해 간단한 RSS 리더를 작성해보겠다.

10장: 드래그앤드롭 UI작성하기에서는 script.aculo.us 프레임워크를 이용해 드래그앤드롭 기능을 갖춘 리스트를 작성해보겠다.

부록 A: 작업 환경 설정에서는 이 책에서 사용하는 소프트웨어(아파치, PHP, MySQL, phpMyAdmin)의 설치와 설정 방법을 설명한다. 이 책의 예제는 작업 환경이 여기서 설명한 대로 설정되어 있다고 가정하고 작성됐다.


★ 이 책의 대상 독자 ★

이 책은 PHP와 XML, 자바스크립트, MySQL에 대한 기본적인 지식은 있으나 더 깊이 배우고 싶거나 이 기술들을 연동하는 방법을 알고 싶어하는 독자들에게 유용하다.


★ 소스코드 ★

원서 http://www.packtpub.com/support를 방문해 책 제목을 선택하거나, 에이콘출판사 도서정보페이지(http://www.acornpub.co.kr/book/php-ajax)에서 예제 코드와 추가적인 리소스를 받아볼 수 있다. 다운로드되는 파일에 사용법도 명시해뒀다.


역자의 말

웹 애플리케이션의 역사는 그다지 길지 않음에도 많은 진화 과정을 거쳤습니다. 이런 과정을 거치면서 개발자는 복잡한 웹 애플리케이션을 더욱 쉽게 작성할 수 있게 됐고, 사용자는 직관적이고 편리한 웹 애플리케이션을 사용할 수 있게 됐습니다.

제가 웹 개발에 처음 발을 들여놓았을 때는 많은 사람이 펄을 이용해 웹 개발을 하고 있었습니다. 그래서 제가 웹 개발을 처음 시작하며 사용했던 언어도 펄입니다. 그러나 펄은 웹 개발을 목적으로 설계된 언어가 아니었기에 펄을 이용한 웹 개발은 그다지 즐거운 경험이 아니었습니다. 이후 PHP에 대해서 알게 됐고, 간단한 C 문법 정도만 알고 있다면 별다른 학습 없이 바로 개발을 할 수 있다는 점과 HTML 페이지에서 편리하게 코드를 쓱싹쓱싹 작성할 수 있다는 점은 굉장히 큰 매력이었습니다. 이후 다른 언어를 접할 기회가 많았지만 마음 편하게 빈 페이지를 열어서 생각하는 기능을 가벼운 마음으로 훌훌 풀어내는 데는 PHP만한 언어가 없는 듯합니다. 물론 이런 가벼운 애플리케이션뿐만 아니라 계속 추가되고 있는 PHP의 모든 기능을 활용한다면 강력한 웹 애플리케이션을 구축할 수도 있습니다.

그리고 Ajax가 널리 사용되기 이전에는 무언가 기능적인 동작을 하기 위해서는 항상 페이지 전체를 다시 읽어야 했습니다. 지금과 비교해보면 이때의 웹 경험은 그다지 유쾌하지 못했습니다. 어떤 작업을 하든지 페이지 전체를 다시 읽어야 했고, 페이지 이동 시에 힘들게 입력했던 자료를 잃어버리는 일도 흔했습니다. 하지만 이제는 Ajax 덕분에 검색창에서 단어를 입력하는 동안 페이지 전체를 다시 읽을 필요 없이 실시간으로 유사한 단어들을 확인해볼 수도 있고, 메일이나 블로그에서 글을 쓰는 동안 따로 백업을 받지 않아도 글이 자동으로 저장되어 예상치 못한 일이 발생했을 때도 작성하고 있던 글을 복구할 수 있습니다.

Ajax와 더불어 자바스크립트의 전반적인 활용 분야도 많이 늘어났습니다. 클라이언트 사이드에서 폼 검증 용도 정도로만 제한적으로 사용되던 자바스크립트는 이제 Ajax와 결합하여 그 활용 분야가 폭발적으로 늘어나는 추세입니다. 덕분에 자바스크립트 자체를 Ajax라고 부르는 경우도 많아졌습니다. 몇 년 전까지만 해도 자바스크립트의 실용적인 용도는 클라이언트 사이드 폼 검증밖에 없다고 믿는 사람이 많았습니다. 그 외에는 눈에 거슬리는 조잡한 효과나 주는 언어로 인식하고 있었죠. 하지만 이제는 자바스크립트의 입지가 더욱 좋아지고 있습니다. 기존에는 서버에서 페이지 대부분을 생성하고 자바스크립트는 거기에 약간의 양념을 얹는 정도였다면 이제는 점점 서버에서의 처리는 자료의 입/출력 정도로 제한하고 많은 부분을 클라이언트 사이드에서 자바스크립트를 이용해 처리하는 방향으로 가고 있습니다.

지금까지 Ajax를 이용해 웹 경험을 획기적으로 변화시킨 사례들이 여럿 나왔지만 Ajax의 활용 분야는 앞으로도 더 많이 남아 있습니다. 이런 새로운 활용 분야를 개척해나가려면 우선 기존의 활용 사례를 살펴보는 것이 중요한데, 이 책의 저자는 기존의 Ajax 활용 사례 중 주요한 몇 가지를 뽑아 이해하기 쉽도록 차근차근 설명하고 있습니다. 또한 이러한 Ajax 애플리케이션을 PHP와 어떻게 연동하는지도 상세히 설명하고 있습니다. 부디 이 책에서 소개하는 자바스크립트와 Ajax, PHP의 다양한 활용 방법이 새로운 개선 사례를 만들어내는 데 필요한 발판이 됐으면 하는 바람입니다.

1장 Ajax와 자바스크립트, 웹 애플리케이션의 미래
웹 애플리케이션
- 웹 애플리케이션의 장점
웹사이트의 역사
- HTTP와 HTML
- PHP와 기타 서버 사이드 기술
- 자바스크립트와 기타 클라이언트 사이드 기술
- 그리고 또 다른 기술
Ajax의 이해
Ajax와 PHP를 이용한 간단한 애플리케이션 작성
- [예제] Ajax 입문
정리

2장 자바스크립트로 클라이언트 사이드 작업하기
자바스크립트와 DOM
- [예제] 자바스크립트와 DOM
자바스크립트 이벤트와 DOM
- [예제] 자바스크립트 이벤트와 DOM
DOM 함수를 이용한 문서 생성
- [예제] DOM 스크립트
자바스크립트에서의 DOM과 CSS
- [예제] 자바스크립트에서의 CSS 사용
XMLHttpRequest 객체 사용
- XMLHttpRequest 객체 생성
- IE에서 최신 버전의 XMLHttpRequest 객체 획득
- XMLHttpRequest를 이용해 서버에 요청 보내기
- 서버 응답 처리
- [예제] XMLHttpRequest를 이용해 비동기 요청 보내기
XML 문서
- [예제] XMLHttpRequest과 XML을 이용한 비동기 호출
- 오류와 예외 처리
- XML 구조 생성
정리

3장 PHP와 MySQL로 서버 사이드 개발하기
PHP와 DOM
- [예제] Ajax와 PHP 연동
파라미터 넘기는 방법과 PHP 오류 처리
- [예제] PHP 파라미터 넘기기와 오류 처리
외부 서버 접속과 자바스크립트 보안
- [예제] 외부 서버 접근하기
프록시 서버 스크립트
- [예제] 프록시 서버 스크립트를 이용해 외부 서버 접근하기
비동기 요청을 반복적으로 보내는 프레임워크
- [예제] 반복 작업 처리
MySQL
- 데이터베이스 테이블 생성
- 자료 처리
- 데이터베이스에 접속해서 쿼리 실행하기
- [예제] PHP와 MySQL
마무리 및 전체 구조 살펴보기
- [예제] 알리미 애플리케이션 작성
정리

4장 빠르고 안전한 폼 유효성 검증
Ajax를 이용한 폼 유효성 검사
- 스레드 세이프 Ajax
- [예제] 폼 유효성 검증
정리

5장 가벼운 웹기반 채팅 솔루션 작성하기
Ajax를 이용한 채팅 솔루션
웹기반 채팅 애플리케이션 작성
- [예제] 웹 기반 채팅 애플리케이션
정리

6장 실시간 단어제안과 자동완성
Ajax를 이용한 단어제안과 자동완성
- 구글 검색어 제안
단어제안과 자동완성 기능 만들기
- [예제] 단어제안과 자동완성 기능
정리

7장 SVG로 실시간 차트 그리기
Ajax와 SVG로 실시간 차트 만들기
- [예제] 실시간 SVG 차트 작성하기
정리

8장 다이내믹 데이터 그리드
클라이언트 사이드 XSLT를 이용한 데이터 그리드 작성
- [예제] 다이내믹한 데이터 그리드
정리

9장 웹 기반 RSS 리더 작성하기
RSS 다루기
- RSS 문서의 구조
- 구글 리더
RSS 리더 작성
- [예제] 웹 기반 RSS 리더
정리

10장 드래그앤드롭 UI작성하기
웹에서의 드래그 앤 드롭
- 쇼핑 카트
- 정렬 가능한 목록
드래그 앤 드롭이 가능한 목록 작성
- [예제] 드래그앤드롭 UI를 이용한 업무 관리
정리

부록 A 작업 환경 설정
윈도우 환경 설정
- 아파치 설치
- MySQL 설치
- PHP 설치
*nix 계열의 운영체제 환경 설정
- 아파치 설치
- MySQL 설치
- PHP 설치
phpMyAdmin 설치
Ajax 데이터베이스 준비