'Web/ajax'에 해당되는 글 5건

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)

| Web/ajax 2009. 1. 12. 02:20

Posted by bluebamus

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)

난이도 : 중급

Jack D Herrington, Senior Software Engineer, Leverage Software Inc.

Web 2.0은 사용자 경험을 강조하고 있습니다. 이것의 일환으로 고급스러운 방식으로 사용자와 인터랙팅 하고 사용자에게 정보를 제공하는 것입니다. 이러한 새로운 인터페이스들을 위젯이라고 하며, Asynchronous JavaScript + XML (Ajax)을 사용하여 서버와 통신합니다. 사이트와의 상호 작동을 향상시키는데 사용할 수 있는 다섯 개의 위젯에 대해 알아봅시다.

Web 2.0 혁명은 웹 사이트 상에서 고객과 상호 작동하는 독특하면서도 고급스러운 방식이 탄생했다.
이렇게 새롭고 혁신적인 많은 기술들은 서버와 통신하는 그래픽과 위젯을 사용하여 데이터를 가져오
는데 까지 진화했다. 이 글에서는, 다섯 가지 위젯을 소개하겠다. 일부는 오픈 소스이고, 일부는 상용
이며, 이러한 위젯들은 Ajax와 XML을 통해 서버와 통신한다.

carousel: 이 위젯은 작은 그래픽으로 나타난 아이템 리스트를 스크롤 하는데 사용할
수 있는 회전식 이미지 뷰어이다. 사용자가 해당 아이템을 클릭할 때 어떻게 할 것인지는
여러분이 정한다. carousel의 예로는 Flikr 사이트와 Apple의 iTunes 인터페이스가
있으며, 이는 무료로 사용할 수 있으며, 대중적인 jQuery JavaScript 기반이다.
SWF/Charts: Adobe Flash 기반 컨트롤은 서버에 있는 차팅(charting) 데이터 및
스타일링 옵션용 XML을 읽고, 데이터에 기반하여 차트를 디스플레이 한다. 인터
페이스는 고급스럽고, XML 데이터는 생성하기도 쉬워서 페이지에 동적 그래픽을
빠르게 추가할 수 있다.
SWF/Gauge: SWF/Charts의 사촌격인 이 Flash 위젯은 서버에 있는 XML을
사용하여 완전히 커스터마이징 가능한 게이지 디스플레이를 구현한다. 게이지는
비행기 또는 차에 있는 것과 비슷하다.
In-place editing: 엄밀히 말하면 위젯은 아니지만, In-place editing 컨트롤은
매력적이고, 대화식으로 사용자에게서 정보를 가져온다. In-place editing 기능은
Scriptaculous 프레임웍에 포함되어 있고, 이는 prototype.js 라이브러리에 있다.
DHTML windows: DHTML window는 모델이 없는 윈도우를 페이지 콘텐트에
놓는 장치이다. 사용자들은 윈도우를 이동하고, 사이즈를 조정하며, 제거하기도
한다. 이 윈도우의 콘텐트는 페이지 상에서 JavaScript 코드에 의해 지정되거나,
서버에서 Ajax를 통해 읽힌다. 이러한 유형의 윈도우는 경고 장치로 사용하기에
알맞으며, 전체 페이지를 재 로딩 할 필요가 없는 작은 폼을 가져오는데 알맞다.

SWF/Charts 위젯부터 설명하겠다. 내가 생각하기에 이 위젯이 전개하기에 가장 쉽다.
노력에 비해 보상도 가장 크다.

SWF/Charts 위젯

"한편의 그림이 천마디 말보다 낫다"라는 속담을 무시할 수 없으며 특히, 그래프가 관여된
곳에서는 더욱 그렇다. 그러나, 웹에서의 그래프는 언제나 문제가 되며, 대부분의 웹 프레
임웍들은 그래핑 툴이 부족하다. 따라서 여러분 스스로 그래프를 만들어야 한다.

XML로 인코딩 된 데이터를 그릴 수 있는 위젯이 있다면 정말 좋을 것 같지 않은가? 마침
SWF/Charts가 있다. 이 위젯을 사용하려면, 사이트에서 SWF 파일과 이 위젯이 사용하는
추가 SWF 파일들을 다운로드 하고 나서, 사이트에 파일을 설치하고, HTML 페이지 상의
SWF 위젯에 링크를 추가했다. (Listing 1)

Listing 1. Chart_page.html

                

<html><body>


<object

  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

  codebase="http://download.macromedia.com/pub.../swflash.

cab#version=6,0,0,0" 

  width="400" height="250">

<param name="movie"

  value="charts.swf?xml_source=chart_data.xml&library_path=

charts_library">


<embed

  src="charts.swf?xml_source=chart_data.xml&library_path=

charts_library" 

  width="400" height="250" 

  type="application/x-shockwave-flash" 

  pluginspace="http://www.macromedia.com/go/getflashplayer">

</embed>

</object>


</body></html>

Charts.swf 는 두 개의 매개변수를 취한다. 라이브러리 디렉토리의 위치와 XML 데이터의
URL이다. XML 데이터 포맷은 매우 쉽다. Listing 2는 예제이다.

Listing 2. Chart_data.xml

                

<chart>

  <chart_type>bar</chart_type>

  <chart_data>

    <row>

      <null/>

      <string>2005</string>

      <string>2006</string>

    </row>

    <row>

      <string>Projected</string>

      <number>500</number>

      <number>700</number>

    </row>

    <row>

      <string>Actual</string>

      <number>600</number>

      <number>900</number>

    </row>

  </chart_data>

</chart>

이 파일은 차트용 데이터이고, 선택적인 비주얼 정보도 있다. 이 경우, 필자는 차트 유형을
바(bar) 차트로 지정했다. SWF 파일을 다운로드 했던 사이트에는 더 많은 옵션들과 그래프
유형들이 있다.

Firefox 브라우저에서 파일을 검색하면 그림 1과 같은 그래프를 볼 수 있다.

그림 1. Chart Widget
Chart Widget 보기

기본 컬러 스킴과 모습도 멋지며, 그래프는 중심축 값을 보기 좋게 처리했다. 적은 노력으로
전체적으로 큰 효과를 보았다.

분명히, graph_data.xml 파일을 동적인 웹 페이지로 대체할 수 있었다. 리턴된 데이터가
올바른 포맷으로 되어 있다면 그래프 컨트롤은 적은 부분만 신경 쓰면 된다. 이 글에 있는
대부분의 예제들이 이에 속한다. 사실, 웹 서버(Apache Tomcat 또는 IBM® WebSphere®
Application Server)나 웹 프로그래밍 언어(PHP, Microsoft® ASP.NET, Java™ 2
Enterprise Edition [Java EE])를 사용하지 않고도 로컬 파일에 있는 웹 브라우저에서 이
예제들을 실행할 수 있다.

위로

SWF/게이지 위젯

데이터를 나타내는 또 다른 방법은 게이지로 표현하는 것이다. 개인적으로는 게이지에
대해서는 흥미가 별로 없다. 적은 정보를 나타내는 데도 많은 공간을 차지하기 때문이다.
하지만, 게이지는 전문 대시보드의 핵심 기능이기 때문에, 이들을 빠르게 생성하는 기능은
매우 유용하다.

하지만, 웹이 간단한 바 차트도 잘 수행하지 못한다면, 원형 게이지 역시 수행할 수 없다.
따라서, XML/Graph를 만들었던 회사에 문의했다. 그들도 게이지에 대한 솔루션이 있었다.
바로 XML/Gauge였다.

SWF게이지 위젯을 삽입하는 HTML 페이지로 시작하겠다. (Listing 3)

Listing 3. Gauge_page.html

                

<html><body>


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

  codebase="http://download.macromedia.com/.../swflash.

cab#version=6,0,0,0"

  width="110" height="55">

<param name=movie VALUE="gauge.swf?xml_source=gauge_data.xml">

<embed src="gauge.swf?xml_source=gauge_data.xml"

  width="110" height="55" type="application/x-shockwave-flash"

  pluginspace="http://www.macromedia.com/go/getflashplayer">


</embed></object>


</body></html>

gauge.swf 영화는 하나의 인자를 취한다. 데이터의 위치이다. 이 경우, 그 위치는
gauge_data.xml이다. (Listing 4)

Listing 4. Gauge_data.xml

                

<gauge>


<circle fill_color="888888" start="275" fill_alpha="100"

  line_color="555555" line_thickness="3" line_alpha="90"

  radius="50" x="55" end="445" y="55"/>

<circle fill_color="99bbff" start="280" fill_alpha="90"

  line_thickness="4" line_alpha="20" radius="45" x="55"

  end="440" y="55"/>

<circle fill_color="666666" start="317" fill_alpha="100"

  line_color="333333" line_alpha="0" radius="44" x="55"

  end="322" y="55"/>

<circle fill_color="666666" start="337" fill_alpha="100"

  line_color="333333" line_alpha="0" radius="44" x="55"

  end="342" y="55"/>

<circle fill_color="666666" start="357" fill_alpha="100"

  line_color="333333" line_alpha="0" radius="44" x="55"

  end="362" y="55"/>

<circle fill_color="666666" start="377" fill_alpha="100"

  line_color="333333" line_alpha="0" radius="44" x="55"

  end="382" y="55"/>

<circle fill_color="666666" start="397" fill_alpha="100"

  line_color="333333" line_alpha="0" radius="44" x="55"

  end="402" y="55"/>

<circle fill_color="666666" start="417" fill_alpha="100"

  line_color="333333" line_alpha="0" radius="44" x="55"

  end="422" y="55"/>

<circle fill_color="99bbff" start="280" fill_alpha="100"

  radius="40" x="55" end="440" y="55"/>

<circle fill_color="FF4400" start="280" fill_alpha="100"

  radius="44" x="55" end="310" y="55"/>

<circle fill_color="44FF00" start="50" fill_alpha="100"

  radius="44" x="55" end="80" y="55"/>

<circle fill_color="99bbff" start="280" fill_alpha="80"

  radius="40" x="55" end="440" y="55"/>

<circle fill_color="333333" start="270" fill_alpha="100"

  line_alpha="0" radius="20" x="55" end="450" y="55"/>


<rotate start="280" shake_span="2" shadow_alpha="15"

  step="1" x="55" span="0" y="55" shake_frequency="20">

  <rect fill_color="ffff00" fill_alpha="90" line_alpha="0"

    height="40" x="53" width="4" y="13"/>

</rotate>


<circle fill_color="111111" start="270" fill_alpha="100"

  line_thickness="5" line_alpha="50" radius="15" x="55"

  end="450" y="55"/>


</gauge>

여러분도 보듯, SWF는 이 위젯에 다른 방식을 취했다. 게이지(또는 그래프)용 데이터를
지정하는 대신, 원, 호, 직사각형 같은 그래픽 프리머티브에서 게이지를 구현한다.

솔직히, 필자는 데이터를 제공할 수 있는 기본 게이지를 선호한다. 하지만, 이 방식도
작동하고, 얼마든지 조정이 가능하다. 비록, 필자는 기본 예제들을 몇 개 더 사용했다.

내 브라우저에 있는 페이지로 갈 때, 그림 2와 같은 게이지를 볼 수 있다.

그림 2. Gauge Widget

그래픽 프리머티브를 지정하는 것으로는, 이 위젯에서 얻을 수 있는 것이 많이 없다고
생각할 수도 있다. 그렇지 않다. 이 프리머티브에는 간단한 애니메이션 기술도 포함되어
있어서 바늘과 소리도 넣을 수 있고 사용자가 이것을 클릭하면 브라우저를 검색하는 중요한
연결 영역을 만드는 기능도 있다. 게다가, 이 콘트롤을 게이지에 사용하는 것뿐만 아니라,
간단한 그래픽 프리머티브 언어를 사용하여 어떤 유형의 이미지와 간단한 애니메이션을
구현할 수 있다.

위로

In-place editing

사용자들은 이제 데스크탑 애플리케이션에서 In-place editing을 기대하지만, 이러한 기능은
아직까지는 웹에서는 찾아보기 힘들다. Web 2.0에서는 상호 작동이 우수하기 때문에,
In-place editing 같은 기술은 보다 더 일반화 된다.

In-place editing을 구현하려면, 직접 작성하거나, JavaScript 프레임웍들 중 하나를
사용한다. 가장 대중적인 툴킷은 Scriptaculous 프레임웍인데, 이것은 prototype.js에
구현된다. Scriptaculous 라이브러리를 사용하면 In-place editing 컨트롤을 매우 쉽게
구현할 수 있다.

In-place editing용 HTML 테스트 파일은 Listing 5를 참조하라.

Listing 5. Inplace.html

                

<html><head>

<script src="prototype.js"></script>

<script src="effects.js"></script>

<script src="controls.js"></script>

<script src="scriptaculous.js"></script>

</head><body>

<table width="100%">

<tr><th width="10%">Name</th>

<td width="90%"><p id="name">Candy bar</p></td>

</tr></table>

<script>

new Ajax.InPlaceEditor('name', 'submitted.html' );

</script>

</body>

</html>

Inplace.html에는 필요한 모든 JavaScript 소스 파일이 포함된다. 간단한 테이블에 In-place
editing 가능한 데이터를 포함하고 있는 단락을 넣는다. 이 파일의 끝에, 이 단락의
InPlaceEditor 객체를 생성하는 스크립트를 삽입한다.

InPlaceEditor 컨스트럭터는 인자로서 단락의 ID와 편집을 수행한 후에 제출을 처리할
페이지의 URL을 취한다. 이 경우, 이 페이지는 submitted.html이다. 하지만 현실적으로,
이것은 ASP.NET, Java EE, 또는 PHP 페이지 또는 기타 동적 웹 기술이다.

Listing 6은 submitted.html 파일이다.

Listing 6. Submitted.html

                

<p>Name changed!</p>

이제 테스트 할 차례이다. 브라우저를 HTML 파일에서 연다. 이곳에서 원래의 텍스트를
보게 된다. 텍스트에 마우스를 갖다 대면, 노란색으로 변한다. (그림 3)

그림 3. in-place editing의 시작 포인트

노란색 하이라이팅은 이것을 클릭하여 필드를 편집할 수 있다는 사용자용 인디케이터이다.
따라서, 필자는 그 필드를 클릭하고 Name 필드, ok 버튼, cancel 링크를 만들었다.
(그림 4)

그림 4. 클릭한 후 텍스트 편집하기

텍스트를 수정하고 ok를 클릭한다. 이렇게 하면 데이터가 서버에 게시된다. (또는 이 경우
submitted.html page). 서버는 원래의 텍스트를 대체하는 HTML 페이지를 리턴한다.
이 경우에, 필자는 Name changed!를 보낸다. (그림 5) 실제로, 이것은 데이터의 새로운 값이
되어야 한다.

그림 5. ok를 클릭한 후 새로운 콘텐트

이와 같은 간단한 인터페이스 업그레이드는 애플리케이션의 가용성에 차이를 만든다.
느린 서버에서 페이지 로드를 기다리는 것은 구식 인터페이스이다. In-place editing 같은
간단한 툴을 사용하면 구현 복잡성의 관점에서 볼 때 애플리케이션에 간단한 몸치장을 한
것과 같다.

위로

DHTML 윈도우

브라우저에서 윈도우를 웹 페이지에 구현하기 힘들다는 것은 좋은 일일지도 모른다. 하지만
가끔씩, 작은 윈도우도 좋은 것이 될 수 있다. 이는 경고를 디스플레이 하거나 작은 폼을 가져
오는데 편리하며, 페이지의 내용을 덮어버리는 성가신 광고를 실행하기에 좋은 방법이다.
잠깐 기다려라. 마지막 말은 취소해야겠다.

어쨌든, 내가 말했지만 Dynamic HTML (DHTML) 페이지용 윈도우를 구현하는 것은 쉬운
일이 아니다. 그래서, Protoype.js 라이브러리에 기반한 매우 강력한 윈도우 패키지를 발견했
을 때 너무 기뻤다. 사용하기 쉬울 뿐만 아니라, 인터페이스도 가볍고 모든 브라우저에서 잘
작동한다. Listing 7은 window.html 페이지 모습이다.

Listing 7. Window.html

                

<html>

<head>

<link href="default.css" rel="stylesheet" type="text/css" />

<script src="prototype.js"></script>

<script src="window.js"></script>

</head>

<body>

<script>

var win = new Window( 'myPopup', {

   title: "Terms and Conditions",

   top:70, left:100, width:300, height:200,

   resizable: true, url: "terms.html",

   showEffectOptions: { duration: 3 }

  } 

);

win.show();

</script>

</body>

</html>

prototype.js와 window.js 소스 파일을 헤더로 가져온다. 그런 다음, 내가 좋아하는 매개변수
(크기, 위치, 타이틀, 위젯이 콘텐트를 얻는 페이지의 URL)로 팝(pop) 객체를 구현한다.
Ajax를 통해 페이지에서 콘텐트를 로딩하는 것은 콘텐트를 얻는 방법들 중 하나이다.
JavaScript 코드를 통해 동적으로 설정할 수 있고 또는 기존 <div> 태그 주위에 윈도우를
래핑할 수 있다.

이 경우 필자는 terms.html 파일을 참조한다. (Listing 8)

Listing 8. Terms.html

                

<html><body bgcolor="white">

<h1>Terms and Conditions</h1>

<p>In order to use this site you must comply

with the following conditions...</p>

</body></html>

내 브라우저에서 이 페이지를 실행하면 그림 6과 같은 윈도우를 보게 된다.

그림 6. 초기 윈도우

이것은 단지 두 개의 Mac 윈도우만은 아니다. Mac 처럼 보이는 DHTML 윈도우가 있고 그
밖에는 실제 Firefox 브라우저 윈도우이다. 하지만 어쨌든 같은 것으로 보여진다.

윈도우를 늘려 이동할 수 있다. (그림 7)

그림 7. 이동 및 크기 조정 후 윈도우 모습

필자는 본 기술자료와 내 작업을 위해 여러 드물 윈도우 라이브러리를 검토했고, 이것이
가장 좋았다고 자신 있게 말할 수 있다. 다른 윈도우 패키지들은 실행 문제들이 있었고,
세그먼트에서 실행되며, 사이즈를 재조정 하면 형편없이 실행되었다. 브라우저 안에 갇힌
실제 윈도우처럼 보인다.

위로

carousel 위젯

많은 사용자 인터페이스(UI)를 다루어본 사람이라면 실제 상태를 나타내는 것이 중요하다고
말할 것이다. 꽉 찬 느낌을 주지 않고 주어진 공간에 최대로 담을 수 있는 데이터를 넣는
것이 중요하다. Apple iTunes의 carousel 컨트롤을 처음 보았을 때 깊은 감명을 받았다.

carousel 컨트롤은 고정된 공간에서 여러 이미지들을 보여준다. 이미지 블록의 왼쪽과
오른쪽은 왼쪽 화살표와 오른쪽 화살표이다. 화살표를 클릭하면, 이미지는 왼쪽 또는
오른쪽으로 이동하고, 새로운 이미지로 대체된다. iTunes 에서, 이 이미지는 앨범 커버였고,
각 장르마다 carousel 컨트롤이 있었다.

공간 절약은 중요하다. 세 개의 공간에 30 개의 앨범 커버를 넣을 수 있고, 각각 알맞은 크기
로 보여줄 수 있다. 또한, 이 컨트롤은 매력적이다. 마치, 단순화 된 스크롤바 같다.

carousel의 단점은 구현이 쉽지 않다는 점이다. 특히, 이것의 특징 중 하나가 왼쪽 또는
오른쪽으로 이동하는 이미지의 애니메이션이기 때문이다. 따라서 jQuery JavaScript
프레임웍에 구현된 carousel이라고 하는 오픈 소스 carousel에 대해 알게 되었을 때 기뻤다.

필자는 웹 페이지에 간단한 carousel 위젯을 구현했다. ( Listing 9)

Listing 9. Carousel.html

                

<html>

<head>

<script type="text/javascript" src="js/jquery-1.0.3.js"></script>

<script type="text/javascript" src="js/jcarousel.js"></script>

<style type="text/css">

#mycarousel { display: none; }

.jcarousel-scope {  position: relative; width: 255px;

  -moz-border-radius: 10px; background: #D4D0C8;

  border: 1px solid #808080; padding: 20px 45px; }

.jcarousel-list li { width: 81px; height: 81px;

  margin-right: 7px; }

.jcarousel-list li img { border: 1px solid #808080; }

.jcarousel-list li a { display:block;  outline: none;

  border: 2px solid #D4D0C8; -moz-outline:none; }

.jcarousel-list li a:hover { border: 2px solid #808080; }

.jcarousel-next {  position: absolute; top: 45px;

  right: 5px; cursor: pointer; }

.jcarousel-next-disabled { cursor: default; }

.jcarousel-prev { position: absolute; top: 45px;

  left: 5px; cursor: pointer; }

.jcarousel-prev-disabled { cursor: default; }

.loading { position: absolute; top: 0px;

  right: 0px; display: none; }

</style>

<script type="text/javascript">

function loadItemHandler( carousel, start, last, available ) {

  if (available) { carousel.loaded(); return; }

  var cr = carousel;

  jQuery.get("data.xml", function(data) { appendItemCallback(cr, start,

 last, data); });

};


function appendItemCallback( carousel, start, last, data ) {

  var items = data.match( /(\<img .*?\>)/g );


  for (i = start; i <= last; i++) {

    if ( items[ i - 1 ] == undefined ) break;

    var item = carousel.add( i, getItemHTML( items[i-1]) );

    item.each(function() {

      jQuery("a.thickbox", this).click(function() {

        var t = this.title || this.name || null;

        var g = this.rel || false;

        TB_show(t,this.href,g);

        this.blur();

        return false;

      });

    });

  }

  carousel.loaded();

};


function getItemHTML( item ) {

  var found = item.match( /href=\"(.*?)\"/ );

  var url   = jQuery.trim(found[1]);

  var title = jQuery.trim(found[1]);

  var url_m = url.replace(/_s.jpg/g, '_m.jpg');

  return '<a href="' + url_m +

	'" title="' + title +

	'" class="thickbox"><img src="' + url +

	'" width="' + 75 + '" height="' + 75 +

	'" alt="' + title + '" /></a>';

};


var nextOver = function() {

  jQuery(this).attr("src", "img/horizontal-ie7/next-over.gif"); };


var nextOut = function() {

  jQuery(this).attr("src", "img/horizontal-ie7/next.gif"); };


var nextDown = function() {

  jQuery(this).attr("src", "img/horizontal-ie7/next-down.gif"); };


function nextButtonStateHandler(carousel, button, enabling) {

  if (enabling) {

    jQuery(button).attr("src", "img/horizontal-ie7/next.gif")

      .mouseover(nextOver).mouseout(nextOut).mousedown(nextDown);

  } else {

    jQuery(button).attr("src", "img/horizontal-ie7/next-disabled.gif")

      .unmouseover(nextOver).unmouseout(nextOut).unmousedown(nextDown);

  }

}


var prevOver = function() {

  jQuery(this).attr("src", "img/horizontal-ie7/prev-over.gif"); };


var prevOut = function() {

  jQuery(this).attr("src", "img/horizontal-ie7/prev.gif"); };


var prevDown = function() {

  jQuery(this).attr("src", "img/horizontal-ie7/prev-down.gif"); };


function prevButtonStateHandler(carousel, button, enabling) {

  if (enabling) {

    jQuery(button).attr("src", "img/horizontal-ie7/prev.gif")

      .mouseover(prevOver).mouseout(prevOut).mousedown(prevDown);

  } else {

    jQuery(button).attr("src", "img/horizontal-ie7/prev-disabled.gif")

      .unmouseover(prevOver).unmouseout(prevOut).unmousedown(prevDown);

  }

}


jQuery(document).ready(function() {

  jQuery().ajaxStart(function() { jQuery(".loading").show(); });

  jQuery().ajaxStop(function() { jQuery(".loading").hide(); });

  jQuery("#mycarousel").jcarousel({

    itemVisible: 3, itemScroll: 2, wrap: true,

    loadItemHandler: loadItemHandler,

    nextButtonStateHandler: nextButtonStateHandler,

    prevButtonStateHandler: prevButtonStateHandler

  });

});

</script></head><body><div id="mycarousel">

<div class="loading">

<img src="img/loading.gif" width="16" height="16" border="0" />Loading...

</div>

<img src="img/horizontal-ie7/prev.gif" border="0" class="jcarousel-

prev" />

<img src="img/horizontal-ie7/next.gif" border="0" class="jcarousel-

next" />

<ul></ul>

</div></body></html>

이전 예제들 보다 방대하다. 하지만 코드 대부분이 그래픽을 설정하고 서버에서 리턴된 Ajax
데이터를 인터프리팅 하는 것이다. 사실, 이 글에 소개된 대부분의 코드는 다운로드에서
제공하는 예제를 기반으로 하고 있다. 따라서 이 콘트롤을 사용하기 위해 많은 부분을
배우거나 문서를 읽을 필요가 없었다.

이 carousel용 데이터는 Listing 10에 나와있다.

Listing 10. Data.xml

                

<images>

<img href="pics/image1.jpg" />

<img href="pics/image2.jpg" />

<img href="pics/image3.jpg" />

<img href="pics/image4.jpg" />

</images>

이 경우, 파일은 <images> 태그와 각 이미지의 URL을 포함하고 있는 <img> 태그 세트들을
갖고 있는 XML 포맷으로 되어있다. 어떤 포맷을 사용하든지 간에, 이 컨트롤은 기본적으로
Ajax 위젯이 아니다. 필자는 XML을 인터프리팅 하는 코드를 작성 중이고, 각각의 슬라이드
엘리먼트를 carousel에 구현하고 있다. 결과는 그림 8과 같다.

그림 8. 이미지 carousel

이미지를 클릭하고 그 이미지가 있는 페이지로 갈 수 있다. (또는 내가 지정한 URL로 간다.)
또는, 오른쪽/왼쪽 화살표를 클릭하여 carousel 주위를 스크롤 하여 더 많은 이미지들을 볼
수 있다. 효과는 매우 좋다.

위로

결론

웹 상에서 사용할 수 있는 무료/상용 위젯과 툴들을 소개했다. 이 글을 쓰면서 보았던 많은
툴들이 Ajax를 사용하지 않았고, 이 주제에도 잘 맞지 않았다. 하지만, 그 자체로도 주목할
만한 가치가 있었다. 특히, 필자는 고급의 오픈 소스 WYSIWYG 에디터를 다운로드 할 수
있다는 것에 놀랐다. 사용자들은 자신들의 사이트에 있는 콘텐트에 볼드체, 이탤릭체, 링크,
이미지 등을 사용하려면 텍스트 박스에서 HTML을 사용해야 하는 것에 많이 좌절했다.
이러한 에디터들은 모든 HTML을 숨기고 사용자에게 워드 프로세스 애플리케이션과 비슷한
느낌으로 편집할 수 있도록 해준다.

WYSIWYG 에디터 외에도, 프로그래스 바, 탭 다이얼로그 박스, 아코디언 컨트롤, 클락, 데이트 피커(date picker), RSS, Outline Processor Markup Language (OPML) 리더용 솔루션도 있다. 심지어 대화형 터미널 윈도우용 솔루션도 있다. DHTML
또는 Flash 컨트롤을 직접 구현하기 전에, 인터넷에서 (무료로) 무엇을 사용할 수 있는지
찾아봐야 한다. 이러한 위젯들을 사용하여 많은 노력을 들이지 않고도 사이트에 역동성을
부여할 수 있다.

소셜 북마크


	mar.gar.in

	Digg

	del.icio.us

	Slashdot

기사의 원문보기

Ajax and XML: Five cool Ajax widgets

참고자료

교육

한국 developerWorks XML 존
jQuery와 prototype.js: 유명한 JavaScript 프레임웍 참고
IBM XML 인증
XML 기술자료: 한국 developerWorks XML 존의 기술자료, 팁, 튜토리얼, 표준, IBM Redbook 참고하기
developerWorks 기술 이벤트와 웹캐스트
Ajaxian

제품 및 기술 얻기

JCarousel
SWF/Gauge와 SWF/Charts:SWF/Gauge와 SWF/Charts, maani.us.
XML 슬라이드쇼 위젯
DHTML window
Scriptaculous: Scriptaculous 다운로드, script.aculo.us 사이트의 추가자료,
Prototype library.

토론

필자소개


		Jack D. Herrington은 20년 경력을 지닌 소프트웨어 엔지니어이다. Code Generation in Action, Podcasting Hacks, PHP Hacks 의 저자이다. 30개 이상의 기술자료를 기고했다. (jherr@pobox.com)

[출처] Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글)|작성자 파워홍

'Web > ajax' 카테고리의 다른 글

ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0)	2009.01.12
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0)	2009.01.12
php java ajax 웹프로그래밍 기술서 출처 (0)	2009.01.12
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0)	2009.01.12

And

ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷

| Web/ajax 2009. 1. 12. 02:06

Posted by bluebamus

출처 : http://rhox.info/44

2006년 AJAX (비동기 Javascript and XML) 열풍이 불면서 MS에서는 Atlas라는 코드명으로 시작하여 현재는 ASP.NET AJAX 1.0 정식버전이 나왔지요. Atlas까지는 클래스 라이브러리로 제공을 하지만 ASP.NET AJAX 1.0 부터는 설치형을 제공해주고 있습니다.

하지만 .NET 호스팅을 사용하시는 분들은 많이 고민을 할듯 합니다. 자신의 사이트에 AJAX를 도입하고 싶은데 막상 웹호스팅 회사에서는 AJAX 컴포넌트를 제공해주지를 않는 경우이죠. 이를 극복하기 위해 고민을 하다가 방법을 알아냈습니다~(짝짝짝)

첫번째로 생각할 점은 아무리 Atlas에서 ASP.NET AJAX로 넘어왔다 하더라도 AJAX는 '클래스라이브러리 (.dll)'를 통해서 실행된다는 것이지요. 즉, 바이너리 파일을 담당하는 폴더인 /BIN 에 AJAX에 관련된 .dll 파일을 넣는다면 무리없이 실행된다는 것이지요.

그럼 웹호스팅에 AJAX를 꾸겨넣어(?) 봅시다~~

1. ASP.NET AJAX 공식 사이트(http://ajax.asp.net/)에서 AJAX 1.0을 다운받고 설치합니다.
AJAX에 관심있으신 분들이라면 이 사이트를 안가보신 분이 없겠지요 ^^ 동영상 강좌와 커뮤니티를 지원해주고 가장 최신 버전의 AJAX를 제공해줍니다. 이를 설치하는 이유는 AJAX에 관련된 .dll 파일을 얻기 위한 것입니다.

2. 필요한 .dll파일들을 복사하세요.
저는 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\ 에 있더군요. AJAX가 설치된 폴더에서 다음 .dll파일들을 따로 복사합니다.

AJAXExtensionsToolbox.dll
System.Web.Extensions.dll
System.Web.Extensions.Design.dll
각각의 클래스 라이브러리들이 어떠한 기능을 하는지 궁금하신 분은.. 저에게는 능력의 한계라~ ASP.NET AJAX Documentation을 확인해주시기 바랍니다.

3. 그리고 ASP.NET AJAX Control Tookit도 다운받고 압축을 푸세요.
(http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=1425)
ASP.NET AJAX에서 기본으로 제공해주는 컨트롤을 사용하기 위해서 .dll 파일을(AjaxControlToolkit.dll) 가져와야 합니다. \SampleWebSite\Bin\ 여기에 컴파일된 클래스라이브러리가 있으니 이것도 복사를 해두세요.

4. 자~ AJAX를 도입할 웹사이트에 Bin폴더를 만들고 지금까지 모아놓은 4개의 .dll파일을 복사합니다.

5. 웹호스팅에 올립니다~~ 끝!

'Web > ajax' 카테고리의 다른 글

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0)	2009.01.12
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0)	2009.01.12
php java ajax 웹프로그래밍 기술서 출처 (0)	2009.01.12
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0)	2009.01.12

And

Ajax와 XML: 최고의 Ajax 배우기 (한글)

| Web/ajax 2009. 1. 12. 02:05

Posted by bluebamus

최상의 Web 2.0 애플리케이션으로 사용자 경험 향상

난이도 : 초급

Jack D Herrington, Senior Software Engineer, Leverage Software Inc.

2007 년 6 월 05 일

[출처] Ajax와 XML: 최고의 Ajax 배우기 (한글)|작성자 마검린

Web 2.0에서 최상의 Asynchronous JavaScript™ + XML (Ajax) 애플리케이션을 사용해봅시다. 이러한 애플리케이션들이 사용자 레벨에서 어떻게 성공을 거둘 수 있는지, 자신의 Web 2.0 애플리케이션에 맞는 기술을 찾아 뛰어난 사용자 경험을 이룩하는 방법은 무엇인지를 모색해봅시다.

본 기술자료에서는 최신 웹 애플리케이션들에게서 배울 점을 찾아볼 것이다. 모방의 대상이 되는 사이트들은 이를 문제 삼지는 않을 것이다. 결국 모방은 칭찬의 또 다른 표현이기도 하다.

필자는 기술적인 측면에만 주 초점을 맞추지는 않을 것이다. 이러한 사이트들의 기술적인 측면, 즉 Ajax를 통해 데이터가 전달되는 방법이 중요하긴 하지만 이것이 성공적인 사이트를 만드는 것은 아니기 때문이다. 이러한 사이트들이 브라우저의 Ajax 기능들과 Dynamic HTML (DHTML)을 함께 사용하여 매력적인 사용자 경험을 어떻게 만들어 내는지를 생각해 봐야 한다. 또한, 이러한 사이트들이 사용자 커뮤니티와 어떻게 상호 작동 할 수 있는지도 봐야 한다. 이러한 모든 요소들이 성공적인 사이트를 만드는데 있어서 기술만큼 중요한 것이다.

Google Maps

"가장 영향력 있는 Web 2.0 애플리케이션"에 대한 오스카 또는 골든 글로브 시상식이 있다면, 상은 Google Maps에 돌아가야 한다. 필자의 동료들이 Google Maps를 처음 봤을 때 그들의 반응이 뚜렷하게 기억난다. 브라우저에서 어떻게 이러한 것들이 가능할까? Google Maps는 브라우저의 애플리케이션에 사용자가 기대하는 바를 재정립함으로써 Web 2.0 혁신을 주도했다고 본다.

이 글을 읽고 있는 독자들도 Google Maps를 사용해 보았는지는 모르겠지만, 어쨌든 그림 1의 사이트를 보도록 하자.

그림 1. 현재의 Google Maps 버전

마치 종이로 된 지도를 보는 것처럼 쉽게 지도를 클릭하고 드래그 할 수 있다. 여러분이 방향을 잡으면 디스플레이 명멸(blinking)이나 지도를 이동시키지 않고도 지도 상에 라인으로서 나타난다. 사실, 대부분의 Google Maps의 기능은 서버의 HTML 페이지 없이도 실행된다.

Google Maps 다음으로 Ajax and Dynamic HTML이라는 단어가 두 번째 웹 혁명을 일으켰다. 이상한 점은 더 정확히 말해서 (XMLHTTP 객체를 사용하여 요청을 송수신 하는 것으로 Ajax를 정의한다면), Google Maps는 Ajax를 사용하지 않는다. Google Maps는 동적으로 생성된 <script> 태그를 사용하여 데이터를 이동한다. 이것은 XMLHTTP 객체 보다 앞서는 기술이다.

그런데 왜 Google Maps는 Ajax를 사용하지 않는 것인가? Google 엔지니어들의 생각까지는 알 수 없지만, 필자의 생각으로는 Google Maps는 "get-go"가 아닌 JavaScript "mashup-able"이 되도록 설계되었기 때문이다.

매시업(Mashup)

이 글 초반에서, 필자는 사용자 커뮤니티를 지원하는 것에 대해 이야기 했다. 이것은 중요하다고 생각한다. 매시업은 사용자 커뮤니티를 지원하기에 딱 알맞다. 매시업은 한 사이트에서 기능과 또 다른 사이트의 기능을 결합하여 보다 더 흥미로운 것으로 만드는 것이다. 매시업의 좋은 예는 Craigslist에서 렌탈 리스팅을 가져와서, Google Maps를 사용하여 이들을 지도 위에 배치하는 것이다.

Google Maps 매시업의 또 다른 예제는 MapMyRun.com이다. 이것은 Google Maps를 사용하여 달리기 선수들이 지도 상에서 거리를 파악할 수 있도록 한다. (그림 2)

그림 2. Map My Run 인터페이스

여기에서 필자는 왼쪽 페인에 있는 인풋 필드에 시작 위치를 넣는다. 그런 다음 마우스를 사용하여 달리기 코스를 가리킨다. 필자가 클릭하면 왼쪽 페인은 동적으로 업데이트 되어 거리를 보여준다. 줌인 기능을 통해 보다 상세하게 보거나 길을 벗어날 경우 위성 모드로 변환한다.

모든 어려운 지도 작업은 Google Maps에 의해 수행된다. MapMyRun 사이트는 지도 위에 몇 개의 JavaScript 코드를 배치하여 마우스 클릭을 처리하고 거리를 계산한다.

그렇다면 성공적인 Web 2.0 애플리케이션을 구현할 때 Google Maps에서 무엇을 배웠을까?

브라우저를 사용한다: Google Maps는 현대적인 브라우저의 동적인 측면을 매우 잘 활용한다. 이러한 브라우저 기능들을 사용하여 매력적인 사용자 경험을 만들어 낸다.
Ajax 순수성은 중요하지 않다: 극소수의 사람들은 Google Maps가 순수한 Ajax 애플맄이션이 아니라는 것을 알고 있다. 그러나 이러한 사람들 조차 그것을 문제 삼지 않는다. Google Maps는 사용자에게 놀라운 기능을 제공한다. XMLHttp이 사용되지 않는다는 것은 문제가 되지 않는다. 특정 기술에 너무 얽매일 필요가 없다.
JavaScript 매시업: JavaScript 코딩을 사용하여 하나의 사이트에서 또 다른 사이트로 기능을 삽입하는 기능은 매우 매력적이다. 특정 기능에 대한 중요한 소스를 사용할 수 있는 강점을 갖고 있다.

위로

TaDaList

이제 직접 경험해 보자. Google Maps는 Web 2.0 애플리케이션에 매우 높은 장벽을 치고 있다. 하지만 Ajax를 사용하여 애플리케이션에 엄청난 가치를 빠르게 추가할 수 있다. 그러한 가치의 예가 TaDaList이다. TaDaList는 매우 단순한 (그리고 무료의) to-do 리스트 매니저이다. 사이트를 설명하기 위해, 수영 연습을 위해 필자가 해야 할 일을 상기시켜 주는 계정과 수영 리스트를 그림 3과 같이 만들었다.

그림 3. 수영 리스트

고글을 구매해야 한다는 것을 추가해야 하므로 그 내용을 텍스트 필드에 입력하고 Add to list를 클릭한다. 이 아이템은 페이지 리프레시 없이 곧 알맞은 리스트에 추가된다. (그림 4)

그림 4. "Buy New Goggles"를 추가한 후
'Buy New Goggles'를 추가한 후

많은 것들이 있는 것 같지는 않고 Ajax를 사용하여 구현하기도 어렵지 않은데도 데스크탑 애플리케이션에서나 기대할 수 있었던 세련된 감각을 느낄 수 있다.

TaDaList는 Rails 프레임웍에서 작성된다는 것을 명심하라. 사실, 이것은 Rails를 배우는 사람들이 사용하는 데모용 애플리케이션이다. Rails 프레임웍에서는 이러한 유형의 Ajax 작업을 매우 빠르게 할 수 있다.

필자는 Rails에서 2분여 만에 매우 기본적인 TaDaList를 작성했다. to-do 아이템의 리스트는 그림 5에 나타나 있다.

그림 5. to-do 아이템 리스트

그리고 나서 Buy earplugs를 입력하고 Add를 클릭한다. 페이지를 리프레시 하지 않고도 아이템이 리스트에 나타난다. (그림 6)

그림 6. "Buy earplugs"를 추가한 후
'Buy earplugs'를 추가한 후

그 다음에는 to-do 아이템들을 저장할 작은 데이터베이스를 만들었다. 그리고 나서 Listing 1에 보이는 Rails 컨트롤러를 만들었다.

Listing 1. Todo_controller.rb

                

class TodoController < ApplicationController

  def list

    @tasks = Todo.find(:all)

  end

  def add

    task = Todo.new

    task.name = params[:task][:name]

    task.save


    @tasks = Todo.find(:all)

  end

end

Listing 1의 코드는 두 개의 메소드를 사용한다. list() 메소드는 페이지를 보여준다. add() 메소드는 새로운 아이템을 리스트에 추가하고 그 리스트를 HTML로 리턴한다.

list() 메소드용 RHTML은 Listing 2에 나타나 있다.

Listing 2. List.rhtml

                

<html>

<head>

<%= javascript_include_tag :defaults %>

</head>

<body>


<div id="results">

<% @tasks.each { |t| %>

<%= t.name %><br/>

<% } %>

</div>


<%= form_remote_tag :url => { :action => 'add' }, :update => 'results' %>

<%= text_field :task, :name %>

<%= submit_tag 'Add' %>

<%= end_form_tag %>


</body>

</html>

이 페이지는 form_remote_tag를 사용하여 단순한 형태의 콘텐트를 컨트롤러에 있는 add() 메소드에 제출한다. add() 메소드는 to-do 아이템을 테이블에 추가하고 결과 <div> 태그에 새로운 콘텐트를 리턴한다. 이 코드는 Listing 3과 같다.

Listing 3. Add.rhtml

                

<% @tasks.each { |t| %>

<%= t.name %><br/>

<% } %>

그렇다면 TaDaList에서 필자는 무엇을 배웠을까? 우선, 웹 애플리케이션을 위한 더 나은 데스크탑 느낌을 갖기 위해서는 Ajax가 갈 길이 멀다는 점이다. 두 번째로, Ajax를 채택하고 있는 웹 프레임웍의 선택은 이러한 유형의 작업을 수월하게 한다는 점이다.

위로

Campfire

Campfire는 같은 그룹(37signals)에서 개발한 TaDaList와 비슷한 사이트이다. 이 경우, 애플리케이션은 온라인 채팅을 호스팅 하고 파일 전송을 쉽게 함으로써 원격 팀을 위한 가상의 친목회를 시뮬레이트 하기 위해 개발되었다.

필자는 시험 계정을 설정하고 몇 가지 이미지 업로딩과 함께 채팅을 수행했다. 결과는 그림 7과 같다.

그림 7. 원격 팀들을 위한 가상 친목회

디스플레이의 왼편을 보면 누구나 언제라도 새로운 메시지를 게시할 수 있는 간단한 채팅 창이 있다. 오른편에는 누가 온라인 상태에 있는지, 파일 업로딩 장소는 어디에 있는지를 나타낸다.

파일 업로딩은 그 자리에서 JavaScript 코드를 사용하여 수행되어 파일 업로드 프로세스를 감시한다. 다시 말해서, 대화 시 다른 페이지로 이동할 필요 없이 파일과 이미지를 추가할 수 있다.

Campfire 역시 몇 가지 교훈을 준다. 우선, 사용자들이 데스크탑 애플리케이션에서 기대하는 채팅 서비스를 대체할 대담성을 갖고 있다. 하지만, 그룹 미팅의 정황에서 채팅을 호스팅 함으로써 이를 무난히 수행하고, 데스크탑과 비교해 볼 때 기능면에서 제한이 있는 시스템을 구현하지만 미팅의 정황에서만 사용할 수 있기 때문에 더욱 값지다.

두 번째 교훈은 파일 업로딩 같은 페이지 리프레시를 해야 하는 작동이 처리되어 어떤 페이지 로딩도 필요 없다. 따라서 사용자는 자신의 태스크에 집중할 수 있고 데스크탑 애플리케이션 느낌을 강화할 수 있다.

위로

YourMinis

이러한 사이트들의 일부가 Web 2.0을 사용한다면, YourMinis는 또 다른 영역에서, 여러분의 웹의 widget/gadget 사이트가 된다. 이를 사용하여 여러분은 다양한 위젯(또는, Microsoft lingo를 선호할 경우 gadgets,)을 호스팅 하는 페이지를 생성 및 커스터마이징 할 수 있다. 페이지는 대시보드로서 작동하면서 매력적인 방식으로 정보를 제때에 제공한다.

그림 8은 페이지에 Rottentomatoes 영화 위젯을 배치한 후의 사이트 모습니다.

그림 8. 영화 리뷰를 보여주는 YourMinis

Rottentomatoes는 영화 리뷰 사이트인데 약간의 트위스트가 있다. 수 백 개의 영화 리뷰들에서 점수를 모아서 그 수를 백분율로 제공한다. 60% 이상 점수를 가진 영화는 fresh(좋은 영화)로 간주된다. 이 경우, 필자는 Bridge To Terebithia,를 선택했고 우편 번호만 제공하면 위젯을 통해 영화 시간을 알 수 있다. (그림 9)

그림 9. 영화 시간을 보여주는 영화 위젯

인터페이스는 깔끔하고 빠르며 대중적인 브라우저에서도 잘 작동한다. 위젯 역시 다양한 장소(예를 들어, 이 사이트의 생성자의 블로그)에서 호스팅 할 수도 있다.

이 사이트 외에도, YourMinis는 Firefox 확장도 있기 때문에 여러분이 검색하고 있을 때 여러분을 지켜본다. RSS 피드나 MP3 같은 YourMinis와 함께 사용할 것을 찾으면 리소스를 사용할 수 있다는 것을 알려준다. 비교적 쉬운 브라우저와의 통합은 사이트를 사용자 데스크탑과 더욱 밀접히 통합할 수 있는 좋은 방법이다.

YourMinis는 Web 2.0에 대해서 더 많은 교훈을 준다. 우선, minis와 프레임웍은 Macromedia Flash로 구현된다. 사용자의 관점에서 보면, 이는 문제가 아니다. 특정 기술의 선택 문제는 궁극적인 사용자 이익보다는 중요하지 않다.

개발자들이 페이지 디자인을 커뮤니티에 기여하게끔 만든다. 사용자 커뮤니티와 함께 한다는 것은 여러분이 원래 상상하지도 못했던 방향으로 사이트를 만들 수 있다는 것을 시사한다.

Lightbox

특별한 사이트는 아니지만, Lightbox 기술은 최신 사이트에서 중요한 역할을 한다. lightbox는 사용자 인터페이스 기술과 Ajax를 결합한 것이다. 웹 페이지 예제를 보자. (그림 10)

그림 10. Lightbox JS의 홈페이지

이미지를 클릭하면 전체 페이지가 어두워지고 선택한 박스의 줌인 이미지가 페이지 중앙에 나타난다. (그림 11)

그림 11. 이미지 클릭 후에 나타나는 Lightbox

이 기술은 많은 장점이 있다. 사용자의 관심을 페이지의 나머지 부분들에서 끌어내어 선택한 부분에 집중할 수 있도록 한다. 사용자는 Close를 클릭하고 정상 페이지로 돌아갈 수 있기 때문에 사용자들이 페이지를 많이 이동하지 않고도 상세한 부분들을 볼 수 있다.

Lightbox 기술은 이미지나 비디오에 좋을 뿐만 아니라, 텍스트 콘텐트에도 유용하다. 필자가 자주 방문하는 콘텐트 사이트는 Lightbox 기술을 사용하여 홈 페이지에 있는 각 아티클의 시놉시스를 제공한다. 하지만 이 시놉시스는 사용자가 (Ajax를 통해) Lightbox 링크를 클릭할 경우에만 로딩된다. 따라서 사용자는 한 페이지에서 여러 아티클 시놉시스 아이템을 읽을 수 있고 서버 대역폭을 줄일 수 있다.

Lightbox를 만드는데 여러 오픈 소스 JavaScript 라이브러리들을 사용할 수 있다. 위에 설명한 것은 Lightbox JS version 2이다.

위로

기타 Web 2.0 사이트

이 글을 쓰면서 필자는 많은 Web 2.0 사이트들을 둘러보았다. 대부분이 위에 설명한 예제들에는 미치지 못했다. 특히 Google은 여러 가지 뛰어난 오퍼링을 갖고 있다. Google Documents와 Spreadsheets는 브라우저 내에서 WYSIWYG 에디팅이 어디까지 갈 수 있는지를 증명하고 있다. Google Reader는 RSS 피드를 통해 호스팅 솔루션을 제공하여 사용자가 어떤 장소에서든 뉴스를 볼 수 있게 하는 방법을 시사하고 있다. Google Mail은 Ajax, JavaScript, DHTML, Google Maps를 사용한다.

Google이 탁월성을 보이는 또 다른 분야는 모바일 접근성이다. Google의 모든 서비스들은 전화기와 기타 작은 장치에서도 잘 작동하는 버전을 갖고 있다. 하나의 Google 계정으로 웹 버전과 전화기 버전에 맞춰 커스터마이징 된 홈페이지가 생긴다.

놀라운 Ajax 작동을 보이는 것이 Google 만은 아니다. Meebo는 단순하지만 우아한 인터페이스를 가진 채팅 애플리케이션의 좋은 예이다. Kiko는 캘린더 편집에 DHTML을, 새로운 약속, 연락처, 관련 정보들로 서버를 업데이트할 때는 Ajax를 사용하는 캘린더 애플리케이션이다.

위로

결론

이 글에서 설명한 모든 사이트들에서 배울 점은 아주 많다. 특히, 훌륭한 기술 트릭을 배울 수 있다. 이 모든 사이트들이 공유하는 한 가지 공통적인 엘리먼트는 HTML과 JavaScript 코드의 결합에서 나오는 힘에 대한 깊은 신뢰이다. JavaScript 코드는 최근 프로그래밍 세계에서 나쁜 평판을 받았다. 필자가 들었던 대부분의 결점들은 JavaScript 언어 자체 보다는 Document Object Model (DOM)과의 브라우저 호환성과 더욱 관련이 있기 때문에 그러한 평판은 부당하다. 확실한 점은, 여러분이 매력적인 Web 2.0 애플리케이션을 만들고 싶다면 JavaScript 코드를 사용해야 한다는 것이다.

초반에 언급했듯이, 기술만이 문제가 아니다. 매력적인 사용자 경험을 이룩하는 것에 관한 것이기도 하다. 필자가 이 글에서 설명하기 위해 선택했던 모든 사이트들은 이 분야에 새로운 지평을 연 것들이다. 일부는 단순한 폼에 복잡성을 숨기기도 했고(Google Maps), 어떤 것들은 Ajax를 통해 인터페이스를 향상시켰다.

Web 2.0 애플리케이션들 역시 커뮤니티가 있다. Google Maps에서는 사용자들이 자신들의 애플리케이션에 사용할 기술을 혼합할 수 있다. Campfire 같은 사이트들은 집중된 사용자 경험을 향상시킨다.

확실히, 여러분은 많은 것을 배울 수 있다. 하지만 감사하게도, JavaScript와 DHTML 애플리케이션을 쉽게 구현할 수 있기 때문에 Web 2.0 애플리케이션 구현이 더욱 즐거워 질 것이다.

[출처] Ajax와 XML: 최고의 Ajax 배우기 (한글)|작성자 마검린

'Web > ajax' 카테고리의 다른 글

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0)	2009.01.12
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0)	2009.01.12
php java ajax 웹프로그래밍 기술서 출처 (0)	2009.01.12
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0)	2009.01.12

And

php java ajax 웹프로그래밍 기술서 출처

| Web/ajax 2009. 1. 12. 02:04

Posted by bluebamus

php java ajax 웹프로그래밍 기술서


PHP 프로그램에서 구글 캘린더 사용하기 구글 캘린더는 웹 응용 프로그램 개발자에게 사용자가 입력한 내용과 이벤트 정보를 REST 기반 개발자 API로 가져오는 방법을 제공합니다. PHP의 SimpleXML 확장 기능과 젠드(Zend) 프레임워크의 GData 라이브러리는 구글 캘린더 API가 생성한 XML 피드를 처리해 PHP 응용 프로그램을 만들기에 이상적인 기술입니다. 이 기사에서는 1) 구글 캘린더 데이터 API를 소개하고, 2) 사용자가 만든 캘린더를 살펴보고, 3) 캘린더 이벤트를 추가/갱신하고, 4) 키워드로 캘린더를 검색해 봅니다.	중급	2008년 9월 9일 (화)

PHP에서 유튜브 API 사용하기 유튜브(YouTube) 동영상 공유 사이트는 REST 기반 API로 공개된 사이트 내용을 웹 개발자들에게 공개합니다. PHP가 제공하는 SimpleXML 확장 기능을 사용하면 이 API가 내놓는 XML 피드를 처리하여 PHP 응용 프로그램에 통합하기 쉬워집니다. 이번 기사에서는 유튜브 API를 소개하고, API를 사용하여 사용자가 올린 동영상을 찾아보고, 동영상 메타데이터와 덧글과 사용자 반응을 가져오고, 키워드 검색을 수행하는 방법도 살펴봅니다.	중급	2008년 9월 2일 (화)

Java XPath API XPath 식은 상세한 Document Object Model (DOM) 네비게이션 코드 보다 작성하기가 훨씬 더 쉽습니다. XML 문서에서 정보를 추출하는 가장 빠르고 간단한 방법은 자바 프로그램 안에 XPath 식을 삽입하는 것입니다. Java 5에는 XPath로 문서를 쿼리하는 XML 객체-모델 독립형 라이브러리인 javax.xml.xpath 패키지가 포함되었습니다.	중급	2008년 8월 25일 (월)

Ajax에서 XML 처리하기, Part 3: JSON을 사용하고 프록시 피하기 ajax 프로그램이 서버와 통신할 때 반드시 XMLHttp 요청을 보낼 필요는 없습니다. 연재 기사 마지막 편인 이번 기사에서는 공개 웹 서비스, JSON(JavaScript Object Notation), 동적 script 태그를 사용해 날씨 뱃지를 구현해 봅니다.	중급	2008년 7월 15일 (화)

데이터 웹 서비스를 사용하는 pureXML을 위한 유니버설 서비스 유니버설 서비스를 구성, 테스트, 수정하는 방법을 소개합니다.	중급	2008년 7월 15일 (화)

Ajax 오버홀, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기 Ajax 기술이 대형 상용 웹 애플리케이션의 모습을 변화시키고 있지만, 다수의 소규모 웹 사이트는 전체 사용자 인터페이스(UI)를 신속하게 재구축할만한 자원이 없습니다. 새로운 기능들이 실세계의 인터페이스 문제를 해결하고 사용자 경험을 향상시키는 만큼 비용이 드는 것이 당연합니다. 이 연재에서는, 오픈 소스 클라이언트 라이브러를 사용하여 UI를 지속적으로 현대화하는 방법을 설명합니다. 이번 회에는 단순한 라이트박스나 툴팁 기술을 사용하여 팝업 창과 네비게이션상의 막다른 길을 제거하는 방법을 배웁니다. 점진적 향상(progressive enhancement) 원칙을 통해, 고급 UI 기능들이 사이트 접근성을 방해하지 않고, 웹 표준을 준수할 수 있도록 보장합니다.	중급	2008년 6월 17일 (화)

DB2 pureXML을 사용해 XML 스키마 개선하기 XML을 사용하는 많은 시스템에서 XML 스키마는 계속 진화할 것입니다. 본 글에서는 DB2 pureXML Schema Registry(XSR) 기능을 사용해 스키마의 변화를 처리하는 방법을 배우고 (중요도에 상관 없이) 단계별로 스키마 변화의 예제를 따라해 보겠습니다.	중급	2008년 5월 20일 (화)

XStream으로 자바 객체를 XML로 직렬화하기 XML 직렬화는 객체 퍼시스턴스와 데이터 전송을 포함한 무수히 많은 쓰임새가 있습니다. 그러나 일부 XML 직렬화 기술은 구현하기 어렵습니다. XStream은 자바 객체를 XML로 직렬화하거나 그 반대로 역직렬화할 수 있는 가볍고 사용하기 쉬운 오픈 소스 자바 라이브러리입니다. XStream을 설정하고, 이를 이용해 객체를 직렬화하고 역직렬화하는 방법을 배웁니다. 또한 설정 속성들을 XML 설정 파일에서 읽어오는 방법도 알아봅니다.	중급	2008년 5월 20일 (화)

웹 사이트 물려받기: 웹 사이트를 유지보수 가능한 상태로 만들기 완벽한 세상에서 여러분은 지금까지 할당된 모든 웹 사이트를 직접 유지보수하고, 개선하고, 새로 설계할 것입니다. 불행하게도 현실 세계에서는 여러분은 종종 누군가 다른 사람이 설계했거나 만든 사이트를 이어 받아야 할 경우가 생깁니다.	중급	2008년 5월 20일 (화)

시맨틱 웹 사이트 계획하기 시맨틱 웹은 사용자에게 좀 더 똑똑한 검색 결과를 제공하고 사이트 소유주에게는 방문객이 정말로 원하는 내용을 찾도록 만들어 방문자 숫자를 늘일 기회를 제공합니다. 하지만 이런 장점은 마법처럼 저절로 생겨나지 않습니다. 이 기사는 이렇게 새롭게 등장한 기회를 제대로 활용하기 위해 정보 아키텍처와 일반적인 하부 조직이라는 양쪽 측면을 모두 다룹니다.	초급	2008년 5월 13일 (화)

Ajax에서 XML 처리하기, Part 1: 네 가지 방법 어떤 프로그래밍 문제든 올바르게 해결하는 방법은 여러 가지가 있습니다. 이 연재물에서는 네 가지 방법으로 Ajax(Asynchronous JavaScript + XML) 날씨 뱃지를 만들어 봅니다. 여기서 뱃지란 웹 페이지에 내장하기 쉽고 재사용하기도 쉬운 작은 위젯을 가리킵니다. 첫 번째 기사에서는 네 가지 방법을 개략적으로 설명한 후 첫 번째 방법인 DOM 트리 탐색 기법을 자세히 살펴봅니다.	중급	2008년 5월 6일 (화)

E4X와 Prototype으로 구현하는 Ajax 스무고개 게임, Part 2: 게임을 더 똑똑하게 만들기 (한글) Part 1와 Part 2로 나누어진 이 기사에서는 E4X(ECMAScript for XML)와 프로토타입 자바스크립트 라이브러리를 사용하여 간단한 Ajax 스무고개 게임을 구현합니다. 이미 잘 알듯이, 스무고개 게임은 일련의 질문을 던지면서 사용자가 생각하는 답을 찾아냅니다. Part 1에서는 기존 지식 데이터베이스를 받아서 사용자 답을 유추하는 프로그램을 만들었습니다. Part 2에서는 지식 데이터베이스에 새로운 정보를 추가합니다. 또한 프로토타입 자바스크립트 라이브러리를 사용하여 프로그램을 외부 데이터베이스와 연동합니다. 외부 지식 데이터베이스를 사용하면 누구든 게임을 할 때마다 프로그램이 새로운 정보를 습득하여 더욱 똑똑해집니다.	중급	2008년 4월 22일 (화)

E4X와 Prototype으로 구현하는 Ajax 스무고개 게임, Part 1 : 스무고개 게임 기반 구조 구현하기 (한글) 현재 Ajax(Asynchronous JavaScript with XML) 자료 전송에는 자료 형식으로 당연하게 XML을 선택하는 듯 보입니다. 그러나 자바스크립트에서 XML과 DOM(Document Object Model)을 사용하는 방법이 항상 최선이라 보기는 어렵습니다. 좀더 객체스러운 느낌을 제공하는 JSON(JavaScript Object Notation)도 있고, XML을 원시 자료 유형으로 지원하는 E4X(ECMAScript for XML)도 있습니다. 특히, E4X는 DOM의 장점에다 극도로 쉬운 자료 바인딩 기법을 결합하여 브라우저에서 XML을 간편하게 조작하게 해줍니다. 여기서는 Part 1와 Part 2로 나누어 E4X와 Prototype 자바스크립트 라이브러리로 간단한 Ajax 스무고개 게임을 구현합니다. 이미 잘 알듯이, 스무고개 게임은 일련의 질문을 던지면서 사용자가 생각하는 답을 찾아냅니다. Part 1에서는 기존 지식 데이터베이스를 받아서 사용자 답을 유추하는 프로그램을 만들어 봅니다.	중급	2008년 4월 15일 (화)

15가지 베스트 프랙티스: DB2의 pureXML 성능 향상 (한글) DB2 9은 XML 데이터가 고유한 계층 포맷에 저장, 질의되는 pureXML이라는 기능을 지원한 첫 제품입니다. DB2는 XML 데이터를 질의하기 위해 SQL/XML과 XQuery라는 두 가지 언어를 제공합니다. 또한 DB2 9은 XML 인덱싱 기능과 XML 스키마 유효성 지원이 특히 향상됐습다. 이 글에서는 DB2 고유의 XML 데이터 처리 성능에 대한 설명과 함께, XML에 특화된 주요 성능 팁을 추가로 제공합니다. 본 글은 DB2 9.5용으로 추가 업데이트됐습니다.	중급	2008년 4월 15일 (화)

Ajax 오버홀(overhaul), Part 1: Ajax와 jQuery로 기존 사이트 개선하기 (한글) 비동기 자바스크립트 + XML(Ajax)로 기존 사이트를 개선하기 연재의 첫 번째 기사에서는 팝업 창과 네비게이션의 막다른 길을 제거하고, 간단한 모달 대화상자로 대체하는 방법을 설명합니다.	초급	2008년 4월 15일 (화)

Ajax와 XML: 테이블을 위한 Ajax(한글) Ajax(비동기 자바스크립트() + XML)의 장점 중 하나는 동적으로 서버에서 가져온 데이터를 사용자에게 표시하는 것입니다. 이 기사에서는 Ajax를 이용해 동적인 데이터를 테이블, 탭, 글라이더를 사용하여 표시하는 방법을 몇 가지 알아봅니다.	중급	2008년 4월 8일 (화)

HTML 5에 추가된 새로운 요소 (한글) HTML 5는 20세기 이후 처음으로 HTML에 새로운 요소를 추가했습니다. 새 구조 요소로는 aside, figure, section이 있으며 새 인라인 요소로는 time, meter, progress가 있습니다. 또한 새로운 내장 요소로는 video와 audio가 있으며 새로운 대화형 요소로는 details, datagrid, command가 있습니다.	초급	2008년 4월 1일 (화)

Thinking XML: 파이어폭스 2.0과 XML (한글) 파이어폭스 2.0은 몇 가지 주요한 측면에서 XML 지원 방식이 달라졌습니다. 현재 파이어폭스 사용자 수는 급격하게 늘어나는 추세입니다. 여기서는 파이어폭스 2.0에서 달라진 XML 기능을 살펴봅니다. 또한 현재 논쟁이 분분한 RSS 웹 피드 처리 방식도 소개합니다.	초급	2008년 4월 1일 (화)

PHP로 사용자 정의 가능한 RSS 피드 수집기 구현하기 (한글) RSS(Rich Site Summary, RDF Site Summary 또는 Really Simple Syndication)는 1990년대 중반에 생겨났습니다. 지금까지 다양한 변종이 나타났다 사라졌으며, 여러 단체와 개인이 소유권 논쟁을 벌였습니다. 그럼에도 불구하고 RSS는 한 웹 사이트에 담긴 정보를 여러 사람에게 배포하는 메커니즘으로 꾸준하게 각광을 받아왔고, 이러한 RSS의 인기를 발판으로 피드 구독기(Feed Reader) 혹은 피드 수집기(Feed Aggregator)라는 새로운 웹 소프트웨어가 생겨났습니다. 상업적으로 판매되는 피드 수집기도 여럿 있지만, 자신의 피드 수집기를 직접 구현해 자신의 웹 응용 프로그램에 통합하기가 그리 어렵지 않습니다. 이 기사에서는 사용자 정의 가능한 RSS 피드 수집기를 구현해 봅니다. 완전히 돌아가는 PHP 코드를 제공하고, RSS 피드 수집기 수정을 위한 서버측 PHP 함수 사용법도 소개합니다. 또한 완전히 돌아가는 RSS 피드 수집기 코드도 제공하므로 곧바로 내려 받아 사용할 수도 있습니다.	고급	2008년 3월 18일 (화)

PHP에서 풀(pull) 방식으로 XML 구문을 분석하는 방법 (한글) 여기서는 PHP 5부터 추가된 XMLReader 라이브러리를 소개합니다. XMLReader 라이브러리를 사용하면 PHP에서 효율적인 스트리밍 모드로 XML 문서를 처리할 수 있습니다.	중급	2008년 3월 11일 (화)

XMLTABLE 예제, Part 2: DB2와 XMLTABLE을 사용하는 일반 시나리오 (한글) 이 연재의 part 2에서 XML을 관계형 테이블로 쪼개 넣기, 큰 문서를 작은 문서로 나누기, XML 문서의 하이브리드 XML 관계형 저장소 만들기, XML 데이터를 통해 관계형 뷰 사용하기 같은 XMLTABLE 사용 시나리오를 배웁니다. 이 기법과 예제 들이 DB 9 pureXML로 강력한 XML 애플리케이션을 개발하는 데 도움이 될 것입니다.	중급	2008년 3월 11일 (화)

애플리케이션 개발시 Ajax를 사용해야 할 부분과 시점 Ajax는 웹 애플리케이션을 만드는 방법을 바꿔버렸습니다. Ajax를 사용해 불편한 사용자 경험(User Experience, UX)을 제거하여 여러분의 웹 사이트를 증진시키는 방법을 익히기 바랍니다.	중급	2008년 3월 11일 (화)

Ajax와 XML: HTML 폼에 Ajax 사용하기 (한글) HTML 폼을 서버에 넘길 때 Ajax 콜백으로 보강하는 기술은 웹 2.0 기능을 응용 프로그램에 추가하는 현실적인 방법입니다. Ajax 코드를 추가하고 PHP 응용 프로그램에서 사용자 경험을 강화하는 다양한 기법을 살펴보겠습니다.	중급	2008년 3월 4일 (화)

Java EE가 Web 2.0을 만났을 때! (한글) 표준 Java Platform, Enterprise Edition 5 (Java EE)-기반 방식으로 개발된 Web 2.0 애플리케이션들은 심각한 성능 및 확장성 문제에 직면해 있습니다. 이유는, Java EE 플랫폼의 디자인-특히, 동기식 API의 사용-을 지탱하고 있는 많은 원리들이 Web 2.0 솔루션의 요구 사항에 맞지 않기 때문입니다. 이 글에서는 Java EE와 Web 2.0 방식 간 차이에 대해 설명하고, 비동기식 디자인의 효과를 분석하며, 자바 플랫폼에 비동기식 웹 애플리케이션을 개발할 수 있는 몇 가지 솔루션을 평가해 봅니다.	중급	2008년 2월 26일 (화)

Project Zero의 데이터 액세스 API를 사용하여 간단한 wiki 구현하기 (한글) Project Zero는 서비스 지향 아키텍처(SOA) 기반 Web 2.0 애플리케이션의 신속한 개발에 초점을 맞춘 단순화 된 개발 플랫폼입니다. Project Zero의 라이브러리 중에 으뜸은 무엇보다도 SQL 쿼리를 실행하는 단순한 API입니다. 이러한 API를 활용하여 wiki를 구현하는 방법을 배워봅시다.	중급	2008년 2월 26일 (화)

문서 발견을 위한 Faceted Navigation Faceted Navigation 시스템의 장점과 메타데이터 생성을 통해서 최대의 효과를 얻는 방법을 모색해 봅시다.	초급	2008년 2월 26일 (화)

Atom 문서를 JSON으로 변환하기 (한글) Atom 문서를 JSON으로 변환하는 일은 언뜻 보기에는 매우 단순한 일처럼 보입니다. Atom은 단순한 XML 조각이고, XML-JSON 변환 툴은 많이 있기 때문입니다. 하지만, Atom 포맷은 단순한 XML 엘리먼트와 애트리뷰트 만은 아닙니다. 많은 미묘한 상세들 때문에 Atom을 다루는 일이 까다롭습니다. 이 글에서는 그러한 문제들을 짚어보고, Apache Abdera 프로젝트에서 구현된 메커니즘으로 Atom 문서를 JSON으로 변환하는 방법을 설명합니다.	중급	2008년 2월 19일 (화)

DB2 9.5의 XML 업데이트 (한글) XQuery의 표준 확장인 XQuery Update Facility를 도입하여 XML 문서 안에서 개별 엘리먼트와 애트리뷰트를 수정, 삽입, 삭제할 수 있게 되었습니다. 이는 XML 데이터의 업데이트를 더욱 쉽게 만들며, 고성능을 보장합니다.	중급	2008년 2월 19일 (화)

XML 2007 (한글) Elliotte Rusty Harold가 2007년 한해 중요한 XML 뉴스를 되짚어 봅니다.	초급	2008년 2월 4일 (월)

XMLBeans에서 이벤트 받기 Eclipse에 Sudoku 게임 애플리케이션을 구현하고, eventing으로 사용자 인풋의 유효성을 검사하는 방법을 배워봅시다.	중급	2008년 2월 4일 (월)

Ajax와 XML: 채팅(chat)용 Ajax Asynchronous JavaScript + XML (Ajax)과 PHP를 사용하여 채팅 시스템을 웹 애플리케이션에 구현해 봅시다. 여러분의 고객들은 특정 인스턴트 메시징 소프트웨어를 다운로드 하거나 설치하지 않고, 사이트의 콘텐트에 대해 서로 이야기 할 수 있습니다.	중급	2008년 1월 22일 (화)

jpa2web으로 Ajax J2EE 웹 애플리케이션 구현하기 J2EE Ajax 기반 웹 애플리케이션을 JPA-주석 빈에서부터 생성하는 새로운 오픈 소스 툴인 jpa2web을 배워봅시다.	중급	2008년 1월 22일 (화)

팁: 세션 상태를 사용하여 불필요한 Ajax 트래픽 피하기 (한글) 가능하기만 하다면, RESTful 방식으로 Ajax 기반 애플리케이션을 포함하여 웹 애플리케이션을 구현한다면 많은 버그를 피할 수 있습니다. 하지만, REST (REpresentational State Transfer)의 함정은 비슷한 XMLHttpRequests를 통해 중복 데이터를 보내는 것입니다. 이 글에서는 세션 쿠키를 활용해서 서버 측 상태를 관리하여 클라이언트-서버 트래픽을 줄이는 방법을 설명합니다.	중급	2008년 1월 15일 (화)

AjaxTags로 Ajax 개발을 쉽게 (한글) 개발자와 사용자는 Web 2.0 시대에 웹 기반 애플리케이션의 가용성과 반응성에 대한 높은 기대를 갖고 있습니다. 지난 2년 동안 은둔 생활을 하지 않았다면 Asynchronous JavaScript + XML(Ajax)에 대해 들어보았을 것입니다. Ajax를 사용하여 브라우저 페이지의 재 로드 없이, 반응성 있고 동적인 브라우저 기반의 사용자 인터페이스를 구현할 수 있습니다. 이 글에서는 AjaxTags를 설명합니다. Java/JavaScript Library는 Ajax 기능을 JSP 페이지로 쉽게 통합할 수 있도록 해줍니다.	중급	2008년 1월 8일 (화)

Ajax와 XML: 미디어용 Ajax (한글) 광대역, 미디어, 영화, 이미지, 사운드 드라이브는 Web 2.0에 일대 혁신을 가져왔습니다. 미디어에 PHP와 Asynchronous JavaScript + XML (Ajax) 기술을 결합하는 방법을 배워봅시다.	중급	2007년 12월 18일 (화)

Xforms의 ROI 왜 여러분의 비즈니스는 XForms를 사용하는가? 엔터프라이즈 중심의 XForms 표준을 채택하는 데서 기인한 투자 회수율을 계산하는 여러 방법들을 검토해 봅시다.	중급	2007년 12월 18일 (화)

XSLT 2.0에서 커스텀 컬레이션(collation) 사용하기 국제화와, 특히 텍스트의 분류와 비교 지원이 강화된 XSLT 2.0을 만나보십시오.	고급	2007년 12월 4일 (화)

HTML V5와 XHTML V2 몇 년 만에 처음으로 향후 브라우저 버전의 방향이 모호해 졌습니다. 이 두 개의 표준 뒤에 숨어 있는 더 큰 그림을 발견해 봅시다.	초급	2007년 11월 27일 (화)

Castor를 이용한 데이터 바인딩, Part 1: Castor의 설치와 설정 데이터 바인딩 기능을 오픈 소스에 적용해 봅시다. 데이터 바인딩용 Castor를 다운로드, 설치, 구성해 봅시다.	고급	2007년 11월 20일 (화)

End-to-end Ajax 애플리케이션 개발, Part 3: 애플리케이션의 통합, 테스트, 디버깅 (한글) Ajax (Asynchronous JavaScript + XML)는 데스크탑 품질의 소프트웨어 기능을 브라우저 플랫폼에서 실행되는 웹 애플리케이션으로 가져오는 현대적인 방식으로서 빠르게 급부상 하고 있습니다. 이 글에서는 오픈 소스 커뮤니티의 기술들을 사용하여 엔드투엔드 Ajax 애플리케이션을 개발하는 방법을 설명합니다.	중급	2007년 11월 20일 (화)

음성 실행 XML, Part 4: VoiceXML로 웹 검색 애플리케이션 개발하기 (한글) 본 시리즈 마지막 기술자료에서는, VoiceXML을 인풋으로 취하고, 기본적인 웹 검색과 Yahoo 로컬 검색에 Yahoo Search API를 쿼리하는 애플리케이션을 개발해 보도록 하겠습니다. 이 쿼리는 특정 위치와 지역 내의 비즈니스에 관한 정보를 리턴합니다. 애플리케이션은 제출 후에 콜러에게 결과를 읽어줍니다.	중급	2007년 11월 20일 (화)

Apache WSS4J와 WebSphere DataPower SOA Appliances를 사용하여 XML 문서 서명 및 확인하기 XML 문서의 서명과, 인증, 무결성, nonrepudiability (부인 불가)에 대해 설명합니다.	고급	2007년 11월 13일 (화)

XForms를 커스텀 XML 에디터로서 사용하기 XSLT 2.0을 사용하여 XML 브래킷을 HTML 페이지로 변환합니다. 가상의 토너먼트의 결과를 디스플레이하고, 커스터마이징된 XML 에디터로서 XForms를 사용하여 브래킷을 채웁니다.	중급	2007년 11월 13일 (화)

음성 실행 XML, Part 3: 음성 블로깅(blogging) 애플리케이션 개발하기 (한글) 이번 시간에는, VoiceXML (VXML)을 인풋으로 사용하여, 데이터를 온라인 블로그에 저장하는 간단한 블로깅(blogging) 애플리케이션을 개발할 것입니다. 이러한 유형의 음성 블로깅을 사용하여 트위트(tweet) 또는 Twitter 엔트리를 만들 때 큰 효과를 볼 수 있습니다.	고급	2007년 11월 13일 (화)

Ajax와 XML: 라이트박스(lightbox)용 Ajax 모든 것이 놀랍고 매력적인 요즘, 사용자들의 관심을 끌기란 어려운 일입니다. Ajax 툴과 Lightbox, 팝업, 윈도우, 페이딩(fading) 메시지 같은 새로운 기술을 사용하여 사용자의 관심을 끌어봅시다.	초급	2007년 11월 6일 (화)

XMLTABLE 예제, Part 1: 관계형 포맷으로 XML 데이터 가져오기 (한글) SQL/XML의 XMLTABLE 함수를 최대로 활용하는 방법이 궁금하십니까? 관계형 포맷으로 XML 데이터를 가져오는 방법을 배우고 싶으십니까? 이 글에서는 XMLTABLE 함수를 상세히 설명하고 이 함수를 zOS 기반 리눅스, 유닉스, Windows용 DB2 9에서 사용하는 방법을 예제를 통해 설명합니다.	중급	2007년 10월 30일 (화)

음성 실행 XML, Part 2: 음성-실행 캘린더 개발하기 (한글) 두 번째 시간에는 음성 실행 캘린더 개발 방법을 배워봅시다. 캘린더의 데이터를 XML로 저장하고, 캘린더 엔트리들을 수정할 때, 애플리케이션이 지정된 명령어들을 포함하고 있는 VoiceXML을 읽도록 합니다. 이 캘린더는 VoiceXML을 출력하여 그 날의 태스크를 음성으로 표현합니다.	중급	2007년 10월 30일 (화)

XForms를 사용하여 회계 도구 만들기, Part 6: 요약하기 (한글) 6부로 구성된 본 연재에서는 X-Trapolate라는 온라인 회계 도구를 만들 때 MySQL, PHP와 함께 XForms의 기능을 활용하는 방법에 대해 다룹니다. 뛰어난 프로그래밍 기술이라도 문제를 풀 수 있는 능력을 넘어서는 다양한 문제를 안고 있습니다. 이번 연재에서는 실시간 계산과 뛰어난 인터랙션 등 XForms를 통해 효과적으로 해결할 수 있는 몇 가지 문제를 집중적으로 다룹니다. Part 6에서는 지금까지의 내용을 총 정리하고 애플리케이션 결과물에 결함은 없는지 앞으로의 가능성은 무엇인지 살펴보겠습니다.	중급	2007년 10월 23일 (화)

XPath 2.0과 XSLT 2.0으로 시간과 코드 단축하기 (한글) XPath 2.0과 XSLT 2.0에는 item 데이터 유형, to 연산자, 시퀀스(sequence)의 개념이 도입되었습니다. 이러한 기능들을 사용하여 XML 문서에서 고급 HTML 뷰를 생성하는 샘플 애플리케이션을 구현하고, XSLT 2.0의 새로운 기능을 사용하여 관리하기가 쉽도록 더욱 짧아진 스타일시트를 만들어봅시다. XSLT 2.0 데이터 유형화에 대해 설명한 다음, 새로운 xsl:function 엘리먼트를 사용하는 방법을 설명합니다.	중급	2007년 10월 23일 (화)

DWR을 사용하여 Ajax 기반 파일 업로드 포틀릿 개발하기 (한글) 파일 업로드는 오늘날 웹 포털의 기본 기능입니다. 이 글에서, Xiaobo Yang과 Rob Allan은 DWR(Direct Web Remoting)을 사용하여 Ajax 기반 파일 업로드 JSR 168-순응 포틀릿을 개발하는 방법을 설명합니다. DWR은 서버 측에 전개된 자바 클래스들을 기반으로 하는 JavaScript를 동적으로 생성할 수 있는 이상적인 Ajax 프레임웍입니다. DWR을 사용하여 포털 서버에서 파일 업로드 진행 상황을 검색하는 방법을 배워봅시다.	중급	2007년 10월 16일 (화)

Ajax 마스터하기, Part 11: 서버 측의 JSON (한글) 지난 기술자료에서는 JavaScript의 객체를 JSON으로 변환하는 방법을 배웠습니다. 이 포맷은 객체들 또는 객체 어레이들로 매핑하는 데이터를 보내는데(그리고 받는데) 사용할 수 있습니다. 본 시리즈 마지막 기술자료에서는, JSON 포맷으로 서버에 보내진 데이터를 핸들하는 방법과, 같은 포맷을 사용하여 스크립트에 응답하는 방법을 설명합니다.	고급	2007년 10월 9일 (화)

어떤 브라우저에서도 작동하는 XForms 작성하기 XHTML과 XForms 문서가 호스팅 및 작성되어 엔드 유저들이 XForms 기반 애플리케이션을 최대한 활용할 수 있도록 합시다.	중급	2007년 10월 9일 (화)

음성 실행 XML, Part 1: 음성 실행 RSS 리더(reader) 개발하기 온라인으로 데이터를 제공하는 쉬운 방식을 제공하는 RSS는 요즘 많은 관심을 받고 있습니다. VoiceXML 애플리케이션 개발과 관련한 네 편의 기술자료 시리즈의 첫 번째 기술자료에서는 음성 실행(voice-enabled) RSS 리더를 개발하는 방법을 설명합니다. 애플리케이션에 대한 인풋은 RSS 데이터가 되고, 아웃풋은 호환되는 음성 애플리케이션에 의해 읽고 말할 수 있는 VoiceXML이 됩니다.	중급	2007년 10월 9일 (화)

DB2 9 pureXML용 웹 서비스 생성하기 (한글) 웹 서비스는 서비스 지향 아키텍처(SOA)를 실현하는 중요한 구현 블록입니다. 애플리케이션이 점점 더 SOA로 향해가면서, 애플리케이션 기능을 웹 서비스로서 노출해야 할 필요가 많아졌습니다. 이 글에서는 간단한 자바 클래스를 사용하여 웹 서비스를 생성하여 pureXML 기능을 사용하여 DB2 9 에서 XML 데이터를 삽입 및 검색하는 방법을 설명합니다. 웹 서비스가 생성되어 WebSphere Application Server에서 전개되면, 웹 서비스 클라이언트로서 Rational Application Developer (RAD)의 빌트인 웹 서비스 익스플로러나 XForms를 사용하여 이들을 테스트 할 수 있습니다. 같은 서비스들이 SOAP over HTTP 웹 서비스 호출을 할 수 있는 웹 서비스 클라이언트에 의해 사용될 수 있습니다.	중급	2007년 9월 18일 (화)

Tip: XML Schema Standard Type Library 사용하기 (한글) XML 밸리데이션으로 유효한 데이터를 정의하는 복잡한 규칙을 만들 수 있습니다. 하지만, 사용하지 않는다면 아무 소용이 없습니다. 이 글에서, XML Schema Standard Type Library를 사용하여 이메일 주소와 전화 번호 같은 데이터 포맷 프로세스를 단순화 하는 방법을 배워봅시다.	초급	2007년 9월 18일 (화)

스키마 변화에 XML 쿼리 보존하기 (한글) 새로운 요구 사항들을 지원하기 위해 XML은 주기적으로 바뀝니다. 스키마 변화 문제와, 이렇게 변화하는 스키마를 다룰 수 있도록 애플리케이션 개발자를 위한 가이드라인을 제시합니다.	중급	2007년 9월 18일 (화)

자바 프로그래밍으로 XML 서비스 정의 조작하기 XML 서비스 모델링과 사용자들(사람, 머신, 다른 서비스들)에 의한 서비스 소비에 있어서, 자바는 XML 데이터를 처리할 수 있는 강력한 메커니즘을 제공합니다. XML과 자바 기술을 사용하는 SOA의 측면에 대해 알아봅시다.	초급	2007년 9월 18일 (화)

Atom의 서명, 암호화, 암호 해제 (한글) Atom은 정보를 중계하는데 있어서 탁월한 포맷이지만, 보안 문제는 어떻게 다루고 있을까요? XML Digital Signatures로는 데이터 출처가 믿을 수 있는 것인지, 이 데이터가 바뀌지 않았는지를 확인하고, XML Encryption으로는 민감한 정보를 보호합니다. Atom 구조를 파괴하지 안고 이러한 기술을 어떻게 사용할 수 있을까요? 이 글에서는, Apache Abdera API를 사용하여 Atom 데이터에 디지털 서명과 암호화를 적용하는 방법을 설명합니다.	중급	2007년 9월 11일 (화)

Ajax와 XML: Ajax를 사용한 레이팅(rating)과 코멘팅(commenting) 웹이 사람들에 의해 구동되는 이러한 시대에는, 독자들이 사이트의 콘텐트를 평가하고 검토할 수 있게 하는 것이 중요합니다. 레이팅(rating)과 코멘팅(commenting) 기능을 Ajax를 사용하여 사이트에 추가하는 방법을 배워봅시다.	중급	2007년 9월 4일 (화)

PHP를 사용하여 XForms 생성하기, Part 1: PHP XForms 라이브러리 생성하기 개발자는 PHP를 사용하여 XForms 라이브러리를 생성하면서, 각 함수가 매개변수를 취하고 XForm 엘리먼트를 출력하도록 합니다.	중급	2007년 9월 4일 (화)

jQuery로 Ajax 개발을 단순화 하기 (한글) jQuery는 JavaScript 라이브러리로서 JavaScript와 Asynchronous JavaScript + XML (Ajax) 프로그래밍을 단순화 하는데 도움이 됩니다. JavaScript 라이브러리와는 달리, jQuery는 복잡한 코드를 간결하게 표현할 수 있는 독특한 철학이 있습니다. jQuery 원리, 기능과 특징을 배우고, 일반적인 Ajax 태스크도 수행하며, 플러그인으로 jQuery를 확장하는 방법도 알아봅니다.	중급	2007년 9월 4일 (화)

Ajax로 SOAP 웹 서비스 호출하기, Part 2: 웹 서비스 클라이언트 확장하기 (한글) Asynchronous JavaScript and XML (Ajax) 디자인 패턴을 사용하여 웹 브라우저 기반 SOAP 웹 서비스를 구현해 봅시다. 본 시리즈 Part 1, Ajax로 SOAP 웹 서비스 호출하기, Part 1에서 필자는 SOAP 웹 서비스를 호출하는 웹 브라우저 기반 JavaScript 라이브러리를 소개했습니다. 이 글에서는 Web Services Addressing Language와 Web Services Resource Framework 스팩의 지원을 통해 JavaScript 라이브러리 기능을 확장하는 방법을 설명합니다.	초급	2007년 8월 28일 (화)

Eclipse에서 DocBook XML 구현하기 (한글) DocBook XML은 거의 모든 아웃풋을 생성하기 위해 스타일시트를 작성하는데 사용되는 표준 XML 태그 라이브러리입니다. DocBook은 역사가 깊기 때문에, 다양한 유형의 문서를 생성하는 스타일시트가 여럿 존재하고 있습니다. DocBook XML과 Eclipse IDE를 함께 사용하여 여러 포맷으로 쉽게 배포할 수 있고 재사용 가능한 기술 문서를 생성하는 방법을 배워봅시다.	중급	2007년 8월 28일 (화)

End-to-end Ajax 애플리케이션 개발, Part 2: Ajax 클라이언트 및 서버 티어 구현하기 (한글) Ajax (Asynchronous JavaScript + XML)는 데스크탑 품질의 소프트웨어 기능을 브라우저 플랫폼에서 실행되는 웹 애플리케이션으로 가져오는 현대적인 방식으로서 빠르게 급부상 하고 있습니다. 이 글에서는 오픈 소스 커뮤니티의 기술들을 사용하여 엔드투엔드 Ajax 애플리케이션을 개발하는 방법을 설명합니다.	중급	2007년 8월 21일 (화)

JsonML 활용하기 (한글) JavaScript Object Notation (JSON)과 Asynchronous JavaScript + XML (Ajax)은 나란히 성장하고 있습니다. JSON은 JavaScript 객체로 바뀔 수 있는 데이터를 쉽게 전송할 수 있지만, 이 객체를 다루기 위해 커스텀 스크립팅이 필요합니다. JsonML은 JSON의 확장으로, JSON 유형 마크업을 사용하여 XML 데이터를 매핑하고, 이는 JSON 마크업에 기반하여 XML이나 XHTML 데이터를 쉽게 생성할 수 있고 사용자 인터페이스(UI) 엘리먼트를 쉽게 구현 및 교환할 수 있도록 합니다. 이 글에서, 이 편리한 툴을 사용법을 설명합니다.	중급	2007년 8월 21일 (화)

Ajax 애플리케이션의 보안 위협 극복하기 (한글) Web 2.0의 핵심 기술인 Asynchronous JavaScript + XML (Ajax)은 사용자와 웹 페이지 인터랙션을 웹 브라우저와 서버 통신으로부터 분리시켰습니다. 특히, Ajax는 매시업을 실행하는데, 이는 여러 콘텐트나 서비스를 하나의 사용자 경험으로 통합시킵니다. 하지만, Ajax와 매시업 기술은 동적이고 멀티도메인 성격으로 인해서 새로운 문제를 야기시켰습니다. Ajax 기술과 관련한 문제에 대해 배우고 이를 해결하는 베스트 프랙티스에 대해서도 알아봅시다.	중급	2007년 8월 14일 (화)

DB2용 XML 프로그램, Part 2: 애플리케이션 아키텍처에서 XML에 대한 데이터베이스 지원 활용하기 본 시리즈의 Part 2에서는 DB2 9의 새로운 XML 스토리지와 쿼리 환경이 Part 1에서 설명한 XML 데이터 모델에서 어떻게 작동하는지를 설명합니다.	중급	2007년 8월 14일 (화)

XHTML 2 사용하기 (한글) XHTML 2 스팩은 아직 완성되지 않았지만 XHTML 1보다 이미 많은 장점을 갖고 있습니다. 편집 포맷으로서, 단일 소스 퍼블리싱 시스템을 위한 중앙 스키마로서의 역할을 하는 등, 이전 버전보다 훨씬 풍부한 구조를 갖추었습니다. 브라우저에서 XHTML 2의 새로운 사용자 인터페이스 기능이 지원되기를 기다릴 필요 없이, 지금 이러한 새로운 기능을 경험할 수 있습니다.	초급	2007년 8월 14일 (화)

Rich Web Application Backplane 플래닝 이 글에서, 애플리케이션이 사용하게 될 공통 구현 블록 또는 컴포넌트를 제공하는 Rich Web Application Backplane(W3C Note)를 설명합니다.	초급	2007년 8월 7일 (화)

XML과 자바: 다양한 수준의 XML API? (한글) Brett McLaughlin이 핵심 XML API를 상세히 설명하고, 개발자들이 자바와 XML 프로그래밍을 잘 활용하고 있는지를 짚어봅니다.	중급	2007년 8월 7일 (화)

JavaScript를 사용하여 XForms를 더욱 강력하게 XForm에서 모든 행들이 사라질 때까지 Remove 버튼을 클릭하고 행을 다시 삽입했던 적이 있습니까? 어떤 일이 발생했나요? 아무 일도 발생하지 않았습니다. 이 글에서는 JavaScript를 사용한 문제 해결 방법을 설명합니다.	중급	2007년 7월 31일 (화)

비 Unicode 데이터베이스의 XML 프로세서의 프로세싱 엘리먼트상에서 벡터 프로세싱을 위해 애플리케이션을 최적화 하는 SPE C/C++에 대해 배워봅시다.	중급	2007년 7월 31일 (화)

LTA-JD용 정적인 파서 플러그인 구현하기 LTA-JD용 플러그인으로서 정적인 파서 디자인을 설명하여, WebSphere Application Server JVM이 기록한 플레인 텍스트에서 의미 있는 언어를 만드는 방법을 설명합니다.	중급	2007년 7월 24일 (화)

XPath 인젝션의 위험 피하기 일반적으로 발생하는 XPath 공격, 이 같은 위협을 탐지하는 방법, 이를 해결하는 방법을 설명합니다.	중급	2007년 7월 24일 (화)

Atom 서비스 문서를 사용하여 사이드바 만들기 Atom 서비스 문서는 독자들에게 사이트의 피드의 위치를 알려주는 장치입니다. 이 글에서 이 문서를 사용하여 서버가 제공해야 하는 모든 것을 보여주는 사이드바를 만드는 방법을 설명합니다.	중급	2007년 7월 18일 (수)

End-to-end Ajax 애플리케이션 개발, Part 1: Ajax 환경 설정 (한글) Ajax (Asynchronous JavaScript + XML)는 브라우저에서 실행되는 웹 애플리케이션을 데스크탑용 소프트웨어 수준으로 끌어 올리는 방식으로 빠르게 대두되고 있습니다. Linux-Apache-MySQL-PHP (LAMP) 같은 오픈 소스 소프트웨어와 IBM WebSphere Application Server Community Edition 같은 오픈 표준 기반 Java 2 Platform, Enterprise Edition 미들웨어는 Ajax 웹 애플리케이션들을 개발 및 전개하는 탁월한 기능들을 제공하고 있습니다. 이 글은 오픈 소스 미들웨어 스택을 사용하여 엔드투엔드 Ajax 애플리케이션을 개발하는 방법에 관한 시리즈입니다. 여러분이 XHTML, CSS, JavaScript, PHP, SQL로 작성된 코드를 읽고 이해할 수 있는 신참 웹 개발자라면, 이 글이 도움이 될 것입니다. Ajax의 기본 개념과 3-티어 웹 애플리케이션 시나리오의 정황 속에서의 Ajax의 힘을 이해할 수 있을 것입니다.	중급	2007년 7월 18일 (수)

Thinking XML: XML 방식의 마이크로포맷(Microformat) (한글) 작고, 특화된 정보를 표준 포맷에 삽입하는 방식인 마이크로포맷(Microformat)에 대해 들어보았을 것입니다. 사실, 마이크로포맷은 두 가지 유형이 있습니다. 가끔은 매우 유용하게 사용되는 기본적인 마이크로포맷(elemental microformat)과 자주 문제를 일으키는 복합 마이크로포맷이(compound microformat) 있습니다. 웹(Web)을 활용하여 복합 마이크로포맷의 함정을 피할 수 있는 기본적인 방법에 대해 배워봅시다. XML과 JSON 같은 데이터 표현 기술이 마이크로포맷을 대체할 수 있습니다.	중급	2007년 7월 3일 (화)

Hamlets 적용하기 Hamlets와 OSGi를 결합시키면 인터넷 기반의 가전 제품을 만들 수 있습니다.	중급	2007년 6월 26일 (화)

XForms를 사용하여 Sudoku 게임 구현하기, Part 2: 게임 구현하기 (한글) Sudoku가 가장 주목을 받는 새로운 트랜드 중 하나라는 것은 누구나 알고 있습니다. 이 숫자 게임은 컴퓨터나 종이에서 할 수 있고, XPath를 사용하여 하나의 폼에서 데이터를 쉽게 분석할 수 있기 때문에 XForms를 사용하여 Sudoku를 실행할 수 있는 폼을 만드는 것도 가능합니다. 두 편의 기술자료로 구성된 시리즈에서는 서버에서 새로운 게임을 요청하는 게임 클라이언트를 만드는 방법을 설명하고, 게임의 흐름 탐지, 게임의 종료, 현재 게임을 저장하는 방법을 설명합니다. 또한 사용자를 위한 새로운 게임을 만드는 방법도 설명합니다. Part 2에서는 게임의 로딩 및 저장 방법에 대해 알아봅니다.	중급	2007년 6월 12일 (화)

Ajax와 XML: 최고의 Ajax 배우기 (한글) Web 2.0에서 최상의 Asynchronous JavaScript + XML (Ajax) 애플리케이션을 사용해봅시다. 이러한 애플리케이션들이 사용자 레벨에서 어떻게 성공을 거둘 수 있는지, 자신의 Web 2.0 애플리케이션에 맞는 기술을 찾아 뛰어난 사용자 경험을 이룩하는 방법은 무엇인지를 모색해봅시다.	초급	2007년 6월 5일 (화)

DB2 9 pureXML로 Microsoft Office 2007 문서 관리하기 DB2 9으로 Microsoft Office 2007 문서를 엔터프라이즈 및 인터넷 애플리케이션으로 보다 쉽게 통합할 수 있습니다. DB2 9 XQuery, Zend Core for IBM, HP: Hypertext Preprocessor (PHP), Php Data Objects (PDO) 기술과의 교환에 대해 설명합니다.	중급	2007년 6월 5일 (화)

공지용 토픽 정의, 설정, 처리하기 공지 생성자를 위한 토픽을 정의 및 설정하는 방법을 설명하고, 공지 소비자를 위해 토픽 기반 공지를 처리하는 방법도 설명합니다.	중급	2007년 6월 5일 (화)

XForms를 사용하여 Sudoku 게임 구현하기, Part 1: 게임 구현하기 (한글) Sudoku가 가장 주목을 받는 새로운 트랜드 중 하나라는 것은 누구나 알고 있습니다. 이 숫자 게임은 컴퓨터나 종이에서 할 수 있고, XPath를 사용하여 하나의 폼에서 데이터를 쉽게 분석할 수 있기 때문에 XForms를 사용하여 Sudoku를 실행할 수 있는 폼을 만드는 것도 가능합니다. 두 편의 기술자료로 구성된 시리즈에서는 서버에서 새로운 게임을 요청하는 게임 클라이언트를 만드는 방법을 설명하고, 게임의 흐름 탐지, 게임의 종료, 현재 게임을 저장하는 방법을 설명합니다. 또한 사용자를 위한 새로운 게임을 만드는 방법도 설명합니다. Part 1에서는 기본적인 게임 클라이언트를 만듭니다.	중급	2007년 5월 29일 (화)

Report Data Analyzer: EWLM 성능 데이터 인터프리팅 IBM Enterprise Workload Manager (EWLM)의 성능 데이터 인터프리테이션 기능을 확장하는 플러그인을 구현해 봅시다. 성능 데이터 분석에 EWLM을 사용하고 기능과 인터프리테이션 측면을 이해해 봅시다.	초급	2007년 5월 22일 (화)

Ajax와 XML: 다섯 가지 Ajax 안티 패턴(anti-pattern) (한글) 어플리케이션들이 어떻게 잘못 되었는지를 이해함으로써 어플리케이션들을 올바르게 수행하는 방법을 배울 수 있습니다. Asynchronous JavaScript + XML (Ajax) 애플리케이션들을 작성하는 것에도 올바른 방식과 그릇된 방식이 있습니다. 이 글에서는 여러분이 피해야 하는 몇 가지 코딩 방법에 대해 설명합니다.	중급	2007년 5월 15일 (화)

WS-Notification 필터를 통한 최적의 메시지 프로세싱 다양한 WS-Notification 필터들을 검토하고 각각의 장단점에 대해 알아봅시다. Muse 기반 웹 서비스 엔드포인트에서 이들을 활용하는 방법을 설명합니다.	중급	2007년 5월 15일 (화)

XForms를 사용하여 회계 도구 만들기, Part 1: X-Trapolate 만들기 (한글) 6부로 구성된 본 연재에서는 "X-Trapolate"라는 온라인 회계 도구를 만들 때 MySQL 및 PHP와 함께 XForms의 기능을 활용하는 방법에 대해 설명합니다. 뛰어난 프로그래밍 기술이라도 자체적으로 다양한 문제를 안고 있으며 이를 풀어나갈 수 있는 뛰어난 해결 능력도 갖고 있습니다. 본 연재에서는 실시간 계산과 뛰어난 인터랙션 등 XForms를 통해 효과적으로 해결할 수 있는 몇 가지 문제를 집중적으로 다룹니다. 이번 회에서는 이 연재에서 만들 서로 다른 폼과 기능에 대해 간단히 살펴보고 이러한 유형의 도구를 사용하여 설계할 때 고려해야 할 몇 가지 사항을 검토합니다.	중급	2007년 5월 15일 (화)

Ajax 마스터하기, Part 10: 데이터 전송에 JSON 사용하기 (한글) 평이한 텍스트와 XML은 비동기식 애플리케이션에서 정보를 송수신 할 때 사용할 수 있는 데이터 포맷입니다. Ajax 마스터하기 시리즈에서는 또 다른 유용한 데이터 포맷인 JavaScript Object Notation (JSON)에 대해 알아보고, 이것이 애플리케이션에서 데이터와 객체들을 어떻게 이동시키는지를 설명합니다.	초급	2007년 5월 2일 (수)

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) Web 2.0은 사용자 경험을 강조하고 있습니다. 이것의 일환으로 고급스러운 방식으로 사용자와 인터랙팅 하고 사용자에게 정보를 제공하는 것입니다. 이러한 새로운 인터페이스들을 위젯이라고 하며, Asynchronous JavaScript + XML (Ajax)을 사용하여 서버와 통신합니다. 사이트와의 상호 작동을 향상시키는데 사용할 수 있는 다섯 개의 위젯에 대해 알아봅시다.	중급	2007년 5월 2일 (수)

메타데이터로 리소스 프로퍼티 시맨틱 실행하기 메타데이터와 Muse가 메타데이터와 리소스 프로퍼티를 결합하여 프로퍼티를 보호하고 유효성을 검사하는 방법을 배워봅시다.	중급	2007년 5월 2일 (수)

DB2 XML 데이터용 자바 애플리케이션 개발하기 (한글) DB2 Viper(beta)는 XML 데이터의 저장, 관리, 쿼리에 대한 새로운 지원을 추가했습니다. 이 글에서, 새로운 XML 데이터에 액세스 하는 자바 애플리케이션의 작성 방법을 설명합니다. XML 데이터의 삽입, 쿼리, 업데이트, 삭제 방법과, XML 데이터에 액세스 하는 저장 프로시저(stored procedure)를 생성하는 방법을 설명합니다.	초급	2007년 4월 24일 (화)

장애진단 선별을 위한 프레임웍 구현하기, Part 2 이벤트 시각화와 Log and Trace Analyzer for Java Desktop을 사용하여 중요한 비즈니스를 수행하는 인프라스트럭처 관리와 운영과 관련된 사고와 문제들을 탐지, 평가, 해결하는 방법을 설명합니다.	중급	2007년 4월 17일 (화)

Ajax와 XML: 다섯 개의 일반적인 Ajax 패턴 Asynchronous JavaScript + XML (Ajax)은 단연 2006년의 화두였고, 2007년에도 이러한 기조를 이어갈 전망입니다. 하지만 이것이 여러분의 애플리케이션에는 어떤 영향을 미칠까요? Ajax 애플리케이션에 사용되는 일반적인 아키텍처 패턴에는 무엇이 있을까요? 이 글에서는 다섯 가지 Ajax 디자인 패턴을 소개합니다.	중급	2007년 4월 10일 (화)

Muse와 WEF로 이벤트 리포팅을 쉽게 Apache Muse 애플리케이션을 통해 시스템 관리 이벤트를 직렬화 하는 최상의 방법을 모색해 봅시다.	중급	2007년 4월 10일 (화)

IBM Workplace Forms V2.6을 사용하여 XML 데이터를 XFDL 폼으로 확장하기 XML Data Model과 IBM Workplace Forms를 사용하여 프리젠테이션 레이어에서 데이터 레이어를 분리하는 방법을 배워봅시다.	중급	2007년 4월 3일 (화)

Xquery를 사용하여 XML 처리하기 XQuery 1.0을 사용하여 XQuery가 실행되는 데이터베이스에 저장된 XML 문서에서 정보를 검색하는 방법을 배워봅시다.	초급	2007년 4월 3일 (화)

장애진단 선별을 위한 프레임웍 구현하기 이벤트 시각화가 Log and Trace Analyzer for Java Desktop을 사용하여 중요한 미션을 수행하는 인프라스트럭처 관리와 운영과 관련된 문제를 나타내고, 탐지하며, 평가 및 해결하는 방법을 알아봅시다.	중급	2007년 4월 3일 (화)

Ajax 마스터하기, Part 9: Google Ajax Search API 사용하기 (한글) 비동기식 요청은 서버 측 프로그램과의 통신에 대한 것만은 아닙니다. Google 또는 Amazon 같은 퍼블릭 API와 통신할 수 있고, 여러분이 갖고 있는 스크립트와 서버 측 프로그램이 제공하는 것 이상의 기능을 웹 애플리케이션에 추가할 수 있습니다. 이 글에서, Brett McLaughlin은 Google 같은 퍼블릭 API를 통해 요청을 하고 응답을 받는 방법을 설명합니다.	중급	2007년 3월 20일 (화)

DB2 9 소개: 애플리케이션 개발 향상 (한글) 개발자를 위해 새롭게 향상된 DB2 9을 만나봅시다. 새로운 Developer Workbench, .NET 환경과의 통합 강화, XML 및 SOA 환경 지원 강화, PHP와 Ruby on Rails용 새로운 드라이버와 어댑터, 새로운 애플리케이션 샘플들로 더욱 강화되었습니다.	초급	2007년 3월 20일 (화)

SOAP 클라이언트 (한글) 이 글에서는 특별한 SOAP 라이브러리가 없는 자바로 작성된 간단한 범용 SOAP 클라이언트를 설명합니다. 이 클라이언트는 SOAP의 요청 XML 문서를 내부에서 자동적으로 생성하는 대신, 임의의 XML 에디터(혹은 텍스트 에디터)를 사용하여 사용자가 직접 만든 요청을 사용할 수 있게 해줍니다. 이 클라이언트는 또한 원격 메소드의 값을 리턴하는 대신, 실제 SOAP의 응답 XML 문서를 보여줍니다. 짧은 자바 프로그램을 통해 SOAP에 대해 배워봅시다. HTTP 연결을 하고, XML을 보내서 원격 메소드를 호출한 다음, 서버에서 리턴된 XML 응답을 읽습니다.	초급	2007년 3월 20일 (화)

Meet the specs: WS-RT 1.0, Part 3 하나의 리소스에 있는 XML 코드 조각들이 전체 리소스에 영향을 주지 않고 다루어질 수 있도록 하는 특정 연산에 대한 오픈 표준인 WS-ResourceTransfer 1.0 초기 스팩에 대해 알아봅시다. 이 글에서는 WS-ResourceTransfer 1.0이 오류를 처리하는 방법에 대해 설명합니다.	초급	2007년 3월 13일 (화)

2007년 XML 전망 (한글) 2006년은 XML에 있어서는 매우 조용한 한 해였습니다. 2007년에는 좀더 흥미로운 일들이 펼쳐질 수 있을까요? Elliotte Rusty Harold가 2007년의 XML을 예견해봅니다.	초급	2007년 3월 6일 (화)

Hierarchical Inherited Rule-Interpreted XML 연구 (한글) Hierarchical Inherited Rule-Interpreted XML이라고 하는 새로운 XML 기술을 사용하여 표준 자바 프로퍼티들을 동적 프로퍼티들로 대체할 수 있습니다. 간단한 연산 또는 Groovy 연산을 사용하여 애플리케이션 상태에 기반하여 계산할 수 있는 프로퍼티들을 정의할 수 있고, 애플리케이션의 여러 인스턴스들에 단 한 개의 프로퍼티 파일을 사용할 수 있습니다. 예제를 통해서 이러한 기술을 사용하는 방법을 설명합니다.	중급	2007년 2월 27일 (화)

XML과 자바: XML의 효용성은 무엇인가? 데이터 교환 포맷으로서 XML	초급	2007년 2월 27일 (화)

주석이 달린 XML 스키마의 기본 매핑 (한글) IBM DB2 Viper 릴리스는 다수의 XML 관련 기능을 가지고 있습니다. 그 중 하나가 주석이 달린 XML 스키마 디컴포지션(decomposition)으로서, XML 문서들을 관계형 테이블로 변형(decompose)하는 것입니다. 주석이 달린 XML 스키마는 다양한 매핑 구조를 지원하기 때문에, XML 스키마로 정의된 엘리먼트/애트리뷰트를 관계형 스키마의 테이블-칼럼(table-column) 쌍으로 매핑할 수 있습니다. 많은 XML 스키마 문서들로 구성된 큰 XML 스키마들의 경우, 직접 주석을 다는 일은 성가신 일입니다. DefaultAnnotater 툴을 사용하여 기본 매핑을 만들고, 기본 관계형 스키마로 만들 수 있습니다.	중급	2007년 2월 20일 (화)

IBM Lotus Domino 애플리케이션에 어웨어니스(awareness) 추가하기 (한글) 인트라넷이나 웹 애플리케이션에 누가 접속해있는지를 확인하고, 그 사람들에게 인스턴트 메시지를 보냅니다. 이 글에서는 IBM Lotus Domino와 AJAX(Asynchronous JavaScript and XML)을 사용하여 Domino 웹 애플리케이션이나 인트라넷 사이트에 어웨어니스(awareness)를 추가하는 방법에 대하여 설명합니다.	초급	2007년 2월 13일 (화)

Meet the specs: WS-RT 1.0 operations, Part 2 Create 연산을 확장한 WS-ResourceTransfer 1.0 스팩을 소개합니다.	초급	2007년 2월 13일 (화)

Perl 개발자를 위한 Perl, Part 1: XML과 Perl -- 간단한 마법 XML과 Perl 솔루션이 필요하다면, 이 글을 읽으십시오, XML을 Perl 애플리케이션에 통합하는데 사용되는 XML::Simple 툴을 소개합니다.	초급	2007년 2월 6일 (화)

XML Matters: Ajax: XML의 다양한 대안들 (한글) Ajax는 매우 다른 기술들로 결합되어 있습니다. 하나는, Dynamic HTML로 알려졌던 DOM 트리의 페이지 조작이고, 또다른 기술은, 페이지를 재로딩 하지 않고, 클라이언트와 서버간 데이터를 전달하는 기술입니다. 이러한 기술들을 조합하여 데스크탑 애플리케이션의 좋은 기능들을 겸비한 강력한 웹 애플리케이션을 만들 수 있습니다. 이 글에서는 데이터 교환에 어떤 포맷을 사용할 것인지에 대해 설명합니다.	중급	2007년 2월 6일 (화)

Firefox의 XForms Mozilla XForms 확장을 사용하면, 브라우저에서 XForms를 처리할 수 있습니다. 현재 Firefox와 Mozilla XForms 플러그인에서 지원되는 XForms 프로세싱을 배워봅시다.	초급	2007년 1월 30일 (화)

XML in 2006 Elliotte Rusty Harold는 2006년, XML 관련 가장 중요한 뉴스들을 정리했습니다.	중급	2007년 1월 23일 (화)

XQuery를 이용한 DB2 XML 데이터 쿼리 (한글) IBM DB2 9(코드명 'Viper')에는 XML 데이터의 저장, 관리, 쿼리에 대한 새로운 지원 사항이 추가되었습니다. XQuery를 사용하여 XML 칼럼에 저장된 데이터를 쿼리하는 방법을 배워봅시다.	초급	2007년 1월 23일 (화)

PHP를 사용하여 Flash Movie 만들기 (한글) Rich Internet Applications는 Web 2.0의 새로운 유행어가 되었고, Web 2.0 막후의 핵심 컴포넌트는 Adobe Flash입니다. Flash Movie를 애플리케이션으로 통합하고 Ming 라이브러리를 사용하여 Flash Movie를 만드는 방법을 배워봅시다.	중급	2007년 1월 16일 (화)

Atom Publishing Protocol, Part 3: Apache Abdera project Apache Software Foundation에서 개발중인 Abdera 라고 하는 새로운 오픈 소스 프로젝트를 사용하여 Atom 실행 애플리케이션을 구현해 봅시다.	중급	2007년 1월 9일 (화)

Ajax 마스터하기, Part 8: 요청과 응답에 XML 사용하기 (한글) 지난 시리즈에서는, Ajax 애플리케이션인 서버로 가는 요청을 XML로 포맷팅 하는 방법을 설명했습니다. 그리고 대부분의 경우, 이것이 좋은 방법이 아닌지를 설명했습니다. 이번에는, 좋은 방법을 소개합니다. XML 응답을 클라이언트로 리턴하는 방법을 설명합니다.	중급	2007년 1월 2일 (화)

XML 2006 Elliotte Rusty Harold가 이번 달, Boston MA에서 개최된 XML 2006 컨퍼런스 내용을 정리합니다.	초급	2007년 1월 2일 (화)

IBM OmniFind Yahoo! Edition을 웹 사이트에 추가하기 무료로 다운로드 할 수 있는 검색 엔진을 쉽게 통합해 봅시다. OmniFind 검색 결과로 연결하는 것부터, XSLT를 사용하여 XML을 HTML로 변형하는 것 등, 여러 옵션에 대해 알아봅시다.	초급	2006년 12월 28일 (목)

Rails로 Ajax를 웹 애플리케이션에 구현하기 Rails 플랫폼의 Ajax 사용자 인터페이스를 설명합니다.	중급	2006년 12월 28일 (목)

SQL을 이용한 DB2 XML 데이터 쿼리 (한글) DB2® 9(코드명 ‘Viper’)는 XML 데이터의 저장, 관리, 쿼리에 대한 새로운 지원 사항이 추가되었습니다. SQL과 SQL/XML을 사용하여 XML 칼럼에 저장된 데이터를 쿼리하는 방법을 배워봅시다. 후속 기술자료에서는 XQuery를 사용하여 XML 데이터를 쿼리하는 방법을 설명합니다.	초급	2006년 12월 26일 (화)

DB2 9 pureXML과 CLOB 또는 shredded XML 스토리지의 성능 비교 새로운 pureXML 기술이 DB2 9의 어떤 부분에 성능을 향상시키는지, CLOB 또는 Shredded XML과 비교합니다.	중급	2006년 12월 21일 (목)

Ajax 마스터하기, Part 7: 요청과 응답에 XML 사용하기 (한글) Brett McLaughlin은 비동기식 요청을 보낼 때 데이터 포맷으로서 XML을 사용하는 방법을 설명합니다.	중급	2006년 12월 19일 (화)

RSS 뉴스 피드 소개 (한글) RDF Site Summary (RSS)는 웹에서 가장 광범위하게 사용되는 XML 포맷입니다. RSS 파일을 생성 및 사용하는 방법을 익히고, 이것이 어떻게 쓰일 수 있는지를 배워봅시다. Netscape, Userland, Moreover 같은 기업들이 RSS를 사용하여 기사 요약과 헤드라인을 배포 및 신디케이트 하는데 RSS를 사용하는 이유도 알아봅시다. 샘플 코드를 통해 RSS 파일의 엘리먼트를 설명하고, XML::RSS 모듈을 사용하는 Perl 예제도 설명합니다.	초급	2006년 12월 19일 (화)

Crossing borders: Ajax on Rails Ajax on Rails의 힘을 경험해봅시다.	중급	2006년 12월 14일 (목)

PHP와 RSS: 통합 RSS의 기초, PHP를 사용하여 데이터베이스에서 RSS 피드를 만드는 방법, XML_RSS 모듈을 사용하여 기존 RSS 피드를 읽고 이를 HTML로 변환하는 방법을 배워봅시다.	중급	2006년 12월 14일 (목)

Ajax 마스터하기, Part 6: DOM-기반 웹 애플리케이션 구현하기 (한글) Document Object Model (DOM)와 JavaScript 코드를 결합하여 인터랙티브 Ajax 애플리케이션을 구현해봅시다. 여러분이 배운 모든 것을 실제로 적용하여, 간단한 웹 페이지를 구현해 봅시다. 웹 페이지의 모든 효과들은 JavaScript를 사용하여 구현됩니다.	중급	2006년 12월 12일 (화)

RSS 2.0의 콘텐트 피드 (한글) RSS는 blog의 폭발적 증가에 기여했으며 가장 대중적인 XML 표준이 되었습니다. 이 글에서 RSS 2.0을 살펴봅니다. 이 기술자료는 2003년에 쓰여졌지만, 여전히 전세계 개발자들에게 가장 많이 읽히는 기사 중 하나입니다. 여러분의 추천에 의하여 이번에 재번역되었습니다.	초급	2006년 12월 12일 (화)

StAX'ing up XML, Part 1: StAX 소개 Streaming API for XML (StAX)은 자바 코드로 XML을 프로세싱하는 최신 표준입니다. StAX와 XML 프로세싱을 위한 커서 기반 API를 소개합니다.	중급	2006년 12월 7일 (목)

스팩: WS-RT 1.0, Part 1 WS-ResourceTransfer 1.0 스팩이 Get 연산을 어떻게 풀어가는지를 알아봅시다.	초급	2006년 12월 7일 (목)

developerWorks XML 밸리데이션 툴 (한글) 유효성 검사를 수행하는 XML 에디터를 찾을 수 없거나, 에디터 사용법을 배우는데 많은 시간을 들이고 싶지 않다면, 자신이 선호하는 텍스트 에디터를 사용하여 developerWorks 기술자료와 튜토리얼을 편집할 수 있습니다.	초급	2006년 12월 5일 (화)

XML Matters: MochiKit Javascript용 고급 라이브러리인 MochiKit에 대해 배워봅시다. Python 프로그래밍 느낌을 가진 Javascript를 만들 수 있습니다.	중급	2006년 11월 30일 (목)

DB2 Visual Studio 2005 Add-in을 사용한 주석이 달린 XML 스키마 디컴포지션 DB2 Visual Studio 2005 Add-ins를 사용하여 DB2 9의 XML SHREDDING 기술을 사용하는 애플리케이션을 구현해 봅시다.	중급	2006년 11월 23일 (목)

IBM Lotus Domino용 Web 2.0 클라이언트 개발 IBM Lotus Domino XML (DXL )에 HTML과 JavaScript를 사용하여 Web 2.0 스타일의 씬 웹 클라이언트를 구현하고 Notes/Domino 애플리케이션을 Ajax로 확장해 봅시다.	중급	2006년 11월 23일 (목)

Xalan 확장 Xalan XSLT 프로세서에서 자바 코드를 호출하여 XSLT에서는 작성하기 어렵지만, 자바에서는 쉽게 작성할 수 있는 함수를 제공합니다.	중급	2006년 11월 16일 (목)

XForms 팁: Ajax와 XForms의 결합 (한글) Ajax는 디자이너가 전체 페이지를 재 로딩 할 필요 없이 사용자의 액션에 반응하는 애플리케이션을 만들 수 있다는 점에서 웹 세계에 반향을 불러일으키고 있습니다. 이 기능은 이미 XForms에 있던 기능입니다. 이 글에서는 XForms와 Ajax 버전을 모두 검토하고, 이 두 기술을 결합하는 방법을 모색합니다.	중급	2006년 11월 14일 (화)

인간과 머신을 위한 웹, Part 1: 웹을 공유하는 방법 (한글) 이 시리즈에서는 머신과 인간이 웹에 개제된 풍부한 데이터에 쉽게 액세스 할 수 있는 기술들을 연구합니다. 첫 번째 글에서는 인간-컴퓨터 상충 현상, 다양한 기술들의 평가 기준, 웹 상에서 머신-인간 공존을 가능케 하는 주요 기술들을 간략히 설명합니다.	중급	2006년 11월 14일 (화)

왜 XForms인가? 왜 XForms를 사용해야 하는가? 국제화, 접근성, 장치 독립성 때문입니다.	중급	2006년 11월 9일 (목)

WS-I Basic Profile에 순응하는 WS이 디자인을 위한 XML Schema 조건 유효한 스키마라고 해서 특정 WSDL 정의에 다 유효한 것은 아닙니다. W3C WSDL 스팩과 WS-I Basic Profile에 순응하는 웹 서비스 디자인을 위한 스키마를 구현하는 방법을 배워봅시다.	중급	2006년 11월 2일 (목)

Working XML: 더욱 친숙한 RSS와 Atom 피드 사이트 방문자가 RSS와 Atom 피드를 읽고 이해하는데 도움이 되는 기술을 소개합니다.	초급	2006년 11월 2일 (목)

Mashup: 신종 웹 애플리케이션 (한글) mashup은 대화형 웹 애플리케이션의 한 장르로서, 외부 데이터 소스에서 가져온 콘텐트를 사용하여 완전히 새롭고 혁신적인 서비스를 만듭니다. 비공식적으로 Web 2.0이라고 알려진 2 세대 웹 애플리케이션을 의미하기도 합니다. 이 글에서는 mashup의 의미, 오늘날 구현되는 대중적인 mashup들, mashup 개발자들이 애플리케이션을 구현할 때 활용하는 기술들을 소개합니다. 또한, mashup 개발자들이 직면한 기술적, 사회적인 많은 문제점들도 있습니다.	초급	2006년 10월 31일 (화)

Atom Publishing Protocol, Part 1: Atom Publishing Protocol을 이용한 웹 리소스의 생성 및 편집 콘텐트 퍼블리쉬와 관리를 위한 중요한 새 표준인 Atom Publishing Protocol에 대해 알아봅시다.	중급	2006년 10월 26일 (목)

PHP를 이용한 SimpleXML 프로세싱 PHP version 5에 포함된 SimpleXML 확장을 묶어, PHP 페이지들이 PHP에 친화적인 문법으로 XML을 쿼리, 검색, 수정, 리퍼블리쉬 할 수 있도록 해봅시다	중급	2006년 10월 19일 (목)

Working XML: RSS 기능 확장하기 (한글) RSS의 대중성에도 불구하고, RSS 표준은 매우 단순하고 제한적입니다. RSS는 많은 것들을 수행하지는 않지만, RSS 모듈을 통해 확장이 가능합니다. 이 글에서 세 개의 대표적인 RSS 확장을 소개하고, RSS 확장을 디자인 하는 방법을 설명합니다.	중급	2006년 10월 17일 (화)

자바 개발자를 위한 Ajax: Ajax와 Direct Web Remoting (한글) Ajax 기능을 애플리케이션에 추가하기란 간단한 일이 아닙니다. "자바 개발자를 위한 Ajax" 시리즈 세 번째 기사에서는 Direct Web Remoting (DWR)을 사용하여 JavaBeans 메소드를 JavaScript 코드에 직접 노출하고 Ajax를 자동화 하는 방법을 설명합니다.	중급	2006년 10월 17일 (화)

RSS와 Atom을 사용하여 뉴스 동기화 구현하기 RSS와 Atom을 사용하여 정기 뉴스를 빠르게 동기화 하는 방법을 설명합니다.	중급	2006년 10월 9일 (월)

XForms 소개, Part 1: 폼을 위한 새로운 웹 표준 차세대 웹 기반 데이터 프로세싱인 XForms가 어떻게 작동하는지를 배워봅시다. Firefox와 IE로 XForms를 설정하여 XForms 샘플을 볼 수 있습니다.	중급	2006년 9월 28일 (목)

스팩 소개: WS-ResourceTransfer 1.0 전체 리소스 대신 리소스의 일부에 액세스 하여 액션 연산의 힘을 확장해 봅시다. 이 스팩이 어떤 의미가 있는지 알아봅시다.	초급	2006년 9월 28일 (목)

XML에서 JSON을 생성하여 Ajax 사용하기 RSS와 Atom을 사용하여 정기 뉴스를 빠르게 동기화 하는 방법을 설명합니다.	중급	2006년 9월 21일 (목)

표준과 스팩: XML: 미완성 표준이라도 없는 것 보다는 낫다! 속지 마세요! XML 관련하여 파일 포맷을 단순히 디자인 하는 것으로 이식성, 확장성을 이룩할 수 없습니다.	중급	2006년 9월 21일 (목)

Rich Internet Applications의 기술 옵션 웹 애플리케이션들은 다음 단계로 진화해야 하고, Rich Internet Applications (RIA)는 사용자 인터랙션을 상당히 향상시킬 수 있습니다. 이 글에서는 사용자 인터페이스(UI) 레이어에 RIA를 적용하는 방법을 설명합니다. 웹 개발자와 아키텍트라면 현재 이 분야에서 사용되는 기술인 Laszlo, XUL, XForms, Macromedia Flex, Dojo에 관심이 있을 것입니다. 아울러 다른 기술도 소개해 드립니다. 물론 HTML과 XML 같은 전통적인 UI 툴에 대한 이해가 필수입니다.	초급	2006년 9월 11일 (월)

Ajax 마스터하기, Part 5:: DOM 다루기 (한글) 지난 달, Brett은 웹 페이지를 정의하는 Document Object Model을 소개했습니다. 이번 달에는 DOM을 보다 자세히 연구합니다. DOM 트리의 부분들을 생성, 제거, 변경하는 방법을 설명하고 그 다음 단계인 웹 페이지를 업데이트 하는 방법을 설명합니다.	초급	2006년 8월 7일 (월)

DB2 Viper 시작하기 (한글) 베타 버전으로 릴리스 된 DB2® Viper는 XML 데이터의 저장, 관리, 검색에 대한 새로운 기능을 제공합니다. 이 글에서는 XML 데이터를 관리하기 위한 데이터베이스 객체를 만들고 DB2 데이터베이스에 XML 데이터를 구축하는 방법을 설명합니다.	초급	2006년 7월 28일 (금)

Ajax 마스터하기, Part 4: 웹 응답에 DOM 활용하기 (한글) 프로그래머(백엔드 애플리케이션)와 웹 프로그래머(주로 HTML, CSS, JavaScript를 작성)사이에는 오래 전부터 엄격한 구분이 있었습니다. 하지만 Document Object Model (DOM)이 그 틈을 메우면서 백 엔드에서는 XML과, 프론트 엔드에서는 HTML과의 작업이 가능해 졌습니다.	초급	2006년 7월 24일 (월)

PHP/Sajax와 함께 Ajax 사용하기 (한글) Asynchronous JavaScript and XML(Ajax)는 서버에서 새로운 콘텐트를 요청하고 페이지의 일부만 변경할 수 있도록 합니다. 본 튜토리얼에서는 PHP와 함께 Ajax를 사용하는 방법을 소개하고 PHP로 작성된 툴인 Simple Ajax Toolkit (Sajax)을 소개합니다.	중급	2006년 7월 24일 (월)

Asynchronous JavaScript with XML (AJAX)을 사용하여 애플리케이션 구현하기 (한글) AJAX (Asynchronous JavaScript with XML)를 사용하면 페이지 리프레쉬 없이 동적인, 비 동기식 웹 서비스가 가능하다. 본 튜토리얼에서는 도서 주문 애플리케이션 예제를 사용하여, 실시간 밸리데이션이 가능하고 페이지 리프레쉬가 필요 없는 AJAX 기반 웹 애플리케이션을 구현하는 방법을 설명한다.	초급	2006년 7월 3일 (월)

온 디맨드 운영 환경 표준 (한글) IBM® 온 디맨드 운영 환경을 구성하고 있는 다양한 레이어와 컴포넌트들을 설명합니다. 이들이 서로 어떻게 연관되는지와 함께 오픈 표준에 기반한 운영 환경의 구현을 통해 비즈니스 문제에 어떻게 대처하는지를 설명합니다.	초급	2006년 6월 26일 (월)

SVG를 사용하여 브라우저에서 벡터 그래픽 만들기 유연한 XML 그래픽 포맷의 Scalable Vector Graphics (SVG) 1.1을 사용하여 2차원 벡터 그래픽을 웹 페이지에 추가해 봅시다.	초급	2006년 6월 20일 (화)

DHTML과 XML을 사용하여 풍부한 Ajax 슬라이드 쇼 만들기 (한글) "Ken Burns Effects"를 사용하여 움직이는 Ajax 클라이언트 측 슬라이드 쇼를 만드는 방법을 배워봅시다.	초급	2006년 6월 19일 (월)

IBM Rational Web Developer를 사용하여 developerWorks 콘텐트 작성하기 1: MDD용 Aspect를 패키징 하는 방법 MDD 프로젝트에 AspectJ 기반 라이브러리를 만드는 방법을 설명합니다.	초급	2006년 6월 13일 (화)

Ajax 마스터하기, Part 3: Ajax의 고급 요청 및 응답 (한글) 많은 웹 개발자들에게 간단한 요청과 응답을 받는 것은, 사실 필요로 하는 전부이기도 합니다. Ajax를 마스터하고자 하는 개발자들에게는 HTTP 상태 코드, 준비 상태, XMLHttpRequest 객체에 대한 완벽한 이해가 필요합니다. 이 글에서는 다양한 상태 코드들을 보여주고 브라우저가 이를 핸들링하는 방법을 설명합니다.	초급	2006년 6월 12일 (월)

DB2 9의 pureXML: XML 데이터를 쿼리하는 방법은? MDD 프로젝트에 AspectJ 기반 라이브러리를 만드는 방법을 설명합니다.	초급	2006년 6월 8일 (목)

AJAX 전송 방식 세 가지 Ajax 데이터 전송 메커니즘(XMLHttp, 스크립트 태그, 프레임 또는 iframe)에 대해 알아보고 이들의 장단점도 분석해봅니다. 효율적인 Ajax 제어 기술(서버 및 클라이언트 모두)에 대해서도 살펴봅니다.	초급	2006년 6월 6일 (화)

Ajax 마스터하기, Part 2: JavaScript와 Ajax를 이용한 비동기식 요청 (한글) 대부분의 웹 애플리케이션들은 서버에서 전체 HTML 페이지를 얻는 요청/응답 모델을 사용합니다. 다시 말해서, 이 모델은 버튼을 클릭하고, 서버를 기다리고, 또 다른 버튼을 클릭하고, 다시 기다리는 일이 다반사입니다. Ajax와 XMLHttpRequest 객체를 사용하면 서버 응답을 기다리지 않아도 되는 요청/응답 모델을 사용할 수 있습니다.	중급	2006년 6월 5일 (월)

DB2 XML 평가 가이드 차세대 애플리케이션을 지원하는 XML 스토리지와 검색 기능을 사용하여 Windows 플랫폼 상에서 DB2 Viper 데이터 서버를 적용해봅시다.	초급	2006년 6월 1일 (목)

Working XML: XPath 2.0 시작하기 XSLT 2.0과 XQuery 권고안의 마지막 개발 단계에 와 있습니다. 이 새로운 모델에 대해서 알아봅시다.	초급	2006년 5월 30일 (화)

Ajax 마스터하기, Part 1: Ajax 소개 HTML, JavaScript, DHTML, DOM으로 구성된 Ajax는 볼품없는 웹 인터페이스를 인터랙티브 Ajax 애플리케이션으로 변형하는 획기적인 방식입니다. Ajax 전문가인 필자는 이러한 기술들이 어떻게 작용하는지 전체적인 개요를 비롯하여 세부사항 까지 설명합니다. 또한 XMLHttpRequest 객체 같은 Ajax의 중심적인 개념들을 소개합니다.	초급	2006년 5월 29일 (월)

DB2 V8 에서 DB2 Viper로 XML 애플리케이션 마이그레이션, Part 2: DB2 Viper 대 DB2 V8.x의 XML 기능 비교 DB2 Viper 의 XML 기능을 연구하고, 이것을 DB2 V8과 비교해 봅시다. 새로운 XML 지원의 영향력이 XML 기반 애플리케이션의 마이그레이션에 미치는 영향을 알아봅시다.	초급	2006년 5월 24일 (수)

AIDE 사용하기, Part 1: 터치포인트 구현하기 IBM Autonomic Integrated Development Environment (AIDE) 툴킷을 사용하여 자율 컴퓨팅을 구현해 봅시다. 관련 기술과 디자인 정책들을 배워봅시다.	초급	2006년 4월 24일 (월)

Tip: XSLT로 XML 샘플에서 민감한 콘텐트 제거하기 XML 코드 샘플을 공유해야 하는데 민감한 데이터가 있습니까? XSLT를 사용하여 XML 샘플에서 민감한 콘텐트를 제거하고 기본적인 XML 구조만 유지할 수 있습니다.	초급	2006년 4월 18일 (화)

Information On Demand 개방 프레임웍을 개발 프로세스에 적용해 봅시다. 기업 내에서 정보에 빠르게 접근하고 변형 및 분석, 제공할 수 있습니다.	초급	2006년 2월 28일 (화)

FastSOA: XML, XQuery, 원시 XML 데이터베이스 기술로 SOA 강화하기 XML, XQuery, 원시 XML 데이터베이스 기술 등으로 SOA를 더욱 강화시킬 수 있습니다.	초급	2006년 2월 22일 (수)

WebSphere Enterprise Service Bus and WebSphere Integration Developer 이 새로운 두 제품을 사용하여 기본적인 웹 서비스를 제공하는 중재 플로우를 개발하고, 이 서비스를 연결하여, 중재 플로우를 전개 및 테스트 합니다.	초급	2006년 2월 22일 (수)

Ajax 독파, Part 3: Ajax에서의 고급 요청과 응답 표준 웹 폼들이 Ajax와 작동하는 방법과, HTTP 상태 코드를 설명합니다.	초급	2006년 2월 21일 (화)

DB2 Viper: XML 지원 XML 데이터를 지원하는 새로운 쿼리 언어, 새로운 스토리지와 인덱싱 기술을 배워봅시다.	초급	2006년 2월 14일 (화)

HTML의 미래, Part 2: XHTML 2.0 웹 작성자, 브라우저 개발자, 표준 기구가 제안하는 HTML에 대한 다양한 방식들을 검토한다.	초급	2006년 1월 25일 (수)

Quality busters: 하나의 기술 솔루션 여러분은 마법 같은 새로운 툴을 좋아할 것이다. 하지만 과연 그것이 모든 문제를 해결할 수 있을까?	초급	2006년 1월 24일 (화)

웹 서비스를 구현하는 SOA 프로그래밍 모델, Part 1: IBM SOA 프로그래밍 모델 개요 (한글) IBM(R) Service-Oriented Architecture (SOA) 프로그래밍 모델을 사용하여 전문 프로그래머가 아니더라도 IT 자산을 생성 및 재사용 할 수 있다.	초급	2006년 1월 23일 (월)

Selenium을 이용한 수락 테스트 자율화 기능 테스팅 시 에러를 줄이고 시간을 절약해 보자.	초급	2005년 12월 24일 (토)

방화벽: 웹 서비스의 아킬레스 건 (한글) Web Services Polling (WS-Polling)을 사용하여 비동기식 메시징 문제를 해결할 수 있다. 이전 글, "WS-Addressing이 SOAP에 미치는 영향" 에서 필자는 WS-Addressing 스팩이 SOAP에 미치는 영향에 대해 설명한 바 있다. WS-Addressing Headers 내부의 정보를 기반으로 동적으로 라우팅 되는 SOAP 메시지의 개념에는 SOAP 사용자들이 자유롭게 적용할 수 있는 새로운 개념이 포함되었다. 이것은 단순한 HTTP 요청/응답 메시지 흐름에만 제한되지 않는다. WS-Coordination/Transactions와 WS-Reliable Messaging 같은 스팩은 비동기식 메시지 프로세싱 모델까지 고려하고 있다. 하지만 비동기식 메시지 프로세싱의 단점이자 채택하는데 걸림돌이 되는 것이 있다. 바로 방화벽이다.	초급	2005년 12월 23일 (금)

DITA와 현재 시스템으로 퍼블리시 하기 IBM 팀이 새로운 토픽 지향의 DITA 아키텍쳐에서 어떻게 작업하는지 알아보자.	초급	2005년 12월 20일 (화)

불신자를 위한 JSF: JSF 소문의 실체 (한글) Java™ Server Faces (JSF) 같이 중요한 기술은 수 많은 소문들을 만들어냈다. 주요 내용은 JSF 개발은 어렵고, 일반적인 접근 방식으로는 감당이 안되며, WYSIWYG 툴에 전적으로 의존해야 한다는 것이다. 총 4회로 이루어질 이 글에서 소문과 진실을 가려낸다.	초급	2005년 12월 19일 (월)

XML Matters: 웹은 더 이상 2차원 전용이 아니다. 웹에 3D가 가능할까? X3D의 사용 방법을 연구해 본다.	초급	2005년 12월 15일 (목)

HTML의 미래, Part 1: WHATWG 웹 작성자, 브라우저 개발자, 표준 기구가 제안하는 HTML의 다양한 방식들을 검토한다. 이 글에서는 WHATWG 스팩으로 구체화된 점증적인 접근방식과 W3C에서 제안한 XHTML을 다룬다. 또한, W3C의 새로운 Rich Client Activity도 설명한다. Part 1에서는 WHATWG에서 개발한 두 개의 스팩인 Web Applications 1.0(HTML5)과 Web Forms 2.0에 초점을 맞춘다.	초급	2005년 12월 6일 (화)

Tip: XML과 데이터베이스 간 매핑 (한글) XML 사용자들의 공통적인 관심사는 XML을 데이터베이스로 매핑하는 방법이다. 이 글에서 테이블 기반 매핑과 객체 관계형 매핑을 설명한다. 두 매핑 방식 모두 XML 문서와 데이터베이스(특히 관계형 데이터베이스)들 간 데이터를 전송하는 토대이다. 중요한 것은 이러한 매핑 방식이 양방향이란 점이다. 다시 말해서 XML 문서에서 데이터베이스로, 데이터베이스에서 XML 문서로 데이터를 전송하는데 사용할 수 있다는 점이다.	초급	2005년 12월 6일 (화)

데이터 바인딩: 데이터 바인딩 툴로서의 XPath, Part 1 XPath는 데이터 바인딩 API 로서 인식되지 못했다. 심지어 XML 세계에서는 많은 주목도 받지 못했다. 이 글에서 데이터 바인딩 툴로서 XPath를 조명한다.	초급	2005년 11월 29일 (화)

UML 시퀀스 다이어그램 (한글) 시퀀스 다이어그램을 자세하게 소개한다. 최신 UML 2.0 스팩의 새로운 표기법도 소개한다.	초급	2005년 11월 25일 (금)

UML 시퀀스 다이어그램 (한글) 시퀀스 다이어그램을 자세하게 소개한다. 최신 UML 2.0 스팩의 새로운 표기법도 소개한다.	초급	2005년 11월 25일 (금)

Unified Modeling Language version 2.0:모델 중심 개발 (한글) 소위 말하는 "모델 중심" 개발(MDD, model-driven development)은 고급 추상화와 자동화 방식에 기반 하여, 소프트웨어의 품질과 개발 생산성을 높인다. 모델링 언어의 역할은 MDD의 성공에 중요한 영향을 미치기 때문에 Unified Modeling Language (UML)도 최근 개정되었다. 중요한 새로운 모델링 기능들이 많이 추가되었지만 이번 개정판의 큰 특징은 보다 수준 높은 자동화를 실행할 수 있는 정확한 언어 정의라 할 수 있다. 이 글에서 UML 2.0의 특징들을 설명한다.	초급	2005년 11월 22일 (화)

Classworking toolkit: 리플렉션 기본 리플렉션을 통해 데이터 구조를 보다 깊게 파악할 수 있다.	초급	2005년 11월 8일 (화)

자바 개발자를 위한 Ajax: Ajax와 Direct Web Remoting 많은 사람들이 Ajax를 언급하는지, 왜 Direct Web Remoting (DWR)를 Ajax 툴박스에 추가하려고 하는지 그 이유를 밝힌다.	초급	2005년 11월 8일 (화)

Tip: XML 포맷을 설계하지 않는 방법 XML의 일반적인 실수와 디자인 허점을 피해서 포맷을 향상시켜보자.	초급	2005년 11월 4일 (금)

DB2 기초: SQL/XML 퍼블리시 기능 소개 SQL/XML 퍼블리시 기능을 사용하여 태그가 달린 XML 문서를 만들 수 있다.	초급	2005년 11월 3일 (목)

Working XML: 안전한 코딩 방법, Part 4 XML과 바이너리 데이터가 혼합된 문서로 작업할 때 어떠한 방식이 최선인지를 찾아보자.	초급	2005년 11월 2일 (수)

Atom 1.0 확장, Part 2: 저작권 라이센스, 자동화된 링크 프로세싱, 쓰레드 신디케이션 Atom 1.0의 확장 기능을 리뷰한다.	초급	2005년 10월 31일 (월)

Tip: RELAX NG에서 텍스트에 맞는 패턴 사용하기 문자 데이터의 다양한 패턴들 간 뉘앙스를 이해하자. RELAX NG의 텍스트의 기초를 설명한다.	초급	2005년 10월 28일 (금)

원시 XML과 PHP DB2 UDB의 차기 버전에 도입되는 원시 XML 기능으로 PHP를 사용할 수 있게 되었다.	초급	2005년 10월 27일 (목)

Atom 1.0 확장, Part 1: 피드 히스토리, 오더링 엔트리, 종료 타임스탬프 Atom 1.0 Syndication Format의 확장된 기술을 살펴보자.	초급	2005년 10월 25일 (화)

DITA와 SKOS를 이용한 주제 구분 Darwin Information Typing Architecture를 사용하여 콘텐트 토픽을 구분 및 처리할 수 있다.	초급	2005년 10월 18일 (화)

XML in Firefox 1.5, Part 1: XML 기능 개요 오픈 소스 Firefox 웹 브라우저는 많은 대중성을 얻고있다. Uche Ogbuji가 Firefox 1.5의 XML 기능을 짚어준다.	초급	2005년 10월 18일 (화)

웹의 미래는 Semantic이다! 지식 공유와 자동화에 온톨로지를 활용할 수 있는 방법을 모색해보자.	초급	2005년 10월 18일 (화)

엔터프라이즈 레벨 SOA에서 웹 서비스 실행하기, Part 7: XML-binary Optimized Packaging Specification으로 웹 서비스 속도 높이기 XML-binary Optimized Packaging (XOP) 스팩을 사용하여 웹 서비스 애플리케이션을 최적화 하는 방법을 Judith M. Myerson이 설명한다.	초급	2005년 10월 14일 (금)

AJAX로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 비동기식 JavaScript와 XML (AJAX) 디자인 패턴을 사용하여 웹 브라우저 기반 SOAP 웹 서비스 클라이언트를 구현한다.	초급	2005년 10월 11일 (화)

BICS 2를 이용한 서비스 정보 제한 Business Information Conformance Statement (BICS) 2 스팩을 설명한다.	초급	2005년 10월 11일 (화)

JAXP 밸리데이션 Java API for XML Processing의 최신 기능을 살펴보자.	초급	2005년 10월 11일 (화)

Tip: XML 문서의 워드 카운팅 XSLT를 사용하여 XML 콘텐트에서 단어를 세는 간단한 기술을 설명한다.	초급	2005년 10월 11일 (화)

구현 및 단위 테스팅 프로세스 자동화 CruiseControl을 설정하여 코드를 지속적으로 통합 및 테스트한다.	초급	2005년 10월 11일 (화)

IBM Forms for Mobile Devices로 Form 애플리케이션 만들기 IBM Forms for Mobile Devices (IFMD)로 form 애플리케이션을 구현, 전개, 실행하는 방법을 설명한다.	초급	2005년 10월 5일 (수)

IBM Forms for Mobile Devices로 Form 애플리케이션 만들기 IBM Forms for Mobile Devices (IFMD)로 form 애플리케이션을 구현, 전개, 실행하는 방법을 설명한다.	초급	2005년 10월 5일 (수)

웹 서비스 트랜잭션 트랜잭션 인식 애플리케이션과 웹 서비스 구현 방법을 설명한다.	초급	2005년 9월 30일 (금)

DITA Forum DITA 포럼에서 궁금했던 DITA에 대한 모든 것을 알아보자.	초급	2005년 9월 28일 (수)

DITA를 사용하여 HTML을 만드는 이유 Darwin Information Typing Architecture (DITA)는 XML 기반의 콘텐트 작성 및 구현 포맷이다. HTML에도 DITA를 사용하면 좋다.	초급	2005년 9월 28일 (수)

DITA의 도메인 특화 현재로서는, DTD는 정적이다. 결국, DTD 디자이너는 모든 문제를 다 다루어야 한다. 문제가 생기면 사용자들은 정보를 기존 유형에 맞춰야 한다. Darwin Information Typing Architecture (DITA)가 이 상황을 역전시킨다.	초급	2005년 9월 28일 (수)

DITA의 토픽 유형 Darwin Information Typing Architecture (DITA)는 문서 작성자와 아키텍트가 유형화된 토픽들을 만들 수 있도록 하는 방식을 제공한다.	초급	2005년 9월 28일 (수)

Darwin Information Typing Architecture 소개 Darwin Information Typing Architecture (DITA)는 기술적 정보의 작성, 생성, 전달용 XML 기반 아키텍쳐이다.	초급	2005년 9월 28일 (수)

Darwin Information Typing Architecture에 대한 FAQ DITA 전문가, Don Day, Michael Priestley, Gretchen Hargis가 DITA에 대한 궁금증을 풀어준다.	초급	2005년 9월 28일 (수)

Darwin Information Typing Architecture에 대한 FAQ (영문) DITA 전문가, Don Day, Michael Priestley, Gretchen Hargis가 DITA에 대한 궁금증을 풀어준다.	초급	2005년 9월 28일 (수)

디자인 패턴과 DITA 맵 도메인 Darwin Information Typing Architecture (DITA)는 토픽의 매핑 기술을 제공한다.	초급	2005년 9월 28일 (수)

Working XML: 안전한 코딩 방법, Part 3 XML 애플리케이션에서 에러 핸들링을 디자인 및 구현할 때의 일반적인 실수를 피하는 방법을 배워보자.	초급	2005년 9월 27일 (화)

풍부한 컨텐트를 위해 XML 문서 프로파일 합성하기, Part 2: 복합 XML 문서 스키마 개발 패턴 핵심 스팩 스키마에서 복합 XML 스키마 프로파일을 구현해본다.	중급	2005년 9월 21일 (수)

Web services tip: xsd:choice의 대안으로 다형성 사용하기 XML 스키마 구조를 최적화하고 사용자 친화적인 매핑을 구현한다.	초급	2005년 9월 20일 (화)

멋진 웹 사이트 개발하기(영문) 당신의 웹 사이트는 멋지고, 매끄럽고, 간단해야 한다. XHTML을 사용해 보자.	초급	2005년 9월 20일 (화)

AXIOM으로 XML 프로세싱 최대한 활용하기 AXis Object Model (AXIOM)은 Apache Axis 2용 XML 객체 모델로서 강력한 조합 기능을 제공하여 XML 프로세싱에 변혁을 가져왔다.	초급	2005년 9월 13일 (화)

풍부한 컨텐트를 위해 XML 문서 프로파일 합성하기, Part 1: XML Schema를 사용하는 확장성 대안 연구 이 글에서 XML Schema의 여러 확장 기능을 검토하여 Compound Document Format (CDF) 프로파일 구현 방식과 비교한다.	중급	2005년 9월 13일 (화)

Thinking XML: XML로서 WordNet 제공하기 XML 폼에서 WordNet 데이터베이스의 문법 정보를 추출한다.	초급	2005년 8월 30일 (화)

UTF-8으로 XML 문서 인코딩하기 UTF-8에서 문서를 생성하는 방법을 설명한다.	초급	2005년 8월 30일 (화)

The Eclipse Voice Tools Project Eclipse Voice Tools Project는 보이스 산업에 관련한 기업과 개인들을 모아 표준 기반의, 오픈 소스 보이스 개발 툴을 만들기 위한 새로운 시도이다. 하지만 이 프로젝트 툴을 확장하거나 기여하고 싶을 때는 어떻게 하겠는가? 이 글에서 Voice Tool Project 환경을 설정 및 커스터마이징 하는 방법을 설명한다. 새로운 기능을 추가하는 과정도 설명한다.	초급	2005년 8월 23일 (화)

교육 콘텐츠용 XML 기반의 정보 아키텍쳐, Part 1: DITA 전문화 디자인 토픽 기반의 DITA XML이 싱글 소스 XML 교육 콘텐트용 정보 아키텍쳐를 개발하는 토대를 제공할 수 있을까? Part 1에서는 교육용 콘텐트 모델의 시작점 부터 짚어나간다.	초급	2005년 8월 5일 (금)

Atom 1.0 Syndication Format 개요 Atom 1.0 Syndication Format을 개괄 설명한다. 주로 다른 신디케이션 포맷과 비교했을때의 강점을 중심으로 설명한다.	초급	2005년 8월 2일 (화)

Xerces-C++로 XML Schemas 캐싱 및 직렬화하기 Xerces-C++ 을 사용하여 문서를 보다 효율적으로 검사할 수 있다.	초급	2005년 7월 29일 (금)

developerWorks XML 템플릿으로 글 작성하기 developerWorks XML 템플릿으로 글을 작성하는 방법을 설명한다.	초급	2005년 7월 29일 (금)

developerWorks XML 밸리데이션 툴 사용하기 Microsoft Windows 또는 리눅스에서 developerWorks XML 밸리데이션 툴을 얼마나 쉽게 사용할 수 있는지를 설명한다.	초급	2005년 7월 28일 (목)

Tip: xml-스타일시트 프로세싱 명령어 다중 xml 스타일시트 프로세싱 명령어를 문서의 프로로그에 삽입하여 다른 사용자들에게는 다르게 보일 수 있도록 한다.	초급	2005년 7월 22일 (금)

모델 중심의 합성 문서 개발 Eclipse Modeling Framework과 Ecore로 합성 XML 문서를 구현한다.	중급	2005년 7월 22일 (금)

XML 네임스페이스 없애기? Parand Darugar가 XML 네임스페이스를 덜 사용하거나 피해야 하는 이유를 설명한다.	초급	2005년 7월 18일 (월)

Thinking XML: 문법 투명성을 위한 스키마 주석 정식 주석을 사용하여 문서작성 및 문법 투명성을 향상시킨다.	초급	2005년 7월 14일 (목)

Working XML: 안전한 코딩법, Part 1 Benoit가 그의 프로젝트 노트를 들춰 XML의 가장 일반적인 함정들을 짚어낸다. 이 글에서는 XML 제체의 위험요소들을 검토한다.	초급	2005년 7월 14일 (목)

Tip: Universal Feed Parser로 RSS 다루기 RSS는 XML(또는 XML/RDF) 표준 기반이다. 불행히도 유명한 RSS의 와일드 웨스트 커뮤니티는 이율 배반적인 요소들을 갖고 있다. Mark Pilgrim의 Universal Feed Parser는 엉망으로 만들어진 피드 조차도 파싱할 수 있는 대단한 툴이다. 이 글에서 이 파서를 사용하여 RSS에서 피드 데이터를 추출하는 방법을 설명한다.	중급	2005년 7월 7일 (목)

Working XML: 안전한 코딩법, Part 2 XML 문서를 조작할 수 있는 디자인 기술을 배우고 XML 프로세싱을 애플리케이션에 통합하는 최상의 방법을 배운다.	초급	2005년 7월 7일 (목)

Xquery의 미신과 오해 XQuery로 XML로 작동하는 서비스 구현에 필요한 코드를 줄일 수 있다고 소프트웨어 아키텍트와 개발자들은 믿고있다. XQuery가 무엇이든 할 수 있다고 생각한다면 오해이다. 이 글에서 XQuery의 미신과 오해들을 벗겨낸다.	초급	2005년 7월 7일 (목)

Tip: XSLT에서 순환을 이용한 루프 XSLT는 Haskell 또는 Scheme 같은 함수형 프로그래밍 언어이다. C나 Fortran 과는 다르다. 따라서 루프와 변수들이 없다.	초급	2005년 6월 29일 (수)

XJ로 XML 프로세싱을 간단히 XML, XPath, XML Schema를 지원하는 자바를 확장하여 작성이 쉽고, 강력하며, 효율적인 XML 프로세싱을 만들어 본다.	초급	2005년 6월 28일 (화)

XML 데이터 관리하기: eXist -- 오픈 소스 원시 XML 데이터베이스 XML이 대중화되면서 사용자들은 XML 문서의 관리의 필요성을 느낀다.	초급	2005년 6월 27일 (월)

JAXP의 모든 것, Part 1 Java API for XML Processing (JAXP)을 사용하면 다른 API를 사용하는 XML을 유효성 검사, 파싱, 변형할 수 있다. JAXP는 사용하기 쉽고 벤더 중립적이다. 이 글에서, API의 파싱과 밸리데이션 기능을 활용하는 방법을 설명한다. Part 2에서는 JAXP를 사용한 XSL 변형을 다루도록 하겠다.	초급	2005년 6월 25일 (토)

URI, URL, URN 정보 관리 분야에서, 영속성과 가용성 부분은 언제나 긴장해야 한다. 이러한 긴장의 결과로 Uniform Resource Names (URNs)와 Uniform Resource Locators (URLs)가 구별되기에 이르렀다.	초급	2005년 6월 21일 (화)

XMLStarlet 시작하기 XMLStarlet 명령행 유틸리티를 사용하여 XML을 포매팅, 변형, 픽스, 편집하는 방법을 배워보자.	초급	2005년 6월 10일 (금)

XML data 관리하기: 원시 XML 데이터베이스 원시 XML 데이터베이스의 특성을 알아보고 어떤 툴을 사용할 수 있을 것인지를 생각해보자.	초급	2005년 6월 6일 (월)

웹 서비스 프로그래밍 팁과 트릭: J2EE와 .NET 간 상호운용성 향상, Part 1 웹 서비스들을 한데 묶어 조직간 비즈니스 프로세스를 만들기 위해서는 모든 파트너들이 같은 표준 모델에 대해 프로그램을 짜야 하고 상용(proprietary) 구현을 노출하지 않아야 한다. 상호 운용성을 향상시키기 위해 프로토콜을 표준화하려는 벤더들간 노력은 큰 발전을 이루었다. 하지만 웹 서비스들이 완벽히 상호 작동할 수 있도록 한다는 궁극적 목적은 여전히 중요한 문제이자 논쟁의 주제이다. 플랫폼들 간의 웹서비스 통합이 직면한 일반적인 상호 운용성 문제들의 근원을 파악하고 .NET과 J2EE 간 인터랙션 스타일, 기본적인 데이터 유형과 구조, 네임스페이스 문제들을 함께 분석한다. Wangming Ye는 문제를 피하는데 사용하여 성공적인 통합을 이끌 수 있도록 하는 사용법을 제공한다. 첫 번째 시리즈에서는 WSDL 디자인의 중요성을 중점적으로 설명하고 웹 서비스 상호운용성에 있어서 전통적인 RPC/encoded 스타일의 장단점을 분석한다.	고급	2004년 12월 21일 (화)

자바 애플릿으로 원격 웹 서비스에 접근하기 애플릿은 사용자의 시스템에 어떤 영향도 미칠 수 없도록 "모래상자"에서 실행되도록 설계되었다. 따라서 애플릿의 보안은 서버 기반의 애플리케이션 보다 더 치밀하다. 예를 들면, 자바 애플리케이션은 또 다른 서버로 네트워크 연결을 하여 웹 서비스 응답을 요청할 수 있다. 애플릿 역시 이럴 수 있지만 이는 원래 호스팅된 서버에만 해당된다. 그런데, 임의의 웹 요청을 할 수 있는 애플릿이 필요할 때가 있다.	중급	2004년 10월 14일 (목)

데이터 바인딩: 데이터 바인딩을 사용하는 이유? JaxMe에 대한 논의를 잠시 접어두고, 데이터 바인딩을 사용하는 이유를, 또는 사용하지 않는 이유를 연구한다. 데이터 바인딩이 적절할 때를 검토하고 프로그래밍 예제를 선보인다. "XML and Java technology" 디스커션 포럼에서 저자 및 독자들과 의견을 공유하기 바란다. (이 글의 상단과 하단의 Discuss를 클릭하면 포럼에 참가할 수 있다.)	중급	2004년 9월 30일 (목)

Tip: XForms 인스턴스의 일부를 웹 서비스로 보내기 XML 문서를 쉽게 주고 받을 수 있기 때문에 XForms 폼은 웹 서비스 클라이언트로서 편리하다. 하지만 전체 데이터 인스턴스를 반드시 보내야 하는 것이 아니라면? 이 글에서는 SOAP 메시지를 다른 데이터들과 함께 포함하는 인스턴스를 구현하는 방법과 제출 시 SOAP 메시지만 보내는 방법을 설명한다.	중급	2004년 8월 13일 (금)

웹 서비스 프로그래밍 팁과 트릭: WSDL 파일 반입 Web Services Description Language (WSDL) 파일에서 발견된 두 가지 유형의 반입(import) 문장의 뉘앙스를 설명한다.	중급	2004년 7월 9일 (금)

Tip: XForms를 이용한 웹 서비스 송수신 XForms의 큰 강점 중 하나는 XForms 클라이언트가 데이터를 XML로서 보내고 받을 수 있다는 점이다. 이 기능은 웹 서비스 분야에 특히 유용하게 쓰일 수 있다. 이 글에서 XForms 브라우저를 웹 서비스 클라이언트로서 사용하면서 SOAP 요청을 보내고 결과를 브라우저에 직접 디스플레이하는 방법을 설명하겠다.	중급	2004년 6월 24일 (목)

Tip:XML을 사용하여 SMS 메시지 보내기 많은 개발자들은 웹 서비스를 한 장소에서 다른 장소로 정보를 쉽게 옮길 수 있는 수단으로 보는 경향이 있다. 하지만 웹 서비스가 전체 애플리케이션에 필수적으로 작용하는지 깨달을 필요가 있다. XML을 Short Message Service (SMS)에 사용하는 방법을 설명한다.	초급	2004년 6월 7일 (월)

경로 컴파일과 테스트 자동화 (한글) SAX ContentHandler 컴파일러인 HC에 대한 작업이 계속되고 있다. 이번 달에 우리의 컬럼니스트는 컴파일 알고리즘을 설명하며, 또한 JUnit로 테스트를 자동화하는 사항도 다룬다.	초급	2004년 4월 5일 (월)

UML의 시퀀스 다이어그램 본 기사에서는 UML 시퀀스 다이어그램에 대한 자세한 소개와 UML 2.0 스펙에 포함된 몇가지 새로운 표기법을 소개한다.	초급	2004년 2월 16일 (월)

Tip: 웹 서비스에 파일 전달하기 바이너리 데이터(일반적으로 파일)를 웹 서비스에 전달하는 다양한 솔루션을 설명한다.	중급	2004년 2월 13일 (금)

Tip: 애플리케이션간 통신에 XML을 직접 사용하는 방법 SOAP 기술은 일반적으로 HTTP를 통해 XML을 교환하는 것이지만 반론도 있다. 논의의 대부분이 애플리케이션간 통신에 XML을 직접 사용하는 방법에 대한 것이다.	중급	2004년 1월 15일 (목)

UML의 기초: Unified Modeling Language 소개 이 글은 UML에 대한 일반적인 개요이다. 이 글은 2003년 5월, The Rational Edge에서 처음 발표되었다.	초급	2003년 11월 25일 (화)

XML and Java technologies: 데이터 바인딩, Part 2: 성능 엔터프라이즈 자바 전문가 Dennis Sosnoski는 자바의 XML 데이터 바인딩에 대해서 여러 프레임웍의 스피드와 메모리 사용을 시험한다. 코드 생성 접근방식, Castor mapped binding 접근방식 등이 이 실험에 포함된다. 자바 애플리케이션에 XML을 사용하고 있다면 반드시 이 데이터 바인딩 접근방식을 알아야한다.	중급	2003년 1월 28일 (화)

자바 프로그래밍으로 온라인 XML 데이터 검색하기 인터넷에 정보를 퍼블리싱하는 것이 보편화 되어 가면서 이러한 정보를 발견하고 요청하는 것 또한 자연스러운 일이 되었다. 이 글은 자바 프로그래밍을 사용하여 웹 기반 XML 데이터를 얻고 데이터를 파싱하여 필요한 엘리먼트와 속성들을 필터링하고 요청된 정보를 이용하여 작업을 수행하는 방법을 설명한다. 이 글은 2002년 8월 IBM developerWorks 저널에 기재되었다.	초급	2002년 9월 3일 (화)

Schema Infoset Model로 XML 스키마 분석하기 스키마(Schema)가 복잡해지면 스키마를 조작할 툴에 대한 필요도 많아지게 된다. 새로운 Schema Infoset Model은 스키마 자체의 완벽한 모델링 뿐만 아니라 구체적인 구현과 스키마 또는 스키마 세트에서의 추상 관계를 보여준다. 이 글에서는 스키마 모델을 쉽게 요청할 수 있는 라이브러리를 설명한다. 모든 문제를 해결하도록 스키마를 업데이트 할 수 있는 방법도 제시한다.	중급	2002년 6월 4일 (화)

WSDL로 웹 서비스 전개하기, Part 2: Simple Object Access Protocol (SOAP) Simple Object Access Protocol (SOAP)은 원격 객체로의 액세스를 규정한다. 원격 객체들의 예제는 간단하거나 Enterprise JavaBeans components와 COM/COM+ 객체들이다. 이러한 객체들은 다른 엔터프라이즈 내부에 존재하고 인터넷의 어딘가에 존재하고 있다. SOAP 통신은 인터넷을 통해 작동하고 다른 엔터프라이즈 사이에서 정보를 교환하는 메커니즘이다. 이 글에서, Bial은 SOAP을 자세하게 다룬다. 객체들이 SOAP을 사용하여 기능을 나타내는 방법, SOAP 객체를 호출하는 방법, SOAP 인식 애플리케이션 사이에 정보를 교환하는 방법을 설명한다.	초급	2002년 4월 30일 (화)

SOAP과 RDF 이 글을 통해 RDF 모델에서 정보를 교환하는데 SOAP이 사용될 수 있는 방법들이 검토된다. RDF 모델의 기본적인 데이터를 PC 교환이나 RDF/XML 직렬화 형식에서 모델의 부분들을 직접 전달하는데 필요한 SOAP 인코딩으로 변환하는방법을 연구한다.	고급	2002년 3월 5일 (화)

XML과 스크립트 언어 Binary Evolution의 Parand Tony Daruger는 XML 문서들을 조작하고 변형하기 위한 스크립트 언어 사용법에 대한 첫번째 튜토리얼에서, Perl과 함께 이러한 기법들을 사용하는 첫 단계를 소개한다. 이 글에는 XML을 HTML로 변형하는 방식이 소개되어 있으며, 그 뒤를 이어 거래 규칙을 평가하기 위해 Perl, XML 및 데이터베이스를 사용하는 주식거래 애플리케이션이 소개된다. 이 기법들은 Tcl과 Python을 비롯한 다른 스크립트 언어들을 사용해서도 적용할 수 있다.

'Web > ajax' 카테고리의 다른 글

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0)	2009.01.12
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0)	2009.01.12
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0)	2009.01.12
[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) (0)	2009.01.12

And

[IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글) [출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글)

| Web/ajax 2009. 1. 12. 02:02

Posted by bluebamus

난이도 : 중급

James Snell, Software Engineer, IBM　

2007 년 8 월 14 일

Asynchronous JavaScript and XML (Ajax) 디자인 패턴을 사용하여 웹 브라우저 기반 SOAP 웹 서비스 클라이언트 구현하기.

Asynchronous JavaScript and XML (Ajax) 디자인 패턴에 기반하여 크로스 플랫폼, JavaScript 기반 SOAP 웹 서비스 클라이언트를 구현하는 방법을 다룬 시리즈의 첫 번째 기술자료입니다.

GMail, Google Maps, Flickr, Odeo.com 같은 유명한 웹 애플리케이션 서비스에서 사용된다는 이유로 유명해진 Ajax는 웹 개발자에게 비동기식 XML 메시징을 사용함으로써 그들의 웹 애플리케이션의 가치와 기능을 늘릴 수 있는 방식을 제공하고 있다. 이 글에서 소개하는 Web Services JavaScript Library는 SOAP 기반 웹 서비스를 호출하는데 지원을 추가함으로써 Ajax 패턴에 힘을 실어주는 기본 메커니즘을 확장한 것이다.

브라우저의 웹 서비스

웹 브라우저 내에서 SOAP 웹 서비스를 호출하는 것은 복잡한 일이 될 수 있다. 대부분의 웹 브라우저가 각각 XML의 생성과 프로세싱을 약간 다른 방식으로 처리할 경우 특히 그렇다. 모든 브라우저들이 일관성 있게 구현하는 표준 API나 XML 프로세싱 기능들은 매우 적다.

브라우저 구현에서 일치하는 메커니즘 중 하나가 XMLHttpRequest API인데, 이것은 Ajax 디자인 패턴의 심장이다. Philip McCarthy가 developerWorks에 기고한 최신 글에서도, XMLHttpRequest는 비동기식 HTTP 요청들을 수행하는데 사용할 수 있는 JavaScript 객체이다. 이 글에서는 XMLHttpRequest 객체가 Ajax 디자인(참고자료)을 실행하는 방법을 이해하는데 도움이 되는 시퀀스 다이어그램(그림 1) 도 소개한다.

그림 1. Philip McCarthy의 Ajax Roundtrip 시퀀스 다이어그램

이 다이어그램에서, XMLHttpRequest 객체가 어떻게 작동하는지 정확히 볼 수 있다. 웹 브라우저 내에서 실행되는 일부 JavaScript 조각들은 XMLHttpRequest 인스턴스와 비동기식 호출로서 작동하는 함수를 만들어 낸다. 스크립트는 XMLHttpRequest 객체를 사용하여 서버에 대해 HTTP 연산을 수행한다. 응답을 받으면, 콜백 함수가 호출된다. 콜백 함수 내에서, 리턴된 데이터가 처리될 수 있다. 데이터가 XML이라면, XMLHttpRequest 객체는 브라우저의 XML 프로세싱 방식을 사용하여 그 데이터를 자동으로 파싱한다.

안타깝게도, XMLHttpRequest 객체는 Ajax 방식이 실행되는데 어려움을 겪는 곳에서 XML을 자동으로 파싱한다. 예를 들어, 필자가 요청하는 데이터가 다른 많은 XML Namespaces에서 온 엘리먼트를 포함하고 있는 SOAP Envelope이고, 필자는 yetAnotherElement에서 attr 애트리뷰트의 값을 얻어야 하는 경우를 생각해 보자. (Listing 1.)

Listing 1. 다중 네임스페이스를 가진 SOAP Envelope

                <s:Envelope   xmlns:s="http://schemas.xmlsoap.org/soap/envelope/"   xmlns:xsd="http://www.w3.org/2001/XMLSchema"   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">  <s:Header/>  <s:Body>    <m:someElement xmlns:m="http://example">      <n:someOtherElement         xmlns:n="http://example"         xmlns:m="urn:example">        <m:yetAnotherElement           n:attr="abc"           xmlns:n="urn:foo"/>      </n:someOtherElement>    </m:someElement>  </s:Body></s:Envelope>

Mozilla와 Firefox 브라우저에서, attr 애트리뷰트의 값을 추출하는 것은 간단하다. (Listing 2)

Listing 2. Mozilla와 Firefox에서 attr 애트리뷰트를 가져오는 메소드는 Internet Explorer에서는 작동하지 않는다.

                var m = el.getElementsByTagNameNS(  'urn:example',  'yetAnotherElement')[0].    getAttributeNS(      'urn:foo',      'attr');alert(m); // displays 'abc'

보안

많은 보안상의 문제 때문에, 대부분의 웹 브라우저의 XMLHttpRequest 객체는 기본적으로 사용자가 보고 있는 웹 페이지와 같은 도메인에서 호스팅 되는 리소스와 서비스와 상호 작동하도록 제한된다. 예를 들어, 필자가 http://example.com/myapp/에 있는 페이지를 현재 방문하고 있다면, XMLHttpRequest는 example.com 도메인에 위치한 리소스에만 액세스 할 수 있다. 이러한 조치는 악성 애플리케이션 코드가 액세스 해서는 안될 정보에 액세스 하지 못하도록 하기 위함이다. 이 글에서 소개한 웹 서비스 클라이언트는 XMLHttpRequest에 기반하고 있기 때문에, 이러한 제약 사항은 여러분이 호출할 수 있는 웹 서비스에 동등하게 적용된다.

또 다른 도메인에 있는 웹 서비스에 액세스 해야 한다면, 다음과 같은 두 가지 솔루션을 사용할 수 있다.

JavaScript의 디지털 서명. JavaScript 스크립트를 디지털 서명함으로써, 웹 브라우저에게 이것이 악의적인 액티비티를 수행하지 않는다는 것으로 확인을 받고 XMLHttpRequest가 액세스 할 수 있는 데이터에 대한 제약 조건을 제거한다.
프록시 사용하기. 더 간단한 솔루션은 로딩된 페이지와 같은 도메인에 있는 프록시 리소스를 통해 XMLHttpRequest에서 모든 요청들을 전달하는 것이다. 이 프록시는 요청을 원격 위치에 전달하고 결과를 브라우저에 리턴한다. XMLHttpRequest 객체의 관점에서 볼 때, 인터랙션은 기존 보안 설정 내에서 발생한다.

안타깝게도, 이 코드는 Internet Explorer Version 6에서는 작동하지 않는다. 이 브라우저는 getElementsByTagNameNS 함수를 구현하지 않고, 사실 다소 도움이 안되는 방식인 XML 네임스페이스 접두사가 엘리먼트와 애트리뷰트 이름의 일부인 것처럼 취급하는 방식을 취하기 때문이다.

Internet Explorer의 XML 네임스페이스 지원 부족으로 SOAP 같이 네임스페이스 중심의 XML 포맷을 브라우저와 독립된 방식으로 처리하기가 더욱 어렵다. 결과에서 애트리뷰트의 값을 얻는 것 같은 간단한 일을 수행하기 위해서, 여러분은 기대한 작동이 여러 브라우저에서도 일관되도록 특별한 케이스 코드를 작성해야 한다. 다행히도, 이러한 특수 케이스 코드는 캡슐화 및 재사용 될 수 있다.

웹 브라우저 내에서 웹 서비스를 호출하고 SOAP 메시지들을 신뢰성 있게 처리하려면, 보안 문제를 이해해야 한다. ("보안" 참조) 또한, 기반 브라우저 XML 구현들의 불일치를 제거할 수 있는 JavaScript 스크립트 라이브러리를 작성하고(그림 2), 웹 서비스 데이터와 직접 작동할 수 있어야 한다.

그림 2. Web Services JavaScript Library를 사용하여 웹 브라우저 내에서 JavaScript로부터 웹 서비스 호출하기

그림 2의 Web Services JavaScript Library (ws.js)는 JavaScript 객체들과 유틸리티 함수들의 컬렉션으로서, SOAP 1.1 기반 웹 서비스를 지원한다. ws.js는 다음 객체들을 정의한다.

WS.Call: XMLHttpRequest를 래핑하는 웹 서비스 클라이언트
WS.QName: XML 수식명 구현
WS.Binder: 커스텀 XML 직렬화/비직렬화 베이스
WS.Handler: 요청/응답 핸들러 베이스
SOAP.Element: XML DOM을 래핑하는 기본 SOAP 엘리먼트
SOAP.Envelope: SOAP.Element를 확장하는 SOAP Envelope 객체
SOAP.Header: SOAP.Element를 확장하는 SOAP 헤더 객체
SOAP.Body: SOAP.Element를 확장하는 SOAP 바디 객체
XML: XML을 핸들링 하는 크로스 플랫폼 유틸리티 메소드

ws.js의 핵심에는 웹 서비스를 호출하는 메소드를 제공하는 WS.Call 객체가 있다. WS.Call은 기본적으로 XMLHttpRequest 객체와의 인터랙션과 SOAP 응답 프로세싱을 담당하고 있다.

WS.Call 객체는 다음과 같이 세 개의 메소드를 노출한다.

add_handler. Request/Response 핸들러를 프로세싱 체인에 추가한다. Handler 객체들은 웹 서비스 호출 전후에 호출되어 확장성 있는 사전 사후 호출 프로세싱을 발생시킨다.
invoke. 지정된 SOAP.Envelope 객체를 웹 서비스로 보내고 응답을 받으면 콜백을 호출한다. 리터럴 XML 인코딩을 사용하는 문서 스타일의 웹 서비스를 호출할 때 이 메소드를 사용한다.
invoke_rpc. RPC-Style 요청을 캡슐화 하여 SOAP.Envelope을 만들고 이것을 웹 서비스로 보내면서, 응답을 받을 때 콜백을 호출한다.

WS.Call 객체는 일반적으로 XMLHttpRequest 객체의 맨 위에 있는 씬(thin) 래퍼일 뿐이지만, 여러분의 삶을 편하게 해주는 많은 액션을 수행한다. 이 액션에는 SOAP 1.1 스팩에서 필요로 하는 SOAPAction HTTP 헤더를 설정하는 것이 포함된다.

위로

ws.js 사용하기

Web services JavaScript Library에서 제공된 API는 다소 단순하다.

SOAP.* 객체들 (SOAP.Element, SOAP.Envelope, SOAP.Header, SOAP.Body)은 SOAP Envelopes를 구현하고 읽는 방식을 제공하여(Listing 3), XML 문서 객체 모델을 실행하는 상세를 없앤다.

Listing 3. SOAP Envelope 구현하기

                var envelope = new SOAP.Envelope();var body = envelope.create_body();var el = body.create_child(new WS.QName('method','urn:foo'));el.create_child(new WS.QName('param','urn:foo')).set_value('bar');

Listing 4는 Listing 3의 코드에서 만들어진 SOAP Envelope이다.

Listing 4. SOAP Envelope 구현하기

                <Envelope xmlns="http://schemas.xmlsoap.org">  <Body>    <method xmlns="urn:foo">      <param>bar</param>    </method>  </Body></Envelope>

여러분이 만들고 있는 SOAP Envelope가 RPC-Style 요청을 대표하는 것이라면, SOAP.Body 엘리먼트는 set_rpc 메소드(Listing 5)를 제공한다. 이것은 연산 이름, 인풋 매개변수의 어레이, SOAP 인코딩 스타일 URI에 주어진 요청의 전체 바디를 구현한다.

Listing 5. RPC-Request Envelope 구현하기

                var envelope = new SOAP.Envelope();var body = envelope.create_body();body.set_rpc(  new WS.QName('param','urn:foo'),  new Array(    {name:'param',value:'bar'}  ), SOAP.NOENCODING);

각각의 매개변수는 다음과 같은 프로퍼티를 가진 JavaScript 객체 구조로서 전달된다.

name. 매개변수의 이름을 지정하는 스트링 또는 WS.QName 객체. 필수.
value. 매개변수의 값. 값이 단순한 데이터 유형(스트링 또는 정수)이 아니라면, WS.Binder가 지정된다. 이것은 해당 XML 구조로 값을 직렬화 할 수 있다.필수.
xsitype: 매개변수의 XML Schema Instance Type을 구분하는 WS.QName (예를 들어, xsi:type="int"라면, xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')이다.) 선택.
encodingstyle.: 이 매개변수에 의해 사용되는 SOAP Encoding Style을 구분하는 URI. 선택.
binder: 매개변수를 XML로 직렬화 할 수 있는 WS.Binder 구현. 선택

예를 들어, "abc"라는 이름을 가진 매개변수를 XML Namespace "urn:foo", "int"의 xsi:type, "3" 으로 지정하려면, 다음 코드를 사용한다: new Array({name:new WS.QName('abc','urn:foo'), value:3, xsitype:new WS.QName('int','http://www.w3.org/2000/10/XMLSchema')}).

서비스 요청을 위해 SOAP.Envelope을 구현하면, 그 SOAP.Envelope을 WS.Call 객체 invoke 메소드로 보내서 Envelope 내부에 인코딩 된 메소드를 호출한다: (new WS.Call(service_uri)).invoke(envelope, callback)

SOAP.Envelope을 직접 구현하는 것에 대한 대안으로서, WS.QName, 매개변수 어레이, 인코딩 스타일을 WS.Call 객체의 invoke_rpc 메소드로 전달할 수 있다. (Listing 6)

Listing 6. WS.Call 객체를 사용하여 웹 서비스 호출하기

                var call = new WS.Call(serviceURI); var nsuri = 'urn:foo';var qn_op = new WS.QName('method',nsuri);var qn_op_resp = new WS.QName('methodResponse',nsuri);    call.invoke_rpc(    qn_op,    new Array(      {name:'param',value:'bar'}    ),SOAP.NOENCODING,    function(call,envelope) {      // envelope is the response SOAP.Envelope      // the XML Text of the response is in arguments[2]    }  );

invoke 메소드 또는 invoke_rpc 메소드를 호출할 때, WS.Call 객체는 기반 XMLHttpRequest 객체를 만들고, SOAP Envelope를 포함하고 있는 XML 엘리먼트로 전달하고, 응답을 받아 파싱하며, 콜백 함수를 호출한다.

SOAP 메시지의 사전 및 사후 처리를 확장하기 위해, WS.Call 객체는 WS.Handler 객체의 컬렉션을 등록할 수 있다. (Listing 7) 이들은 호출 사이클 동안 모든 요청, 응답, 에러 시 호출된다. 새로운 핸들러가 WS.Handler JavaScript 객체를 확장함으로써 구현될 수 있다.

Listing 7. 요청/응답 핸들러 생성 및 등록하기

                var MyHandler = Class.create();MyHandler.prototype = (new WS.Handler()).extend({  on_request : function(envelope) {     // pre-request processing  },  on_response : function(call,envelope) {     // post-response, pre-callback processing  },  on_error : function(call,envelope) {  }});var call = new WS.Call(...);call.add_handler(new MyHandler());

핸들러들은 전달되는 SOAP Envelope에서 정보를 삽입 또는 추출하는 태스크에 가장 유용하다. 예를 들어, 적절한 Web Services Addressing 엘리먼트를 SOAP Envelope 헤더로 자동 삽입하는 것을 생각해 볼 수 있다. (Listing 8)

Listing 8. WS-Addressing Action 헤더를 요청에 추가하는 샘플 핸들러

                var WSAddressingHandler = Class.create();WSAddressingHandler.prototype = (new WS.Handler()).extend({  on_request : function(call,envelope) {  		    envelope.create_header().create_child(        new WS.QName('Action','http://ws-addressing','wsa')      ).set_value('http://www.example.com');  }});

WS.Binder 객체(Listing 9)는 SOAP.Element 객체의 커스텀 직렬화/비직렬화를 수행한다. WS.Binder 구현은 다음과 같은 두 개의 메소드를 제공해야 한다.

to_soap_element. JavaScript 객체를 SOAP.Element로 직렬화 한다. 전달되는 첫 번째 매개변수는 직렬화 되는 값이다. 두 번째 매개변수 값은 SOAP.Element로 직렬화 되어야 한다. 이 메소드는 어떤 값도 리턴하지 않는다.
to_value_object. SOAP.Element를 JavaScript 객체로 비직렬화 한다. 메소드는 비직렬화 된 값 객체를 리턴해야 한다.

Listing 9. WS.Binding 구현 샘플

                var MyBinding = Class.create();MyBinding.prototype = (new WS.Binding()).extend({  to_soap_element : function(value,element) {  		    ...  },  to_value_object : function(element) {    ...  }});

위로

예제

Web Services JavaScript Library의 기본 기능을 설명하는 샘플 객체를 설명했다. 이 데모에서 사용되는 웹 서비스(Listing 10)은 WebSphere Application Server에서 구현되고 간단한 Hello World 함수를 제공한다.

Listing 10. 간단한 자바 기반 Hello World 웹 서비스

                package example;public class HelloWorld {  public String sayHello(String name) {    return "Hello " + name;  }}

서비스를 WebSphere Application Server로 구현 및 전개한 후에, 서비스의 WSDL 디스크립션(Listing 11)은 Hello World 서비스를 호출하기 위해 전달해야 하는 SOAP 메시지를 정의한다.

Listing 11. HelloWorld.wsdl의 코드

                <wsdl:portType name="HelloWorld">  <wsdl:operation name="sayHello">    <wsdl:input       message="impl:sayHelloRequest"       name="sayHelloRequest"/>    <wsdl:output       message="impl:sayHelloResponse"       name="sayHelloResponse"/>  </wsdl:operation></wsdl:portType>

Web Services JavaScript Library를 사용하여, Hello World 서비스를 호출하는 메소드를 구현할 수 있다. (Listing 12)

Listing 12. WS.Call을 사용하여 Hello World 서비스 호출하기

                <html><head>...<script   type="text/javascript"   src="scripts/prototype.js"></script><script   type="text/javascript"   src="scripts/ws.js"></script><script type="text/javascript">function sayHello(name, container) {  var call = new WS.Call('/AjaxWS/services/HelloWorld');   var nsuri = 'http://example';  var qn_op = new WS.QName('sayHello',nsuri);  var qn_op_resp = new WS.QName('sayHelloResponse',nsuri);    call.invoke_rpc(    qn_op,    new Array(      {name:'name',value:name}    ),null,    function(call,envelope) {      var ret =         envelope.get_body().get_all_children()[0].          get_all_children()[0].get_value();      container.innerHTML = ret;      $('soap').innerHTML = arguments[2].escapeHTML();    }  );}</script></head>...

웹 애플리케이션 어디에서나 sayHello 함수를 호출함으로써 Hello World 서비스를 호출할 수 있다. (Listing 13)

Listing 13. sayHello 함수 호출하기

                <body><input name="name" id="name" /><input value="Invoke the Web Service"       type="button"        onclick="sayHello($('name').value,$('result'))" /><div id="container">Result:<div id="result"></div><div id="soap"></div></div></body>

성공적인 호출은 Figure 3과 같은 결과를 만들어 낸다. 이 예제를 Mozilla, Firefox, Internet Explorer에서 실행하면 모두 같은 결과가 나온다.

그림 3. Firefox에서의 Hello World 예제

위로

다음 단계

Web Services JavaScript Library는 기본 SOAP 웹 서비스를 웹 애플리케이션에 통합하는데 사용될 수 있다. 다음 글에서는 라이브러리를 사용하여 WS-Resource Framework 스팩군에 기반한 고급 웹 서비스를 호출하는 방법과 웹 서비스 기능이 웹 애플리케이션으로 확장 및 통합되는 방법을 연구할 것이다.

위로

다운로드 하십시오

설명	이름	크기	다운로드 방식
프로젝트 샘플	ws-wsajaxcode.zip	19 KB	HTTP


	다운로드 방식에 대한 정보

참고자료

교육

Ajax로 SOAP 웹 서비스 호출하기 -- 이 시리즈의 모든 Part 보기(영문).
동적 자바 애플리케이션 구현 (한글) -- Philip McCarthy의 자바 개발자를 위한 Ajax 소개 (한국 developerWorks, 2005년 9월).
JavaScript 프레임웍
XMLHttpRequest API
Document Object Model을 활용하여 고급 웹 애플리케이션 만들기 -- Microsoft Internet Explorer 6.0을 사용한 XML 문서 객체 모델 (developerWorks, 2004년 2월).
모질라 웹사이트

제품 및 기술 얻기

WebSphere Application Server: developerWorks에서 무료 시험판 다운로드.

토론

developerWorks 블로그: developerWorks 커뮤니티 참여하기.

필자소개


		James Snell은 IBM의 WebAhead 개발 랩의 연구원이고, 여기에서 IBM 내부에서 사용할 소프트웨어 기술과 표준에 대한 프로토타입 개발을 수행하고 있다. 그의 관심 분야는 Atom, AJAX, REST, Open Source, 퍼스널 퍼블리싱 시스템, semantic web, situational application 등 광범위한 신 기술까지 포괄하고 있다. Apache Abdera의 활동적인 커미터이며, 최근에는 Atom Syndication Format과 Atom Publishing Protocol 표준의 구현 작업을 하고 있다. http://www.ibm.com/developerworks/blogs/dw_blog.jspa?blog=351.

원문 출처 : http://www.ibm.com/developerworks/kr/library/ws-wsajax/

[출처] [IBM 디벨로퍼웍스] Ajax로 SOAP 웹 서비스 호출하기, Part 1: 웹 서비스 클라이언트 구현하기 (한글)|작성자 마검린

'Web > ajax' 카테고리의 다른 글

Ajax와 XML: 다섯 개의 추천할 만한 Ajax 위젯 (한글) (0)	2009.01.12
ASP.NET AJAX를 지원하지 않는 웹호스팅에 AJAX 사용하기 닷넷 (0)	2009.01.12
Ajax와 XML: 최고의 Ajax 배우기 (한글) (0)	2009.01.12
php java ajax 웹프로그래밍 기술서 출처 (0)	2009.01.12

And

| 1 |

대학원부터 시작한 첫번째 블로그

Article Category

Notice

Recent Article

Recent Comment

Recent Trackback

'Web/ajax'에 해당되는 글 5건