Ajax와 자바스크립트 라이브러리 발표자 : 경준호(파이어준) 이메일 : to@firejune.com 안녕하세요, 코스모웨어라는 회사에서 UI개발을 하고 있는 경준호입니다. 간략하게 자기소개를 하겠습니다. 저는 미술대학을 졸업하고 웹 디자인을 시작으로 IT업계에 발을 들여놓았습니다. 플래시 액션스크립트를 빌미로 이렇다 할 기초도 없는 상황에서 프로그래밍을 시작하게 되었는데요, 여러 기술공유 사이트를 통해 닥치는 데로 소스를 분석하고 실행하면서 다양한 웹 기술을 습득하고 그 자료를 개인 블로그(firejune.com)에 게재하였습니다. 이 짓거리를 3년 동안 하다 보니 이런 자리에 까지 서게 되었습니다. 매우 영광으로 생각합니다. 사실 여러분들과 같은 일개 개발자에 지나지 않습니다. 강연이 익숙치 않아서 다소 실수를 범하더라도 너그럽게 이해해 주시기 바랍니다. 발표자 : 경준호(파이어준) 이메일 : to@firejune.com 블로그 : http://firejune.com

Agenda: 세션1: Ajax를 지원하는 자바스크립트 라이브러리 - 웹 개발을 빠르게 하는 라이브러리 - 라이브러리의 종류와 특징 - 라이브러리의 장점과 단점 - 라이브러리 선택시 유의사항 세션2: 실전 Ajax! 자바스크립트 라이브러리 활용 - Ajax에 대한 이해와 구현 - Ajax예제를 통한 실습과 소스 분석 - Ajax 인터페이스 컴포넌트 개발 - 서버-사이드 응답헤더의 역할 - 크로드-도메인 구현하기 - JSON 활용하기 오늘의 아젠다입니다. 크게 세 개의 세션을 나누어 진행할 예정입니다. 첫 번째 세션에서는 1시간 동안 자바스크립트 라이브러리에 대한 개략적인 소개와 사용방법 등을 설명하고 두 번째 세션에서는 두 시간에 걸쳐 자바스크립트 라이브러리를 사용하여 Ajax를 직접 구현하거나 시연할 예정입니다. 끝으로 세 번째 세션에서는 Ajax와 자바스크립트 라이브러리를 우수하게 적용한 사례를 살펴보고 분석해 보는 시간과 QA을 가지도록 하겠습니다. 세션3: Ajax사이트 구축사례 및 QA - 자바스크립트 RIA의 진수 - Gucci - 돋보이는 인터페이스 Apple.com - DAM 프로젝트 소개 - QA(질의/응답)

Ajax를 지원하는 자바스크립트 라이브러리 1st Session : Ajax를 지원하는 자바스크립트 라이브러리 - 라이브러리를 사용해 본 경험이 있으신 분? 지금부터 시작하겠습니다. 세션 1은 나두어 드린 문서를 중심으로 설명 드리도록 하겠습니다. 세션 1에 대한 내용은 월간 마이크로소프트 3월호(이번달) 특집으로 직접 기고한 내용의 원문에서 발췌한 것입니다.

웹 개발을 빠르게 하는 자바스크립트 라이브러리 “자바스크립트 라이브러리란 무엇인가요?” “자바스크립트 라이브러리의 필요성” “선택시 고려해야 할 점이 있나요?” 자료를 중심으로 설명 “자바스크립트 라이브러리 사용시 단점”

Prototype YUI jQuery Ext JS Dojo Toolkit GWT MooTools Script.aculo.us 자바스크립트 라이브러리의 종류와 특징 GWT Ext JS Mochikit MooTools RICO Script.aculo.us Prototype Xajax Qooxdoo 이 화면은 자료가 담고 있는 대표적인 자바스크립트 라이브러리를 태그-클라우드로 표현해 본 것입니다. 한번 즘은 들어보셨을 라이브러리 이름이 있나요? 시간 관계상 특정 JAVA완 관계없는 특정 플렛폼에 종속된 라이브러리와 선호도가 좋지 않은 라이브러리들의 설명은 생략하도록 하겠습니다. YUI jQuery Dojo Toolkit SPRY

이 자료는 ajaxian. com에서 2006년에 조사한 내용입니다. ajaxian 이 자료는 ajaxian.com에서 2006년에 조사한 내용입니다. ajaxian.com은 Ajax를 전문으로 다루는 유명한 외국 블로그죠. 이 자료는 한 주에 걸쳐 865명이 응답한 결과라고 합니다. 다소 신빙성이 떨어지기는 하지만 현재상황도 위 조사내용과 크게 변동이 없을 것이라 생각됩니다. 전체 50%에 육박하는 사용자가 prototype & scriptaculous를 선호하고 있습니다. 뒤를 이어 Dojo Toolkit, DWR(DWR은 Direct Web Remoting의 약자로서 자바기반 프레임웍입니다.) 그리고 Moo.fx는 현재 MooTools로 개명되었지요. 그리고 jQuery, 야후UI, Rico가 순위를 잇고 있군요. Atlas는 현재의 ASP.NET Ajax 프레임웍입니다. 현재, 개인적인 생각으로는 MooTools와 jQuery의 선호도가 대폭 상승 되었을 것으로 예상됩니다.

실전 Ajax! 자바스크립트 라이브러리 활용 2nd Session : 우선 Ajax가 무엇인지 알아보고 여러가지 실습을 통해 몸으로 느끼는 Ajax를 체험하게 해 드릴 예정입니다.

“firefox의 초강력 디버그 플러그인 firebug” 실습 준비 “Aptana를 아시나요?” “firefox의 초강력 디버그 플러그인 firebug” “간단한 아파치 데몬 - Xampp” http://aptana.com/ 이클립스기반 클라이언트-사이드 작업에 특화된 통합 개발 환경을 제공하는 개발 도구 입니다. http://getfirebug.com/ 자바스크립트 디버깅의 최강자라고 감히 말씀 드릴 수 있는 파이어폭스 브라우저의 플러그인입니다. 특히 Ajax 작업시 필수라고 할 수 있겠습니다. http://www.apachefriends.org/en/xampp.html 간단한 셈플을 만들기위해 즐겨 사용하는 아파치에 PHP와 MySQL을 통합으로 설치해주는 서버입니다. 자바를 기반으로 작업을 해 본적이 없어 자바를 기반으로 셈플을 소개해 드리지 못하는 점 양해해 주세요.

Ajax에 대한 이해과 구현 “Ajax란 무엇인가요?” “기존 기술과의 차이점” “Ajax에 대한 비판” “Ajax와 접근성” Ajax(Asynchronous JavaScript and XML)는 대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. 표현 정보를 위한 HTML (또는 XHTML) 과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML 이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다). DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다. Ajax 애플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 웹 브라우저를 이용한다. 이것을 지원하는 브라우저로는 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리 등이 있다. 단, 오페라는 현재 XSL 포맷팅 객체와 XSLT 변환을 지원하지 않는다.[1] 기존 기술과의 차이점 기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버에 전달 된다. 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다. 이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한번 전송 받게 되므로써 많은 대역폭을 낭비하게 된다. 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화(상호 반응)하는 서비스를 만들기 어렵게도 한다. 반면에 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 SOAP이나 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다. 장점 페이지 이동없이 고속으로 화면을 전환할 수 있다. 서버 처리를 기다리지 않고, 비동기 요청이 가능하다. 수신하는 데이터 량을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다. 단점 Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다. Http클라이언트의 기능이 한정되어 있다. 페이지 이동없는 통신으로 인한 보안상의 문제 지원하는 Charset이 한정되어 있다. 스크립트로 작성되므로 Debugging이 용이하지 않다. 요청을 남발하면 역으로 서버 부하가 늘 수 있음. Ajax의 보급 이것은 이미 존재하던 기술이었지만, 2005년 초에 있었던 몇 가지 사례 이후로 인기를 끌기 시작했다. 먼저 구글이 구글 그룹스를 포함한 훌륭한 대화형 애플리케이션의 기반을 위해 비동기식 통신을 이용한 것이다. 두 번째로는 Ajax라는 용어가 AJAX: A new approach for a new application[2] 기사에서 등장한 것으로, 이후 빠르게 대중화되어 이 기법의 보급에 도움이 되었다. 현재 대화형 웹 페이지를 위한 도구로서 Ajax를 이용하는 애플리케이션들이 급격히 늘어나고 있으며, 이는 부분적으로 이용할 수 있는 애플리케이션 툴킷(예: Ruby on Rails, DWR)이 늘어나 프로그래머들이 구현하기가 쉬워진 때문이다. 대한민국에서도 네이버와 다음등을 비롯한 포털 업체에서 이 기술을 도입하고 있다. Ajax에 대한 비판 Ajax의 용어에 대해서 비판이 있어 왔는데, 어댑티브 패스(Adaptive Path)의 컨설턴트는 이 조어를 만든 사람[3]이 이미 있는 기법을 마케팅 수단(과 밈)으로써 사용하고 있다고 주장했다 [4] [5] [6]. Ajax 기술이 이전에는 일반적인 이름이 없었기 때문에 이 용어 자체가 발전이 될 수 있다. 그러나 이 기술을 이용해 가장 특출한 애플리케이션들을 만든 사람 중 하나인 한 구글 엔지니어가 그들이 사용한 기술이 '자바스크립트'라고 간주한다는 얘기도 있다. [7] Ajax는 소프트웨어 개발에 대한 새로운 접근방식이 아니다. 보다 높은 관점에서 Ajax는 MVC 패턴의 뷰와 컨트롤러에 해당하는 기술이며, 이런 방식은 이전의 프로그래밍 환경인 델파이, MFC, MP3, 비주얼 베이직, 오라클 ADF, 윈도우즈 Forms 등에서 이미 많이 사용하고 있던 것이다. 예를 들어 WebDAV를 사용하는 마이크로소프트 아웃룩 웹 액세스와 브라우저에서 직접 웹 서비스를 이용하는 웹 기반의 ERP 시스템 P2plus 같은 것들이 해당한다. 그러나 이전에는 표준적인 통신 모델이 없었기 때문에, 이들은 모두 독자적인 확장을 이용한다. Ajax의 새로운 양상은 마이크로소프트의 인터넷 익스플로러만을 고려하면 되었을 예전의 기술과는 달리 이 같은 애플리케이션을 이용할 수 있는 브라우저가 다양해 졌다는 점이다. Ajax와 접근성 Ajax 사용에 있어서, Ajax 기술을 지원하지 않는 브라우저를 위한 대체물 만드는 것은 거의 힘들다. 이 같은 한계는 WAI 접근성 지침에 거스르는 측면이 있다. 한편, 웹 개발자들은 때때로 Ajax를 단순히 웹 페이지의 일부분을 대체하기 위해 사용한다. 비 AJAX 사용자가 전체 페이지를 불러오는 것에 비해 Ajax 사용자는 페이지의 일부분만을 불러올 수가 있다. 이것으로 개발자들이 비 AJAX 환경에 있는 사용자의 접근성을 포함한 경험을 보호할 수 있으며, 적절한 브라우저를 이용하는 경우에 전체 페이지를 불러오는 일 없이 응답성을 향상시킬 수 있다. 브라우저 Ajax를 지원하는 것 참고: 이 목록은 포괄적이며, 브라우저 특징에 따라서 Ajax 애플리케이션이 지원이 다를 수 있다. 마이크로소프트 인터넷 익스플로러 5.0 이상, 기타 인터넷 익스플로러를 기반으로 한 브라우저들 (맥 오에스 버전은 미지원 ) 게코 기반 모질라, 모질라 파이어폭스, 시몽키, 에피파니, 갈레온 브라우저 그리고 넷스케이프 7.1 이상 KHTML 3.2 이상, 컹커러 3.2 이상 그리고 애플 사파리 1.2 이상 포함 오페라 브라우저 8.0 이상, 오페라 모바일 브라우저 8.0 이상 Ajax를 지원하지 않는 것 참고: 이 목록의 브라우저는 확실히 Ajax를 지원하지 않는다. 오페라 7 이하 마이크로소프트 인터넷 익스플로러 4.0이하 텍스트 기반의 브라우저 링크스, w3m 시각장애인을 위한 브라우저 1997년 이전 브라우저 Ajax 프레임워크 Prototype 널리 알려져 있는 AJAX 프레임워크 script.aculo.us Prototype을 기반으로 하는 여러 인터페이스 제공 dojo 다양한 화면효과, 위젯등을 제공 Google Web Toolkit 구글에서 배포중인 AJAX 프레임워크 ASP.NET AJAX MS에서 공식 개발된 ASP.NET 지원용 AJAX 프레임워크 원본 주소 ‘http://ko.wikipedia.org/wiki/Ajax’ “Ajax와 접근성”

“Prototype을 이용한 데이터 전송” Ajax예제를 통한 실습과 소스 분석 “Ajax를 사용한 로그인” “Prototype을 이용한 데이터 전송” “간단한 Ajax 검색 앤진” 네가지 예제를 직접 짜 보고 실습해 보는 시간을 가지도록 하겠습니다. 참고로 이 투토리얼은 http://woork.blogspot.com/2008/02/five-basic-ajax-tutorials.html 으로부터 발췌한 것입니다. “검색창의 추천 키워드”

Ajax 인터페이스 컴포넌트 개발 “슬라이딩 데이트 피커 UI” “웹 인스턴트 메신저 - AjaxIM” “별점추천 UI 라이브러리 - Starbox” DatePicker http://ajaxorized.com/introducing-the-sliding-date-picker/ http://firejune.com/1268 AjaxIm http://www.ajaxim.com/ http://firejune.com/1242 Starbox http://www.nickstakenburg.com/projects/starbox/ http://firejune.com/1237 Tablekit http://www.millstream.com.au/upload/code/tablekit/ http://firejune.com/1236 “테이블을 데이터 그리드로 - Tablekit”

서버-사이드 응답헤더의 역할 “헤더란 무엇인가요?” “요청/응답 헤더의 역할” “자바스크립트 소스코드 수신하기”

“크로스-도메인기반으로 구축하여 접근성 확보” 크로스-도메인 구현하기 “크로스-도메인이란 무엇인가요?” “크로스-도메인기반으로 구축하여 접근성 확보” “서버-사이드 요청 해더 분석하기”   Ajax 요청을 Header로 구분하여 접근성 확보하기(예상시간: 10분) 준비된 아파치 서버와 php 파일의 소스를 사용합니다. 실습 소스 : <?php // Request의 요청의 Accept 해더 검사 $bXHTML = strpos($_SERVER['HTTP_ACCEPT'], "text/javascript "); if (true == $bXHTML) { header('content-type: text/javascript; charset=utf-8'); echo ‘Javascript 요청입니다.’; } else { header('content-type: text/html; charset=utf-8'); echo ‘HTML 요청입니다..’; } ?> Ajax 통신 시각효과 / 새로고침 / 반복요청 구현하기 보시는 소스를 순차적으로 실시간 구현할 예정입니다. 때문에 아래의 소스는 따로 준비하지 않으셔도 되겠습니다.(예상시간 : 20분) HTML소스: <html> <body> <img id=”indicator” src=”/images/indicator.gif” style=”display:none” alt=”” /> <a href=” /show.php “ onClick=”refresh();”><img id=”refresh” src=”/images/ refresh.gif” alt=”” /></a> <div id=”response-div”></div> </body> 자바스크립트 소스: var refresh = function(url){ new Ajax.Request(url, { parameters: ‘q=hello’, evalScripts: true, onSuccess: function(req){ $(“response-div”).innerHTML = req.responseText; }, onLoading: function(){ $(“indicator”).show(); onFailure: function(){ $(“response-div”).innerHTML = “에러입니다.”; “실습!”

JSON 활용하기 “JSON란 무엇인가요?” “JSON을 사용했을 때의 장점” “JSON의 문법” “실습!” JSON(제이슨, JavaScript Object Notation)은, 인터넷에서 자료를 주고받을 때 그 자료를 표현하는 방법이다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다. 그 형식은 자바스크립트의 구문 형식을 따르지만, 프로그래밍 언어나 플랫폼에 독립적이므로 C, C++, 자바, 자바스크립트, 펄, 파이썬 등 많은 언어에서 이용할 수 있다. RFC 4627로 규격화되었다. 문법 JSON 문법은 자바스크립트 표준인 ECMA-262 3판의 객체 문법에 바탕을 두며, 인코딩은 유니코드로 한다. 표현할 수 있는 자료형에는 수, 문자열, 참/거짓이 있고, 또 배열과 객체도 표현할 수 있다. 배열은 대괄호로 나타낸다. 배열의 각 요소는 기본자료형이거나 배열, 객체이다. [10, {"v": 20}, [30, "마흔"]] 객체는 이름/값 쌍의 집합으로, 중괄호로 싼다. 이름은 문자열이기 때문에 반드시 따옴표를 하며, 값은 기본자료형이거나 배열, 객체이다. 각 쌍이 나오는 순서는 의미가 없다. {"name2": 50, "name3": "값3", "name1": true} - 밑에 처럼 이름에 따옴표를 주지 않아도 상관 없지만 문자열과 숫자를 명확히 구분하실려면 따옴표를 입력하는게 소스분석에 도움이 되실겁니다. {name2: 50, name3: "값3", name1: true} JSON 메시지 단위는 배열이나 객체이다. 위의 두 예는 JSON 메시지가 될 수 있다. 예제) 다음은 한 사람에 관한 정보를 갖는 JSON 객체이다. { "이름": "홍길동", "나이": 20, "성별": "남", "기혼": false, "주소": null, "특기": ["병법", "도술"], "가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"} } 장점 JSON은 텍스트로 이루어져 있으므로, 사람과 기계 모두 읽고 쓰기 쉽다. 프로그래밍 언어와 플랫폼에 독립적이므로, 서로 다른 시스템간에 객체를 교환하기에 좋다. 자바스크립트의 문법을 채용했기 때문에, 자바스크립트에서 eval 명령으로 곧바로 사용할 수 있다. 이런 특성은 자바스크립트를 자주 사용하는 웹 환경에서 유리하다. “실습!”

3rd Session : Ajax기반 사이트 구축사례

“Prototype과 Script.aculo.us 라이브러리로 구축된Gucci.com” wollzelle Media Design에서 Prototype과 Script.aculo.us 라이브러리를 사용하여 구축한 우리에게 패션 명품 브랜드로 잘 알려져 있는 구찌의 홈페이지이다. 플래시 못지 않은 수준의 풍부한 사용자 경험을 체험하게 한다. “Prototype과 Script.aculo.us 라이브러리로 구축된Gucci.com”

“Prototype과 Script.aculo.us 그리고 Dojo Toolkit라이브러리로 구축된Apple.com”

? “DAM Project” 파일 업로드 프로그래시브 페이징 없는 목록 추가 서버의 과부하를 막기 위한 이미지 수신 요청 페널 인터페이스 “DAM Project”

QA “질문과 답변” 끝으로 질문과 답변을 해 보는 시간을 가지겠습니다. 강의 내용 중에서 궁금한 점이나 잘 이해하지 못한 부분 등을 질문해 주시기 바랍니다.

Thank you “감사합니다.” 이상으로 발표를 마치도록 하겠습니다. 끝까지 경청해 주셔서 대단히 감사합니다.