구조적이고 효율적인 웹 애플리케이션 개발을 위한 9가지 Ajax 패턴과 실전 예제!
기존 Ajax 서적과는 달리, 웹 서버/클라이언트 구조에 대한 통찰력을 제시한다.

Ajax와 REST를 하나의 솔루션으로 묶은 다이내믹한 웹 애플리케이션을 개발하자!


[ 책 소개 ]

Ajax는 우리를 다음 세대의 웹 애플리케이션으로 인도하고 있다. Ajax는 서버로부터 클라이언트를 분리함으로써 서버/클라이언트의 경계를 깨뜨렸지만, 여전히 콘텐츠를 뽑아내기 위해 서버는 필요하다. Ajax와 서버를 가장 효과적으로 사용하기 위해서는 REST와 웹 서비스를 정의하기 위한 구조적인 스타일을 이해해야 한다.

『Ajax 패턴과 베스트 프랙티스』에서는 Ajax와 REST를 하나의 솔루션으로 묶는 다이내믹한 웹 애플리케이션을 다룬다. REST의 커다란 이점은 Ajax와 마찬가지로 오늘날 존재하는 기술과 함께 사용될 수 있다는 점이다. 수백만의 클라이언트 컴퓨터들은 Ajax를 사용할 준비가 이미 되어 있고, 수백만의 서버들은 REST를 사용할 준비가 되어 있다. 이 책에 나오는 패턴들의 주요 이점은 클라이언트와 서버가 분리되어 있으며 특정 기술에 의존하지 않는다는 점이다. 필자가 사용하는 이 패턴들은 클라이언트와 서버 사이의 계약으로서의 HTTP 프로토콜에 기반하고 있으며, 실제 프로젝트에 쉽게 적용할 수 있거나 재사용 될 수 있다. 이 패턴들을 사용하면 많은 문제를 해결할 수 있을 것이다.

클라이언트와 서버를 분리하고, 자원과 표현을 분리하고, HTTP 폼 포스팅의 문제를 해결하며, URL을 관리하면서 Ajax에 관해 전반적으로 이해할 수 있게 될 것이다. 이 책을 통해 디버깅, 유지, 확장이 가능한 Ajax 애플리케이션을 쉽게 작성할 수 있을 것이다. 독자 여러분이 경험이 많은 개발자라면 이 책이 가장 효과적이고 다이내믹한 Ajax 애플리케이션을 제작하는 데 있어 귀중한 자료라는 것을 알게 될 것이다. 지금 당장 Ajax를 사용하려는 모든 플랫폼 개발자들을 위한 책이다.


[ 이 책의 구성 ]

1장과 2장을 제외하면 이 책은 기본적으로 패턴을 다룬다.

1장 - 책과 Ajax의 토픽에 대해 소개한다. 또한 Ajax의 배경에 대해 알려주며 Ajax와 다른 방법론(예를 들어 전통적인 클라이언트-서버)을 비교한다.
2장 - XMLHttpRequest 객체에 대해 소개한다. Ajax 애플리케이션을 작성할 때 XMLHttpRequest 객체는 HTTP 서버와 통신하기 위한 핵심 기술이다. XMLHttpRequest 객체를 사용할 때 가장 좋은 습관 역시 보여 준다.

3장과 그 후는 패턴을 소개한다.

3장 - Content Chunking 패턴: 점진적으로 HTML 페이지를 생성할 수 있고, 각 HTML 페이지의 로직이 분산되며, 콘텐츠가 로딩되는 로직과 시점을 사용자가 결정할 수 있게 한다.
4장 - Cache Controller 패턴: 일관된 방법으로 자원을 임시적으로 저장하는 메커니즘을 호출자에게 제공해 결과적으로 애플리케이션 사용성을 높여준다.
5장 - Permutation 패턴: (HTML이나 XML과 같은) 표현으로부터 (URL과 같은) 자원을 분리하기 위해 서버에서 사용되는 패턴이다. 이런 분리는 말단의 사용자가 자원에만 집중을 해 콘텐츠에 대해서는 신경쓰지 않게 한다. 예를 들어 클라이언트의 은행 계좌가 http://mydomain.com/ accounts/user라는 URL에 있다면 같은 URL이 장치(전화, PC와 같은 것들)에 관계없이 사용될 수 있다.
6장 - Decoupled Navigation 패턴: 클라이언트 측의 코드와 내비게이션이 더 작은 모듈 단위로 분리될 수 있는 방법을 알려주는 방법론을 정의한다. 이를 통해 클라이언트 측 콘텐츠는 생성, 갱신, 유지가 더 단순해진다.
7장 - Representation Morphing 패턴: 주어진 표현의 상태를 조합하고, 표현이 한 지점에서 상태가 없는 다른 표현으로 변이를 할 수 있는 메커니즘을 제공한다.
8장 - Persistent Communications 패턴: 서버와 클라이언트가 영속적으로 통신할 수 있는 메커니즘을 제공해 이전의 정보 없이도 서버는 클라이언트로 데이터를 전송할 수 있고 그 역도 가능해진다.
9장 - State Navigation 패턴: HTML 콘텐츠 사이를 내비게이션하는 가운데에도 상태가 보존되게 하는 기반 구조를 제공한다.
10장 - Infinite Data 패턴: 시간적 관점에서 무한해 보이는 데이터를 관리하고 보여준다.
11장 - REST-Based Model View Controller 패턴: 웹 애플리케이션에 의해 생성된 것이 아닌 콘텐츠를 마치 웹 애플리케이션에서 생성된 것처럼 나타나게 변형해 콘텐츠에 접근하게 한다.

[ 저자 소개 ]

저자 | 크리스찬 그로스
인터넷 패러다임 속에서의 풍부한 경험을 바탕으로 한 컨설턴트/트레이너/멘토이다. 그는 알토바, 다임러 벤츠, 마이크로소프트와 냇웨스트 등을 위한 기업용 소프트웨어와 솔루션을 개발해왔다. 저자는 『Applied Software Engineering Using Apache Jakarta Commons』, 『Open Source for Windows Administrators』, 『A Programmer's Introduction to Windows DNA』, 『Foundations of Object-Oriented Programming Using .NET 2.0 Patterns』 등 여러 책을 저술했다. 소프트웨어 개발, JAX, BASTA 등 많은 컨퍼런스에서 정기적으로 연설을 하고 있으며, 다양한 컨퍼런스의 분과위원장을 맡고 있다.

기술 감수자 | 폴 타이마
폴 타이마는 실리콘 밸리에 자리한 소프트웨어 컨설트업체인 아웃스킴(Outscheme)의 대표이다. 그는 '동적 언어의 성능'이라는 연구 주제로 시라큐즈에서 컴퓨터공학 Ph.D 학위를 받았다. 폴은 『Java Primer Plus』라는 책을 포함해 자바 프로 매거진의 자바 VM 칼럼인 《VM Roadtest》, 《Dr.Dobb's Journal》과 《Communications of the ACM》에 다수의 글을 기고하는 저술가이기도 하다.

[ 저자 서문 ]

여러분은 아마도 Ajax라든가 REST, 패턴과 같은 용어 때문에 이 책을 집어 들었을 것이다. 그리고는 이 소개를 넘기고 페이지를 따라가면서 훑어 볼 것이다. 그러나 일단 읽기를 잠시 멈추고, 이번 소개를 읽은 후 이 책을 살 것인지에 대해서 결정을 내리길 바란다.
여러분이 Ajax에 대해서 알아야 하는 이유는 다음과 같다.

▶ Ajax은 두문자이며, 이 두문자가 함축하고 있는 것은 거대하다.
▶ Ajax는 단지 비대한 클라이언트, 자바스크립트, XML, 비동기적 동작 등을 위한 것이 아니라 차세대 웹 애플리케이션을 개발하기 위한 것이다.
▶ 우리는 차세대 웹 애플리케이션을 만들기 위한 시작 단계에 서있다.

아직까지 읽고 있다면 일단 여러분의 흥미를 끌었으니 다행한 일이다. 이제 이 책이 무엇에 관한 것인지 이야기 하겠다.

▶ Ajax를 사용한다는 것은 REST, HTTP, 인터넷을 사용해 웹 애플리케이션을 만든다는 것이다. 이 책의 패턴들은 자바스크립트가 XMLHttpRequest 객체를 제어해 XML이나 HTML을 처리하는 방법을 보여준다.
▶ 이 책에서 서버 측의 구현은 자바나 C#을 사용했다. 패턴들은 파이썬이나 루비 온 레일즈를 사용할 수 있다. 자바나 C#을 사용한 이유는 이 책을 쓰는 시점에서 가장 많은 개발자들이 사용한다고 생각했기 때문이다. 필자는 열렬한 파이썬 프로그래머이기도 해서 다음 판을 쓸 때에는 파이썬과 루비 온 레일즈의 예제까지 확장했으면 하는 바람이다.
▶ 책의 패턴은 플렉스(Flash Ajax) 같은 컨텍스트에서도 사용될 수 있다. 예를 들어 Permutation 패턴이 플렉스 콘텐츠를 생성하는 데 사용될 수 있다.

좋다. 아직까지도 이 책을 덮지 않고 있다면 여러분은 여전히 흥미가 있고 좀 더 시간을 사용할 생각이 있다는 뜻이리라. 이쯤에서 필자가 말하고 싶은 것은 소개에 패턴들의 로드맵이 들어있기 때문에 끝까지 읽으라는 것이다. 그 후 Ajax가 무엇이며 무엇을 할 수 있는지 다루는 1장을 훑어보라. 다음 '동기'와 '아키텍처'에 중점을 두고 패턴들을 훑어보라. 그 후에도 여전히 흥미롭다면 패턴이 하려고 하는 바를 상세하게 다룬 남은 장들을 읽기 위해 책을 구입하라. 패턴들을 가지고 실험을 해보고 싶다면 http://www.devspace. com/ajaxpatterns 사이트를 방문하기를 추천한다. 여기에서는 실제로 패턴을 다루거나 다루는 곳으로 인도할 것이다.

Ajax에 대한 비전은 무엇인가?
Ajax의 비전에 대해 철학적인 설명을 하는 것은 도대체 Ajax가 무엇인가 하는 질문만 일으킬 것이다. 어떤 이는 Ajax가 클라이언트 쪽 만을 위한 기술이라고 말한다. 어떤 이는 서버 프레임워크의 확장이라고 한다. 또 다른 사람들은 "제길, 그건 새로운 기술 어쩌구인데, 지금의 기술 나부랭이는 무시될 거야"라고도 한다. 그러나 REST를 무시하고 말하게 되면 마치 "그게 액체라면 사람들이 마실 수 있어"라고 하는 것과 같다. 물론 사람은 액체라면 뭐든 마실 수 있기는 하다. 그러나 더 큰 질문은 그걸 마신 사람이 살아남을 것인가이다. 살 수도 있겠지만, 죽을 수도 있다! 의심 없이 마시는 것은 러시안 룰렛을 하는 것과 같다. REST와 XML, JSON, 자바스크립트를 무시하고 Ajax를 사용하는 것도 이와 같다. Ajax는 새롭고 흥미로운 방식으로 조합될 수 있는 이런 신기술들 때문에 의미가 있는 것이다.
Ajax에 대한 필자의 비전은 애플리케이션을 제작하는 새로운 방법으로서의 기술이나 표현을 넘어선다. 웹 애플리케이션을 만들던 예전 시절에 서버는 콘텐츠의 생성, 내비게이션, 제어를 위한 책임이 있었다. 웹 애플리케이션은 상호작용을 위한 복잡한 서버 프레임워크에 의존하는 기술이 됐다. Ajax는 이런 결합을 깨뜨린다!
Ajax는 서버로부터 클라이언트를 분리시키기 때문에 결합을 깨뜨린다. Ajax 애플리케이션은 여전히 서버를 필요로 하지만 언제, 어디서, 어떻게 콘텐츠를 배달해야 하는지 결정할 수 있다. 서버에 의존하는 웹 애플리케이션은 서버가 존재할 때에만 존재할 수 있는 강하게 결합된 애플리케이션이다. 클라이언트가 필요로 하는 어떤 콘텐츠이든 서버에 의해 통제된다. Ajax를 사용하면 콘텐츠에 초점을 맞출 수 있다. Content Chunking 패턴과 같은 경우 콘텐츠의 조각들을 조합할 수 있다.
필자가 Ajax에 대해서 정말 걱정스러운 부분은 사람들이 Ajax를 구현한답시고 알려진 프레임워크에 의존하는 서버 프레임워크를 팔려고 할 때이다. Ajax가 서버로부터 클라이언트를 분리한다면 왜 서버 프레임워크가 Ajax를 구현하기 위해 사용돼야만 하는가? 그 논리는 말이 안 된다. 프레임워크는 Ajax와 비슷한 구조적인 설계를 가능하게 하기 위한 확장이라는 주장은 이해할 수 있다. 그러나 서버 프레임워크가 Ajax 애플리케이션을 가능하게 하기 위해 필수적이라는 점은 받아들일 수 없다.

이 책에서는, 유지, 확장될 수 있는 구조를 생성하기 위한 목적으로 서버-클라이언트를 분리하기 위해 광범위하게 사용되는 특정 패턴을 사용함으로써 발생하는 Ajax의 장점을 보여주는 데 초점을 두고 있다. 개인적으로 생산성도 중요한 것이지만 어떤 면에서 더 중요한 것은 내가 무엇을 하고 있고, 왜 했는지 파악하는 역량이라고 믿는다.


[ 역자 소개 ]

최재훈
2001년에 KAIST를 힘겹게 졸업한 후 화상회의 솔루션을 개발하는 SW업체와 ATM기기의 드라이버를 제작하는 업체를 거쳐, 현재는 (주)넥슨에서 자사 게임들을 서비스하는 웹사이트를 제작, 관리하는 팀을 맡고 있다. 웹에 대한 기술뿐만 아니라 기획 관점의 서비스 모델, 트렌드에도 관심이 많다. 또래보다 비교적 늦게 면허를 따, 요즘은 운전하는 재미에 빠져있다.


[ 역자 서문 ]

언젠가부터 네이버의 검색 입력폼에 검색어를 입력하면, 유사 단어들이 검색 폼밑에 주루룩 달리기 시작했다. 그 때는 그게 뭘가지고 구현했는지 알지 못한 채 그저 신기해 했었다. "페이지를 다시 불러오지도 않는데...ActiveX는 따로 설치하지는 않았던거 같고...뭘까?" 웹쪽 분야에서 일을 하지 않았던 당시에는 그저 잠깐 호기심만 느끼고 대충 넘어갔었다.
우연찮게 웹과 인연이 생기면서 일을 하다가 Ajax라는 말을 처음 들었던 것이 아마도 2006년 초였던 것 같다. 당시 웹쪽 개발에 발을 들인지 얼마 되지 않아 경험이 일천했던 나에게(지금도 뭐 별반 달라진 것은 없는 것 같다) Ajax는 굉장히 신선한 기술로 다가왔었다. Ajax를 이용하여 페이지 전체를 로딩하지 않고도 필요한 부분만 갱신하게 되면 쓸데없는 트래픽도 발생하지 않게 되고, 좀 더 데스크탑 애플리케이션에 가까운 사용성을 제공할 수 있다는 점은 굉장히 매력적인 것이었다. 그 즈음에 RIA(Rich Internet Application)라는 용어도 접하게 된 것 같다.

"Ajax? 그거 뭐 그냥 XMLHttpRequest 가지고 서버랑 통신하면 되는 거 아니야? 그거 예전부터 있던 컴포넌트야"라고 말할지도 모르겠다. 썩 틀린 말은 아니긴 하지만 그렇게 이야기하는 것은 Ajax를 굉장히 좁은 시각으로 바라보고 있는 것이다. 게다가 요즘은 관련 프레임워크들도 속속 발표되어 복잡한 내용을 모르고도 사용할 수 있게 되어 더더욱 쉽게 생각해 버릴 위험(?)이 높아졌다. 그러나 Ajax는 단지 XMLHttpRequest 객체를 사용하는 스킬의 관점에서 접근할 주제가 아니라, 향상된 사용성을 위한 고려, 이를 위한 페이지와 인포메이션 아키텍처의 설계, 구조적인 서버-클라이언트의 구현 등 웹 애플리케이션 전반에 걸쳐 기존과는 다른 관점에서 포괄적으로 접근해야 할 주제라고 보는 것이 옳다고 본다.

그런 면에서 이 책에서 다루는 주제들은 역자에게는 퍽이나 반가운 것들이었다. 앞서 포괄적으로 접근해야 한다고 말은 했지만 역자도 어떤 것들을 어떻게 고민해야 할지 막연해 하고 있었는데, 이 책은 그런 부분들을 잘 안내하고 있다. XMLHttpRequest 객체의 사용법, 유명한 프레임워크의 사용법, 웹 프로젝트의 여러 기능을 구현하는 법 등을 안내하는 기존의 서적들(폄하하는 것이 아니니 오해없길 바란다)과는 아마 관점이 많이 다르리라 생각된다. '패턴'이라는 타이틀을 달고 있으니 이 책도 당연히 실무 프로젝트에 적용하는 것을 목표로 하고 있기는 하지만, 읽고, 예제를 돌려보고, 바로 적용하는 수준의 즉각적인 활용서라기보다는 웹 애플리케이션을 설계하기 위한 좀 더 추상적이고 깊이 있는 통찰력을 가지는 데에 주안점을 둔 전략서라고 보는 것이 맞을 것 같다.

필자는 HTTP 통신 프로토콜 스펙, 아파치/IIS 등의 웹서버, IE/파이어폭스/사파리 등의 웹브라우저, 자바/서블릿/C#/ASP.NET 등의 개발 언어와 프레임워크, 자바스크립트, 객체 지향 프로그래밍 등의 여러 분야를 해박한 지식으로 다루면서 Ajax를 이용한 구조적이고 효율적인 웹 애플리케이션 개발을 이야기하고 있다. 읽다 보면 웹 프로그래밍에 관련된 심도있는 주제들이나, 프로그래밍하면서도 신경쓰지 않았던 주제들에 대해 다뤄보게 되는 경우도 많으리라 생각된다. 간혹 난해한 내용이 나올 수도 있는데, 이 책을 좀 더 편하게 읽기 위해 역자가 제공하는 팁이 있다면, 각 장마다의 '의도'와 '동기' 섹션을 읽으면서 각 패턴의 필요성에 대해서 먼저 이해하고, 이후 '구현' 섹션에서는 본문보다는 코드 중심으로 먼저 훑어 보고, 다시 차근차근 내용을 읽어보면 이해하는 데 도움이 많이 될 것이다.

목차

• 1장 Ajax 개요 19
  • 백문이 불여일견 20
  • Ajax 적용 사례 26
  • Ajax 아키텍처 기초 28
    • 데이터를 다루는 Ajax 29
    • 내비게이션을 다루는 Ajax 30
  • Ajax와 다른 애플리케이션 유형의 비교 32
    • 로컬에 설치된 리치 클라이언트 32
    • 리치 클라이언트 웹 서비스 34
    • 기존의 웹 애플리케이션 35
  • 요약 35
    
• 2장 Ajax 더 들여다보기 37
  • 급한 사람을 위한 Ajax 37
    • REST 이론의 이해 37
    • REST 데이터의 구현 39
    • Ajax 애플리케이션의 구현 40
    • Ajax와 REST의 통합 42
    • Ajax와 REST를 합칠 때 생길 수 있는 문제 43
  • XMLHttpRequest의 상세 43
  • 팩토리 패턴의 이용 45
    • XMLHttpRequest 팩토리의 정의 47
    • 팩토리를 이용한 Ajax 애플리케이션의 재작성 48
  • 비동기식 요청 49
  • XMLHttpRequest의 실제 적용 53
    • 비동기 호출 메커니즘의 구현 53
    • 다른 도메인으로 요청 보내기 65
  • 요약 70
    
• 3장 Content Chunking 패턴 71
  • 의도 71
  • 동기 71
  • 적용 범위 72
  • 관련된 패턴 73
  • 아키텍처 73
    • 구현 순서 73
    • 내용 조각의 형식 결정 77
  • 구현 78
    • HTML 프레임워크 페이지의 구현 78
    • 동적 HTML을 이용한 내용 삽입 80
    • 바이너리 데이터와 URL, 이미지 삽입 87
    • 자바스크립트의 삽입 90
  • 요약 96
    
• 4장 Cache Controller 패턴 97
  • 의도 97
  • 동기 97
  • 적용 범위 100
  • 관련된 패턴 100
  • 아키텍처 101
    • HTML과 HTTP 캐시 관리 101
    • 일반적으로 HTTP 만료 캐시는 권장되지 않는다 103
    • 더 나은 접근: HTTP 유효성 모델을 사용 103
    • 서버 측 캐싱에서 고려해야 할 점 105
    • 정적 HTTP 유효성 모델의 정의 107
    • 동적 HTTP 유효성 모델의 정의 109
  • 구현 110
    • 수동적 캐시 구현 111
    • 서버 측 HTTP 유효성 모델 구현 120
  • 요약 128
    
• 5장 Permutation 패턴 129
  • 의도 129
  • 동기 129
  • 적용 범위 134
  • 관련된 패턴 134
  • 아키텍처 135
    • 자원이 표현으로부터 분리돼야 하는 이유 135
    • 접근 허용을 위한 쿠키와 HTTP 인증의 사용 138
    • 쿠키 사용 141
    • 도서 정보 애플리케이션 예제 141
  • 구현 147
    • URL 재작성 147
    • 장바구니 예제 155
  • 요약 170
    
• 6장 Decoupled Navigation 패턴 171
  • 의도 171
  • 동기 171
  • 적용 범위 175
  • 관련된 패턴 177
  • 아키텍처 178
  • 구현 180
    • 액션 기능의 구현 180
    • 공통 데이터 기능의 정의와 구현 190
    • 표현 기능의 구현 206
    • HTML 컴포넌트의 사용 210
  • 요약 212
    
• 7장 Representation Morphing 패턴 215
  • 의도 215
  • 동기 215
  • 적용 범위 221
  • 관련된 패턴 221
  • 아키텍처 222
    • 기본적인 이론 222
    • 패턴이 HTML 컴포넌트가 아닌 이유 223
    • 상태 블록의 정의 225
  • 구현 229
    • 프레임워크의 구현 229
    • 표현 참조 포인트의 구현 231
    • 구현 상세 239
  • 요약 242
    
• 8장 Persistent Communications 패턴 243
  • 의도 243
  • 동기 243
  • 적용 범위 245
  • 관련된 패턴 246
  • 아키텍처 247
    • 인터넷이 “깨진” 이유 247
    • 폴링 방식의 구현 250
  • 구현 252
    • 예제: 전역 상태 자원 252
    • 예제: 존재 탐지 267
    • 예제: 서버 푸시 272
    • 버전 넘버와 갱신 281
    • 성능에 대한 고려 282
  • 요약 282
    
• 9장 State Navigation 패턴 283
  • 의도 283
  • 동기 283
  • 적용 범위 286
  • 관련된 패턴 286
  • 아키텍처 286
    • 사용자 관점에서의 이상적인 해결책 287
    • 웹 애플리케이션으로의 확장 290
    • 프로토콜 레벨에서의 상태 관리 295
  • 구현 299
    • 클라이언트에서 요청의 처리 300
    • 서버에서 요청의 처리 310
  • 요약 321
    
• 10장 Infinite Data 패턴 323
  • 의도 323
  • 동기 323
  • 적용 범위 324
  • 관련된 패턴 325
  • 아키텍처 325
  • 구현 328
    • HTML 클라이언트의 구현 330
    • 작업 관리자의 구현 337
  • 요약 355
    
• 11장 REST-Based Model View Controller 패턴 357
  • 의도 357
  • 동기 357
  • 적용 범위 359
  • 관련된 패턴 359
  • 아키텍처 360
    • 전체적인 그림 360
    • 적당한 자원의 정의 363
    • 인터페이스 호출의 정의 365
    • 데이터 포맷의 기본과 기타 정의 369
  • 구현 371
    • 검색의 구현 372
    • 검색 엔진 클라이언트의 기반 구조 생성 376
    • 전체 통합 383