공룡호가 사는 세상 이야기

지난 2달간, Ajax에서 XML을 처리하는 방법(Part 1, Part 2)을 리뷰했었다.
이제 연재의 마지막인 Part 3가 소개되었다.
Part 1 링크 : http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt1
Part 2 링크 : http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt2

1. DOM 트리 탐색 - Part 1
2. 서버쪽 XSLT - Part 2
3. 클라이언트쪽 XSLT - Part 2
4. JSON과 동적 스크립트 태그

Part 3에서는 JSON과 동적 스크립트 태그를 이용하는 방법을 알아본다.
위 1,2,3 방식 모두 Ajax 에서 자바스크립트 XMLHttpRequest 객체를 사용하는 방법이었다. 즉, 모두 일종의 웹 프록시를 사용하여 원격지 서버의 XML 데이터를 가져오는 방법으로 Ajax의 '같은 도메인'문제를 해결했다.
Part 1에서도 언급되었고, Part 3에서도 잠깐 언급하고 있는데 '같은 도메인'문제는 Ajax프로그램이 원래 페이지를 가져온 서버로만 XMLHttp Request를 보내야 한다는 보안 제약을 말한다. 그러나 현실적으로는 Ajax 프로그램에서 가져오는 정보는 한 서버에 국한되지 않는다. 그래서 흔히 웹 서버 구성을 변경하거나 특수한 스크립트를 생성하는 방법으로 '같은 도메인' 문제를 해결한다.
그러나, 또 다른 방법이 있다. 해당 문제를 우회하여 프로그래머가 위와같은 제약사항에 신경쓸 필요가 없다.
Part 3에서는 JSON을 이용하여 이 문제를 해결한다.

JSON은 JavaScript Object Notation 을 줄인 약자로, 자바스크립트 언어가 기본적으로 이해하는 자료 형식이다. XML과는 달리, JSON은 자바스크립트 코드이므로 별도의 구문 분석이 필요 없다.
Part 1, 2에서도 그랬듯 날씨 정보 NWS(XML)을 가져와 야후 파이프를 이용, JSON으로 변환한다.

그림: 야후 파이프
야후 파이프 편집기

JSON으로 변환 후, 해당 변수에 할당하면 코드 내에서 바로 참조가 가능하게 된다.
전체 파이프 라인을 보면 다음과 같다.

접근 방식 4가 따르는 파이프라인

자세한 방법 및 수순은 아래 링크에서 확인하도록 하자. 더불어 각 방법의 장단점에 대해서 고민해 보고,
해당 방법을 변형하여 새로운 접근을 만들어 낼 수도 있을 것이다.

Part 3 링크 : http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt3/

지난 달에 'Ajax에서 XML 처리하기, Part 2' 을 리뷰했었다. 그 때는 DOM 트리 탐색 방법을 이용한 예제를 사용했었는데, 기다렸던 대로 Part 2가 소개되었다.
(Part 1 링크: http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt1/)

1. DOM 트리 탐색
2. 서버쪽 XSLT
3. 클라이언트쪽 XSLT
4. JSON과 동적 스크립트 태그

Part 2 에서는 2,3번 방법을 살펴본다. 모두 XSLT를 사용한다는 공통점이 있다.

Part 1 : DOM 트리 탐색 방법
접근 방법 1을 위한 자료 파이프라인

Part 2 : 서버쪽 XSLT
접근 방식 2가 따르는 자료 파이프라인

Part 2 : 클라이언트쪽 XSLT
접근 방식 3이 따르는 자료 파이프라인

3가지 방식은 비슷하나 조금씩 다른 면이 있다.
간단한 예제라면 브라우저에 아무런 부담이 없겠지만 XML 이 커지면 문제는 달라진다.
또한, 사용자가 사용하는 브라우저와 컴퓨터도 고려해야 한다.
어떤 방법을 사용할 것인가는 각기 다른 모델에 대한 충분한 이해와 적용하는 환경에 따라 선택해야 할 것이다.

좀 더 자세한 설명과 튜토리얼은 아래 링크로.
http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt2/

이제, XML은 선택이 아니라 필수가 되어가고 있다.
Ajax에서 XML데이터를 처리하는 방법은 제각기 다르다. 무식하게 엘리멘트/노드 들을 파싱하는 단순 노가다의 반복부터 DOM, XSLT 등을 이용하는 방법까지.
과연 어떤 방법으로 XML을 다루는 것이 좋을까? 정답은 '없다'다. 모든 것은 상황에 따라 변하니까.
하지만, 최적의 방법을 선택하기 위해서는 많은 방법들을 알고 있어야 하며, 그 방법들의 장/단점에 대해서도 알고 있어야 함은 물론이다.

dW에서 이달 초에 다룬 기사 중에서 이러한 접근을 보다 수월하게 가능케 해 주는 기사가 있어 소개코자 한다.
XML을 처리하는 Ajax 뱃지(위젯)을 간단하게 작성하는 과정을 다루는데, 다음 4가지 방법으로 XML에 접근한다.

링크: http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt1/

1. DOM 트리 탐색
2. 서버쪽 XSLT
3. 클라이언트쪽 XSLT
4. JSON과 동적 스크립트 태그

Ajax 날씨 뱃지

Part 1에서는 DOM 트리 탐색 방법을 이용하고 있는데, 사실은 2,3,4번 방법이 업데이트 되면 비교해서 리뷰하려 했지만 아직 소식이 없다.(곧 업데이트 될 듯 한데, Part 2에서는 2,3번 방법을 다룬단다.) 접근 방법 1을 위한 데이터 라인을 보면 다음과 같다.
접근 방법 1을 위한 자료 파이프라인

대충 감이 오는지?
세부 내용을 읽고, 기사에서 말하는 장/단점 외에도 추가적인 부분이 있는지 고민해 보는 것도 좋을 듯.
Part 2를 기다려 보자.

링크: http://www.ibm.com/developerworks/kr/library/x-xmlajaxpt1/

Ajax의 출현은 기존의 웹 애플리케이션 개발 방식을 완전히 뒤엎었다.
기존의 정적인 HTML 문서에서 사실상 불가능했던 획기적인 기능을 구현해 줄 수 있도록 해 주며, 특별한 프로그램을 로컬 환경에 설치하지 않고서도 로컬 환경에서 작동하는 각종 APP들의 기능을 웹 상에서 바로 구현할 수 있다는 점이 Ajax에 주목하는 많은 이유들 중 하나이다.

그런데, 이러한 Ajax의 출현으로 많은 이들이 Ajax를 도입/적용하면서 문제점들이 생겨날 수 있다는 점에 주목하자. 어쩌면 사소한 문제라고 생각할지는 모르나 사실은 그렇지 않다.
Ajax가 사이트를 구할 수 있느냐, 망치느냐는 Ajax를 사용해야 할 부분과 시점을 얼마나 정확하게 판단하느냐에 따라 달라진다.

본문 내용 중 일부를 요약하자면 다음과 같다.
Ajax를 이용, 페이지의 일부분을 자동으로 업데이트하는 것은 확실히 매력적이고 참신하다. 하지만 이런 페이지들이 웹 서버에는 악몽이 될 수도 있다. 하루에 1000명이 방문하는 소규모 웹 사이트라면 큰 문제가 되지 않겠지만, 사이트를 구성하는 각각의 웹 페이지가 Ajax를 사용해서 1초마다 리프레시되고, 한 명이 평균적으로 10분간 페이지에 머무른다고 가정하면, 사이트는 갑자기 하루에 60만 페이지 요청을 처리해야 하는 부담을 안게된다. 단순히 Ajax를 적용한 것 뿐인데 말이다.
즉, 실시간일 필요가 없는 웹인가를 판단해야 한다는 의미가 된다.

또한, 사이트가 Ajax를 사용해 너무 잦은 업데이트를 하게 되면, Back과 Forward버튼 그리고 북마크가 깨진다는 것. 사용자는 Back버튼을 클릭하여 이전 페이지나 뷰로 넘어가기를 원하지만 실제로는 초기 뷰를 표시하는 등과 같이 사용자 경험을 무시하게 되는 결과를 낳을 수도 있다는 점이다.

이 외에도 Ajax를 이용하여 더 나은 웹을 만들고자 하는 노력은 곳곳에서 이루어지고 있으나, 무차별적인 적용은 오히려 해가 된다는 것을 경고하고 있다. 그것을 사용해야 할 부분과 시점을 명확히 판단하는 것.

자주 발생할 수 있는 문제들을 피하고 경험을 증진할 수 있도록 하기 위해 IBM developerWorks의 다음 Article을 참고하자.

링크 : http://www.ibm.com/developerworks/kr/library/wa-aj-when/

텔넷 기반에서 웹 기반으로의 변화가 이루어진지 얼마 후 자신의 홈페이지를 내 손으로 만들고자 하는 욕구가 여기저기서 일어났다. 그 때, 나를 비롯한 많은 사람들이 사용했던 언어가 PHP였는데, 자신의 홈페이지에 채팅방을 만들고자 하는 사람들이 많았다. 일부 공개된 소스가 있긴 하였는데, 새로운 대화가 업데이트 되었는지 점검하지 못하여, 일정 주기로 계속해서 채팅방을 리프레시 하는 방법을 사용하였고, 그 결과 딱,딱,딱 하는 소리가 나고, 대화 메시지도 바로바로 업데이트 되지 않았다. 그 후, 자바스트립트 채팅 엔진을 이용한 채팅방도 생겨났었던 것으로 생각이 든다.

이번 기사는 채팅 시스템을 Ajax와 PHP를 사용하여 구현하는 것이다. 특별한 인스턴스 메시징 소프트웨어를 설치할 필요 없이 컨텐츠의 가장 가까운 사이트 내에서 고객과 관리자간의 채팅을 구현하는 것이 사이트에서 채팅을 구현하고자 하는 목표일 것이다. 물론, Ajax를 이용하므로 메시징의 업데이트와 동시에 채팅 윈도우의 갱신은 당연히 이루어질 것이고,

기사는 아래 링크에서 확인할 수 있듯 번역되지 않은 원문이다.
http://www.ibm.com/developerworks/kr/library/x-ajaxxml8/index.html

각 단계별로 소스코드와 실행결과를 보여주고 있어 영문이라 해도 그다지 어렵지 않게 따라할 수 있다.

The login window for the chat
로그인 윈도우

The simple chat window
간단한 채팅 시스템

간단한 채팅 시스템의 구현을 마친 후, 좀 더 나은 채팅 시스템으로의 업그레이드까지.
간만에 간단한 예제다. 영문이라도 어렵지 않게 따라하면서 익힐 수 있을 듯 하다.

시간이 나면 번역이라도 -ㅁ-; (리뷰도 말일에 몰아서 하는 주제에 번역은..)

Ajax 기술을 이용해서 영화와 슬라이드 쇼를 보여주는 예제로, 많은 사람들이 알고 있는 YouTube와 비슷하다.
국내에도 이와 비슷한 서비스를 하는 곳이 생겨나고 있는데, 미디어에 PHP와 Ajax를 결합하여 일반적으로 미디어를 보는 방식과 미디어와의 관계를 변화시킨다.
이 글에서는 간단한 웹 비디오 호스팅 애플리케이션에 Ajax 프론트엔드를 추가하는 방법을 설명한다.
이것으로는 설명이 부족하다. 만들어 보기 전에 뭘 만드는 지는 알고 만들어야 할 게 아닌가.

간단한 쿼리를 사용한 영화 쿼리
간단한 쿼리를 사용한 영화 검색이다. 쿼리는 's'이며, 's'로 시작하는 2가지가 검색됨을 볼 수 있다.
예제에서 검색 가능한 리스트는 총 3개 이며, 이 그림에서 볼 수 있는 2개 이외에 'w'로 시작하는 'Water Splash'가 있는데 이에 해당하는 검색은 다음에서 볼 수 있다.

"water" 영화를 찾는 영화 쿼리 페이지
'Water' 영화를 찾는 영화 쿼리 페이지이다.

이러한 방식으로 이 글에서는 DHTML(Dynamic HTML)과 Ajax를 사용하여 프론트엔드를 만드는 방법을 설명하고 있는데, 글의 후반부에서는 비디오 공유 사이트를 만들 수 있는 다른 방법들에 대해서도 간단히 소개하고 있다.
또한 비디오를 핸들링하고 공유하기 위해 기초적으로 고려해야 할 3가지 사항들에 대해서도 다루고 있다.

Article : http://www.ibm.com/developerworks/kr/library/x-ajaxxml7/index.html
Sample Code : http://download.boulder.ibm.com/ibmdl/pub/software/dw/xml/x-ajaxxml7-media.zip


http://worldofsolitaire.com/


놀라움도 잠시, 그냥 2시간 내내 이것만 -
한번 쯤 즐겨 보는 것도 ㅇ0ㅇ

이번에는 좀 더 쉬운 초급용 Ajax Article을 골라 보자.
11월 6일 IBM dW에 업데이트된 기사로, PHP, Dynamic HTML(DHTML), Asynchronous JavaScript + XML(Ajax)와 같은 기술들을 사용하여 사용자의 관심을 끌 수 있는 컨텐츠를 만드는 방법이다.

먼저 결과 화면부터 보자.

텍스트에 적용된 결과이다. 마우스를 텍스트 위에 올려 놓으면, 우측의 그림처럼 작업 팝업과 같은 형식으로 마치 툴팁과도 같은 모습을 보여준다.
마우스를 작동하기 전의 텍스트팝업 창
체험하기 : http://www.muttmansion.com/lightbox/tooltips/


다음은 이미지에 적용된 결과이다. 이 그림을 클릭할 경우, 우측의 그림처럼 섬네일의 원래 크기의 이미지가 창 중앙에 디스플레이 된다. 더욱이 백그라운드의 모든 Material이 흐려지기 때문에, 사용자는 중앙의 컨텐츠에 더욱 집중할 수 있다.
클릭하기 전의 이미지원래 크기의 이미지의 라이트박스
체험하기 : http://www.muttmansion.com/lightbox/lightbox/


또한 다음과 같이 페이지 자체적으로 윈도우용 컨텐츠를 가지고 있고, 사용자가 폼에서 Login버튼을 클릭하면 Ajax.Request 객체를 사용하여 서버에서 로그인을 요청한다. 그래서 우측의 그림처럼 매우 참신한 Web2.0 스타일의 로그인 윈도우를 볼 수 있게 된다.
이러한 방식은 애플리케이션에 팝업을 가져올 수 있고, 사용자들에게 웹 보다는 데스크탑 애플리케이션과 비슷한 것을 사용하고 있다는 인식을 줄 수 있다는 점이 매력적이다.
로그인 링크로그인 윈도우
체험하기 : http://www.muttmansion.com/lightbox/window/


이러한 방식으로 자신의 웹 페이지에 유저들의 관심을 효과적으로 끌 수 있는 방법들을 다루고 있는데, 모든 예제는 Prototype.js JavaScript 라이브러리를 기반으로 구현한다.
첫번째 예제는 너무나도 간단하다. 먼저, 보여줄 페이지(index.html)를 구성하되, 마우스가 롤오버 되었을 경우 효과를 보여줄 텍스트를 <div>태그로 감싸주고 이름을 설정한다. 두번째로 롤오버 되었을 경우에 보여줄 텍스트를 text.php에 추가한다. 세번째로, JavaScript를 정의하는데,

<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('설정한 div 이름', 'popup1')
</script>

이것으로 끝이다. 너무나 간단하지 않은가- 자신의 블로그에 굳이 다른 페이지를 통해 표시할 필요가 없는 각종 Contents들은 이러한 방식으로 간단히 표현가능하게 해 주며, 사용자의 관심도 끌 수 있다.
이런식으로 페이지를 어지럽히지 않고 사용자들에게 Contents를 On Demand 방식으로 상세한 내용을 보여줄 수 있으며, 상세한 내용은 텍스트 뿐 아니라 이미지, 테이블 포멧팅 등이 될 수도 있다.

가장 기본적인 예제를 맛보았는데, 상단에서 볼 수 있는 다른 예제들은 IBM dW에서 직접 보도록 하자.
그 외에도 '페이더(fader) 메시지'에 대한 예제도 볼 수가 있는데 html과 JavaScript에 대한 기본적인 이해만 있으면 어렵지 않게 구현할 수 있을 것이다.
또한 이는 모듈 겸, 프레임웍 같이 되어 있어 활용성도 높을 듯 하다.
링크 : http://www.ibm.com/developerworks/kr/library/x-ajaxxml6/index.html

또한, 이것을 그대로 적용한 예제들도 볼 수가 있는데, 아래 링크를 따라가 보자.
링크 : http://www.huddletogether.com/projects/lightbox2/

각자 자신의 블로그에 멋진 이미지 갤러리 하나씩 삽입 해 보는것도 괜찮지 않을까 싶다.

파일 업로드는 오늘날 웹의 기본 기능 중 하나이다.
하지만, 대용량의 파일 업로드를 안정적으로 수행하기 위해서는 ActiveX 따위의 컴포넌트를 필요로 했다.
특히나, 전송 진행 상태를 표시하기 위해서는 더더욱 그러했다.
웹에서 검색을 하고, 필요한 데이터를 내려받기 위해서 특정 웹사이트는 다운로드용 ActiveX를 설치하도록 요구하는데, 다음에 또 방문할지 알 수 없는 일회성인 곳이라면 더더욱 설치하기가 싫어지는 것은 사실이다.
DWR을 사용하여 Ajax기반의 파일 업로드를 작성/이용하면, 클라이언트는 ActiveX와 같은 지저분한 컨트롤을 설치 할 필요가 없을 뿐 아니라, 포틀릿을 통해 서버는 진행 상태를 서버측에서 검색하고, 클라이언트도 진행 상태를 디스플레이 할 수 있다.

사용자 삽입 이미지

물론, 파일 업로드 진행 시 서버와 클라이언트 간 통신은 Ajax를 사용하여 구현된다.
또한 DWR(Direct Web Remoting)는 웹 개발 프로세스를 가져오는데 이상적인 프레임워크로서, 서버사이드 빈과 자바스크립트 그리고 DWR 서블릿으로 구성되어 있는 아파치 라이센스를 가진 라이브러리 이다.
말 그대로 서버에 존재하는 클래스를 마치 로컬에서 호출하듯이 사용하게 해 주는 것이라면 이해가 될런지?
마치 RMI와도 흡사한 DWR은 서버의 자바클래스와, 클라이언트의 자바스크립트의 원격호출기능을 정의한다. 서버에 Cart라는 클래스가 있고, get CartItem이라는 메소드가 있다면, 클라이언트의 스크립트 상에서 똑 같은 객체명 Cart.getCartItem()으로 호출하여 리턴값을 사용할 수 있게 된다.

그러면 DWR 서블릿은 또 무엇이며, 서버사이드 빈은 또 무엇인가?

DWR 서블릿 - 일종의 맵퍼, 후킹 과 같은 DWR만의 컨트롤인데 라이브러리를 연결하고, 초기로딩시 올라올 수 있게 몇몇 설정만 간단히 하면 된다. 주요 기능으로는 스크립트 자동 제네레이션이나, 데이터 이동 등의 역할을 하는 컨트롤러라 생각하면 된다.

서버사이드 빈 - 서버와 클라이언트 사이을 오고갈 빈즈이다. DWR이 서버에 있는 빈을 자바스크립트로 자동 변환작업을 해 주어, 클라이언트 스크립트에서 마치 자신의 클래스를 쓰는 것 처럼, 각종 값들을 가져올 수 있게 한다. 실제로 작성해야 하는 것들 이다. (참고 : 자바사랑 까페)

그럼, DWR을 이용해서 Ajax기반의 파일 업로드 포틀릿(웹 컴포넌트)를 제작해 보자.

IBM developerWorks : DWR을 사용하여 Ajax 기반 파일 업로드 포틀릿 개발하기
http://www.ibm.com/developerworks/kr/library/wa-aj-dwr/