(https://github.com/AcornPublishing/php-ajax)

기존의 딱딱한 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 리더
■ 드래그 앤 드롭 UI로 자료를 정렬하고 서버에 저장하는 리스트(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)에서 예제 코드와 추가적인 리소스를 받아볼 수 있다. 다운로드되는 파일에 사용법도 명시해뒀다.


[ 추천의 글 ]

자바스크립트가 처음 세상에 공개된 것이 언제인지 혹시 알고 계시나요? 바로 1995년입니다. 국내에 인터넷 상용 서비스가 처음 생긴 것이 1994년이고 미국에서 야후!가 설립된 것이 1995년이니 자바스크립트는 월드 와이드 웹(WWW) 세상에서 꽤 오래된 셈입니다. 하지만 자바스크립트는 오랜 기간 동안 그다지 주목을 받지 못했습니다. 자바스크립트는 웹 페이지 사용자에게 여러 편리한 기능을 제공할 수 있는 언어였지만 개발자에게는 깊이 생각하지 않고 복사해 붙여넣기(Copy & Paste) 신공만을 발휘해서도 목적을 충분히 달성할 수 있는 중요하지 않은 기술일 뿐이었습니다.

하지만 자바스크립트가 나온 지 10년이 지난 후, 자바스크립트는 Ajax로 인해 다시 한 번 주목을 받게 됩니다. 브라우저가 발전함에 따라 자바스크립트로 할 수 있는 작업이 많이 늘어난 것도 한몫을 했지만 페이지의 일부분만을 갱신할 수 있는 Ajax가 등장하면서 웹의 특성을 완전히 바꿔버렸기 때문입니다. Ajax를 사용하지 않는 기존의 웹은 간단하게 표현하면 문서와 문서의 연결에 지나지 않았습니다. 문서 내용이 일부가 바뀌든 전체가 바뀌든 서버에서는 사용자가 요청할 때마다 하나의 문서를 보내줬습니다. 하지만 Ajax를 사용하면 문서 간의 연결이라는 특성이 사라집니다. 한 문서 안에서 필요한 부분의 내용만 변경할 수 있습니다. 이로 인해 사용자는 이전보다 더욱 편리하게 웹을 이용할 수 있게 됐습니다. 도움말을 보기 위해 새 창을 띄울 필요도 없게 됐고, 새로 도착한 메일이 있는지를 확인하려고 브라우저를 새로 고치지 않아도 됩니다.

이 책은 이렇게 새롭게 주목받고 있는 자바스크립트와 Ajax에 대한 내용으로 구성되어 있습니다. 여기에 서버 측 기술인 MySQL이나 PHP에 대한 내용과 XML에 대한 설명이 포함되어 있으므로 이 책을 통해 서버와 클라이언트 기술을 함께 사용해 유용한 결과물을 만들어낼 수 있는 역량을 기를 수 있을 것입니다. 그리고 이 책은 이해하기 쉬우면서도 웹사이트에 바로 적용할 수 있는 유용한 예제로 구성되어 있어 단순히 책을 읽고 책 속의 예제 코드를 따라해보는 것에 그치지 않고 여러분이 만드는 서비스에 바로 적용할 수 있을 것입니다.

이제 자바스크립트를 사용하지 않으면 불편할 정도로 많은 웹 서비스에 자바스크립트가 적용되어 있습니다. 여러분이 일상적으로 웹 서비스를 이용하면서 당연하다고 느끼는 부분조차 자바스크립트가 적용되어 있을 가능성이 매우 높습니다. 자바스크립트가 만능은 아니지만 한계와 단점을 명심하고 적절히 사용한다면 사용자에게 좋은 경험과 만족감을 선사할 수 있을 것입니다.

이 책이 여러분의 자바스크립트 실력에 많은 도움이 되기를 기원합니다.

[ 저자 소개 ]

크리스천 다리
다양한 최신 기술에 익숙한 소프트웨어 엔지니어로서 “Beginning E-Commerce” 시리즈 같은 유명 서적을 저술했다. 어린 나이에 프로그래밍을 시작한 저자는 12살에 처음 참가한 프로그래밍 대회에서 1등을 차지하기도 했다. 그 이후로도 많은 활동을 했으며 현재는 분산형 애플리케이션 구조 박사 과정을 밟고 있다. 크리스천은 자신이 지은 책의 피드백을 받는 것을 좋아한다고 하니 전하고 싶은 말이 있다면 부담 갖지 말고 그의 개인 웹사이트인 www.cristiandarie.ro에서 피드백을 남겨 보자.

보그단 브린자리아
루마니아 부쿠레슈티 소재의 폴리테니카 대학에서 자동제어와 컴퓨터공학 학사와 석사 학위를 취득했다. 그리고 프랑스 파리의 에콜 폴리테크닉에서 컴퓨터공학 청강 수료증도 받았다. 그의 관심사는 임베디드 프로그래밍에서부터 분산, 모바일 컴퓨팅, 웹 기술에 이르기까지 다양하다. 현재 그리스 국립 은행의 가맹 은행인 밴카 로마니스카에서 인터넷 뱅킹과 보안 관련 프로젝트 관리 및 은행 업무에 새로운 기술을 도입하는 일을 담당하고 있다.

필립 치얼체스-토사
웹 기반 소프트웨어의 성장성을 굳게 믿고 있는 웹 개발자로, 그는 테이프 드라이브를 장착한 코모도어 64를 처음 접한 9살 때부터 개발을 시작했다. 루마니아에서 필립은 웹 개발 및 웹 디자인 회사인 eXigo(www.exigo.ro)를 운영하고 있다. 또한 현재 오라데아 대학에서 컴퓨터공학을 전공하고 있으며 루마니아의 PHP 커뮤니티인 www.phpromania.net에서도 활발하게 활동 중이다.

미하이 부치카
12살 때부터 프로그래밍과 프로그래밍 대회 출전(우승도 여러 번 했다)을 시작했다. 루마니아 부쿠레슈티 소재의 폴리테니카 대학에서 자동제어와 컴퓨터공학 학사 과정을 마쳤다. 현재 다양한 전자기기의 통신 소프트웨어를 제작하고 있다. 다양한 프로그래밍 언어를 다뤄봤지만 그가 가장 선호하는 언어는 여전히 C++라고 한다. 그 외에도 LGPL을 좋아하는 미하이는 『Beginning PHP 5 and MySQL E-Commerce』도 공동 집필했다. 그와 연락을 하고 싶다면 그의 개인 웹사이트인 www.valentinbucica.ro를 방문해보자.


[ 옮긴이의 말 ]

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

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

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

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

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


[ 옮긴이 소개 ]

나건표
캐나다 토론토 대학에서 컴퓨터공학을 전공하고 프리랜서 웹 개발자로 활동하던 중 귀국해 한국타피컴퓨터에 입사했다. 그곳에서 민원서류 발급기 프로그램 개발 업무를 하다 NHN으로 이직해 현재는 Ajax 개발을 주로 하고 있다. 스마트에디터 개발을 담당하고 있으며 최근에는 스마트에디터의 오픈소스화와 관련해서 더 많은 사용자를 기쁘게 만들 방법을 고민하는 중이다.

목차

• 1장 Ajax와 자바스크립트, 웹 애플리케이션의 미래
  • 웹 애플리케이션 ...25
    • 웹 애플리케이션의 장점 ...26
  • 웹사이트의 역사 ...27
    • HTTP와 HTML ...27
    • PHP와 기타 서버 사이드 기술 ...29
    • 자바스크립트와 기타 클라이언트 사이드 기술 ...30
    • 그리고 또 다른 기술 ...31
  • AJAX의 이해 ...32
  • AJAX와 PHP를 이용한 간단한 애플리케이션 작성 ...38
    • ｜예제｜AJAX 입문 ...41
  • 정리 ...52
    
• 2장 자바스크립트로 클라이언트 사이드 작업하기
  • 자바스크립트와 DOM ...54
    • ｜예제｜자바스크립트와 DOM ...57
  • 자바스크립트 이벤트와 DOM ...59
    • ｜예제｜자바스크립트 이벤트와 DOM ...61
  • DOM을 좀 더 자세히 살펴보자 ...64
    • ｜예제｜DOM ...65
  • 자바스크립트에서의 DOM과 CSS ...68
    • ｜예제｜자바스크립트에서의 CSS 사용 ...68
  • XMLHttpRequest 객체 사용 ...72
    • XMLHttpRequest 객체 생성 ...73
    • IE에서 최신 버전의 XMLHttpRequest 객체 획득 ...77
    • XMLHttpRequest를 이용해 서버에 요청 보내기 ...79
    • 서버 응답 처리 ...82
      • ｜예제｜XMLHttpRequest를 이용해 비동기 요청 보내기 ...84
  • XML 문서 ...91
    • ｜예제｜XMLHttpRequest와 XML을 이용한 비동기 호출 ...92
  • 오류와 예외 처리 ...97
  • XML 구조 생성 ...102
• 정리 ...103
  

3장 PHP와 MySQL로 서버 사이드 개발하기

• PHP와 DOM ...106
  • ｜예제｜AJAX와 PHP 연동 ...107
• 파라미터 넘기는 방법과 PHP 오류 처리 ...113
  • ｜예제｜PHP 파라미터 넘기기와 오류 처리 ...114
• 외부 서버 접속과 자바스크립트 보안 ...125
  • ｜예제｜외부 서버 접근하기 ...127
• 프록시 서버 스크립트 ...133
  • ｜예제｜프록시 서버 스크립트를 이용해 외부 서버 접근하기 ...134
• 비동기 요청을 반복적으로 보내는 프레임워크 ...141
  • ｜예제｜반복 작업 처리 ...144
• MySQL ...154
  • 데이터베이스 테이블 생성 ...155
  • 자료 처리 ...159
  • 데이터베이스에 접속해서 쿼리 실행하기 ...160
    • ｜예제｜PHP와 MySQL ...162
• 마무리 및 전체 구조 살펴보기 ...166
  • ｜예제｜알리미 애플리케이션 작성 ...170
• 정리 ...180
  

4장 빠르고 안전한 폼 유효성 검증

• AJAX를 이용한 폼 유효성 검사 ...182
  • 스레드 세이프 AJAX ...186
    • ｜예제｜폼 유효성 검증 ...187
• 정리 ...214
  

5장 가벼운 웹 기반 채팅 솔루션 작성하기

• AJAX를 이용한 채팅 솔루션 ...215
  • AJAX 채팅 솔루션 ...216
• 웹 기반 채팅 애플리케이션 작성 ...217
  • ｜예제｜웹 기반 채팅 애플리케이션 ...219

정리 ...241

6장 실시간 단어제안과 자동완성

• AJAX를 이용한 단어제안과 자동완성 ...244
  • 구글 검색어 제안 ...244
• 단어제안과 자동완성 기능 만들기 ...245
  • ｜예제｜단어제안과 자동완성 기능 ...246
• 정리 ...274
  

7장 SVG로 실시간 차트 그리기

• AJAX와 SVG로 실시간 차트 만들기 ...276
  • ｜예제｜실시간 SVG 차트 작성하기 ...280
• 정리 ...292
  

8장 다이내믹 데이터 그리드

• 클라이언트 사이드 XSLT를 이용한 AJAX 그리드 작성 ...294
  • ｜예제｜다이내믹한 데이터 그리드 ...296
• 정리 ...321
  

9장 웹 기반 RSS 리더 작성하기

• RSS 다루기 ...324
  • RSS 문서의 구조 ...324
  • 구글 리더 ...325
• RSS 리더 작성 ...326
  • ｜예제｜웹 기반 RSS 리더 ...327
• 정리 ...342
  

10장 드래그 앤 드롭 UI 작성하기

• 웹에서의 드래그 앤 드롭 ...343
  • 쇼핑 카트 ...344
  • 정렬 가능한 목록 ...344
• 드래그 앤 드롭이 가능한 목록 작성 ...345
  • ｜예제｜드래그 앤 드롭 UI를 이용한 업무 관리 ...348
• 정리 ...366
  

부록 A 작업 환경 설정

• 윈도우 환경 설정 ...368
  • 아파치 설치 ...369
  • MySQL 설치 ...371
  • PHP 설치 ...372
• nix 계열의 운영체제 환경 설정 ...374
  • 아파치 설치 ...375
  • MySQL 설치 ...375
  • PHP 설치 ...376
• phpMyAdmin 설치 ...377

정오표

[ p66 코드 주석 ]

// 첫 번째 <ui> 엘리먼트를 만든 후에 텍스트 노드 추가 → // 첫 번째 <li> 엘리먼트를 만든 후에 텍스트 노드 추가

// 두 번째 <ui> 엘리먼트를 만든 후에 텍스트 노드 추가 → // 두 번째 <li> 엘리먼트를 만든 후에 텍스트 노드 추가

// 세 번째 <ui> 엘리먼트를 만든 후에 텍스트 노드 추가 → // 세 번째 <li> 엘리먼트를 만든 후에 텍스트 노드 추가

// 생성한 3개의 <ui> 엘리먼트를 <ul> 엘리먼트에 추가 → // 생성한 3개의 <li> 엘리먼트를 <ul> 엘리먼트에 추가

※ 예제 코드의 주석도 <ui>가 <li>로 수정되어야 합니다.

[ p67 아래에서 4~5행 ]
예를 들어 ui 엘리먼트를 추가한다고 했을 때 DOM이 자동으로 <ui> 태그와 </ui> 태그를 생성해준다. → 예를 들어 li 엘리먼트를 추가한다고 했을 때 DOM이 자동으로 <li> 태그와 </li> 태그를 생성해준다.

2014.12.19 수정사항

[p127 : 1행]
http://www.random.org/cgi-bin/randnum?num=1&min=1&max=100
-> https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new

[p127 : 아래에서 2행]
// 서버 주소와 파라미터를 저장해둔다.
var serverAddress = "http://www.random.org/cgi-bin/randnum";
var serverParams "num=1" + // 생성할 랜덤 숫자 개수
"&min=1" + // 랜덤 숫자의 최소 범위
"&max=100"; // 랜덤 숫자의 최소 범위
->
// 서버 주소와 파라미터를 저장해둔다.
var serverAddress = "https://www.random.org/integers/";
var serverParams = "num=1" + // 생성할 랜덤 숫자 개수
"&min=1" + // 랜덤 숫자의 최소 범위
"&max=100" + // 랜덤 숫자의 최대 범위
"&col=1" +
"&base=10" +
"&format=plain" +
"&rnd=new";