 | |
|
난이도 : 중급 Mark Pruett, 시스템 아키텍트, Dominion
옮긴이: 박재호 이해영 dwkorea@kr.ibm.com
2008 년 5 월 06 일 어떤 프로그래밍 문제든 올바르게 해결하는 방법은 여러 가지가 있습니다. 이 연재물에서는 네 가지 방법으로 Ajax(Asynchronous JavaScript + XML) 날씨 뱃지(badge)를 만들어 봅니다. 여기서 뱃지란 웹 페이지에 내장하기 쉽고 재사용하기도 쉬운 작은 위젯을 가리킵니다. 첫 번째 기사에서는 네 가지 방법을 개략적으로 설명한 후 첫 번째 방법인 DOM 트리 탐색 기법을 자세히 살펴봅니다.
그리스 철학자인 아리스토텔레스는 이렇게 말했다. "실패하는 방법은 많다... 그러나 성공하는 방법은 하나다." 확실히 그 당시 아리스토텔레스는 컴퓨터 프로그래머가 아니었다.
|
자주 사용하는 약어
- DOM: Document Object Model
- HTML: Hypertext Markup Language
- HTTP: Hypertext Transfer Protocol
- RSS: Rich Site Summary
- XML: Extensible Markup Language
- XSLT: Extensible Stylesheet Language Transformation
|
|
아리스토텔레스가 한 말 중 첫 번째 절반은 프로그래밍에도 통한다. 말 그대로, 프로그래밍에서도 "실패하는 방법은 많다." 그러나 나머지 절반은 진실과 거리가 멀다.
이번 연재물에서는 같은 문제를 네 가지 방법으로 공략한다. 어느 방법도 딱히 그르지 않으며, 방법마다 나름대로 장단점이 있다. 문제 자체가 복잡하지 않으므로 해결책도 그리 복잡하지 않다. 그렇지만 아무리 간단한 해결책이라도 한 장점을 취하면 다른 장점을 잃기 마련이라는 사실이 여기서도 여실히 드러난다.
문제 정의: 재사용 가능한 Ajax 날씨 뱃지 만들기
우리가 해결하려는 문제를 정의하면 다음과 같다.
미국립 기상청(National Weather Service, NWS)에서 현재 관측 정보를 읽어들이는 Ajax 라이브러리를 구현한다. 그런 다음, 관측 정보 일부를 추출하여 HTML로 변환해 날씨 뱃지를 만든다.
|
뱃지(Badge)란?
뱃지(Badge) 혹은 위젯(Widget)이란 웹 사이트에 담는 작은 자바스크립트 프로그램으로, (흔히 외부에서 가져온) 특수 정보를 페이지 내 작은 영역에다 표시한다. 뉴스 피드, 달력, 시계 등 뱃지 작성자가 원하는 정보는 무엇이나 표시할 수 있다.
|
|
지역 날씨 정보를 자기네 웹 페이지에 표시하고픈 웹 사이트는 많다. 그런데 날씨를 표시하려면 최신 날씨 정보를 얻어야 한다. 어디서 어떻게 얻을까?
미국 내에서는 미국립 기상청이 어마어마한 양의 날씨 정보를 제공한다. 여기에는 수백 개에 이르는 미국 도시의 현재 날씨 정보도 들어 있다. 국립 기상청은 이러한 날씨 정보를 RSS 형식이나 XML 형식으로 제공한다.
Ajax에서 X는 XML을 뜻한다. 따라서 미국립 기상청이 제공하는 자료는 Ajax로 처리하기에 적합해 보인다.
접근 방법 네 가지
이 연재에서는 네 가지 방법으로 Ajax 날씨 뱃지를 구현한다. Ajax 날씨 뱃지는 미국립 기상청이 관측하는 도시나 지역의 날씨 정보를 표시하는 작은 위젯이다. 설계 목표는 다음과 같다.
여기서는 네 가지 접근 방법을 살펴보면서 각 방법에 따르는 장단점을 설명한다. 어느 방법도 옳거나 그르지 않다.
표 1에서 보듯이, 같은 문제를 해결하지만 내부적인 구현 방식은 크게 차이가 난다.
표 1. 날씨 뱃지 라이브러리 버전 네 가지
| 접근방법 | 설명 |
|---|
| 1: DOM 트리 탐색 | 서버에 있는 간단한 웹 프록시가 미국립 기상청에서 정보를 가져와 브라우저로 전송한다. 브라우저에서는 자바스크립트 해석기가 전송 받은 responseXML DOM 트리로부터 필요한 정보를 추출하여 HTML로 변환한 후 페이지 내 DIV 태그 안에 삽입한다. | | 2: 서버쪽 XSLT | 서버쪽 스크립트가 미국립 기상청 서버에서 정보를 가져온 후 XSLT를 사용해 XML을 HTML로 변환한다. 그런 다음, HTML 코드를 브라우저로 전송한다. 브라우저는 전송 받은 HTML 코드를 DIV 태그 안에 삽입한다. | | 3: 클라이언트쪽 XSLT | 접근 방법 1과 동일하게, 간단한 웹 프록시를 사용해 XML 정보를 브라우저로 전송한다. 접근 방법 1과 다르게, 클라이언트쪽 XSLT가 XML을 HTML로 변환하여 DIV 태그 안에 삽입한다. | | 4: JSON과 동적 스크립트 태그 | (Yahoo! Pipes와 같은) 외부 서비스가 미국립 기상청 정보를 XML에서 JSON(JavaScript Object Notation)으로 변환한다. 날씨 뱃지 라이브러리는 JSON 특성과 자바스크립트를 활용해 변환된 XML을 브라우저로 가져온다. 프록시를 사용하지 않는다. |
공통 요소
재사용 가능한 Ajax 날씨 뱃지를 만들기 위해 위에서 설명한 네 가지 방법은 다음 요소를 공유한다.
- 파이프라인 방식
- 간단한 Ajax 라이브러리
-
weather_badge() 자바스크립트 함수
- 미국립 기상청 날씨 정보
파이프라인 방식
파이프라인이라는 개념은 초창기 유닉스(UNIX®) 시절로 거슬러 올라간다. 파이프라인 모델에서 파이프라인으로 들어오는 자료는 일련의 필터를 거친다. 각 필터는 자료를 나름대로 변환한다. 변환을 거친 자료는 다음 파이프라인으로 이동하여 모든 변환이 끝날 때까지 계속해서 일련의 변환을 거친다. 파이프라인 끝에는 사용자 터미널이나 다른 파일이나 다른 프로그램이 존재한다.
이러한 파이프라인 개념은 웹에서 많이 사용하는 XML 자료와 서비스를 처리하기에도 적합하다. 웹에서 XML 자료를 가져온 후 파이프라인을 통과시켜 일련의 변환을 적용하는 방법으로 원하는 정보를 원하는 형식으로 추출할 수 있다.
Ajax 프로그램에 파이프라인 개념을 적용할 경우 파이프라인은 네트워크 상에 있는 여러 컴퓨터에 걸치게 된다(명령행에서 파이프와 필터를 사용하는 유닉스와 차이가 있다). XML 자료는 특정 웹 서버에서 출발해, 다른 도메인에 있는 서버로 넘겨졌다가, 최종 목적지인 사용자 웹 브라우저에 도달한다.
간단한 Ajax 라이브러리
이 기사에서는 Ajax 개념을 구체적으로 설명하지 않는다. 자세한 내용은 참고자료를 살펴본다.
다양한 독자를 염두에 두었기에 앞으로 살펴볼 예제는 아주 간단한 Ajax 라이브러리를 사용한다. 소스 코드는 Listing 1과 같다. 이 라이브러리는 XMLHttpRequest 객체를 둘러싸는 껍데기(wrapper) 함수 집합에 불과하다. 몇몇 주요 브라우저가 XMLHttpRequest를 처리할 때 드러나는 차이점을 없앨 목적이다.
Listing 1. ajax-simple.js—우리 예제에서 사용하는 간단한 Ajax/XMLHttpRequest 라이브러리
function Ajax (url, parms, method, callback) {
this.url = url;
this.parms = parms;
this.method = method;
this.callback = callback;
this.async = true;
this.create ();
this.req.onreadystatechange = this.dispatch (this);
}
Ajax.prototype.dispatch = function (ajax) {
function funcRef()
{
if (ajax.req.readyState == 4) {
if (ajax.callback) {
ajax.callback (ajax.req);
}
}
}
return funcRef;
}
Ajax.prototype.request = function () {
if (this.method == "POST") {
this.req.open("POST", this.url, this.async);
this.req.send (this.parms);
}
else if (this.method == "GET") {
this.req.open("GET", this.url + this.parms, this.async);
this.req.send (null);
}
}
Ajax.prototype.setAsync = function (async) {
this.async = async;
}
Ajax.prototype.create = function () {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
this.req = xmlhttp;
}
|
weather_badge() 자바스크립트 함수
웹 페이지에 날씨 뱃지를 추가하는 인터페이스는 앞으로 살펴볼 네 가지 방법 모두 동일하다. 즉, 네 가지 방법 모두가 weather_badge()라는 자바스크립트 함수를 사용한다. 이 함수는 매개변수 두 개를 받는다. 하나는 도시나 지역을 가리키는 NWS 스테이션 ID이고, 다른 하나는 화면 표시를 위해 날씨 뱃지를 삽입할 HTML DIV ID다. 그림 1은 Ajax 날씨 뱃지 예제다.
그림 1. Ajax 날씨 뱃지
날씨 뱃지는 HTML 코드이므로 CSS(Cascading Style Sheet)를 사용해 글꼴이나 배경색이나 테두리 등 외양을 조정할 수 있다.
Listing 2는 웹 페이지에 날씨 뱃지를 추가한 모습이다. 여기서 weather_badge() 함수는 자바스크립트 onLoad 이벤트 핸들러에서 호출한다.
Listing 2. 웹 페이지에 날씨 뱃지 넣기
<html>
<head>
<title>Apache Proxy Example</title>
<link rel="stylesheet" type="text/css" href="weather.css" />
<script language="Javascript" src="ajax-simple.js"></script>
<script language="Javascript" src="weather_badge_apache_proxy.js">
</script>
<script>
function init () {
weather_badge ("KAKQ", "target1");
}
</script>
</head>
<body onload="init();">
<h3>Apache Proxy Example</h3>
<div class="wbadge" id="target1">
Loading...
</div>
</body>
</html>
|
미국립 기상청 날씨 정보
미국립 기상청(NWS) 사이트는 스테이션 ID로 도시나 지역을 구분하여 날씨 정보를 제공한다. 스테이션 ID는 네 문자로 이루어진 고유 코드다.
현재 관측 정보를 가져올 때 사용할 기본 URL은 다음과 같다.
http://www.nws.noaa.gov/data/current_obs/
|
위 기본 URL에 스테이션 ID 네 자를 조합하여 원하는 지역의 날씨 정보를 가져온다. 예를 들어, 버지니아 주 리치몬드 시는 스테이션 ID가 KRIC이다. 따라서 리치몬드 시 날씨 정보는 다음 URL로 가져온다.
http://www.nws.noaa.gov/data/cuurent_obs/KRIC.xml
|
Listing 3에서 보듯이, 현재 날씨 관측 정보는 간단한 XML 형식이다.
Listing 3. 미국립 기상청이 제공하는 버지니아 주 리치몬드 시 날씨 정보 XML
<current_observation version="1.0"
xsi:noNamespaceSchemaLocation=
"http://www.weather.gov/data/current_obs/current_observation.xsd">
<credit>NOAA's National Weather Service</credit>
<credit_URL>http://weather.gov/</credit_URL>
<image>
<url>http://weather.gov/images/xml_logo.gif</url>
<title>NOAA's National Weather Service</title>
<link>http://weather.gov</link>
</image>
<suggested_pickup>15 minutes after the hour</suggested_pickup>
<suggested_pickup_period>60</suggested_pickup_period>
<location>Richmond International Airport, VA</location>
<station_id>KRIC</station_id>
<latitude>37.51</latitude>
<longitude>-77.31</longitude>
<observation_time>
Last Updated on Dec 11, 12:54 pm EST
</observation_time>
<observation_time_rfc822>
Tue, 11 Dec 2007 12:54:00 -0500 EST
</observation_time_rfc822>
<weather>Overcast</weather>
<temperature_string>54 F (12 C)</temperature_string>
<temp_f>54</temp_f>
<temp_c>12</temp_c>
<relative_humidity>80</relative_humidity>
<wind_string>From the South at 5 MPH</wind_string>
<wind_dir>South</wind_dir>
<wind_degrees>180</wind_degrees>
<wind_mph>4.6</wind_mph>
<wind_gust_mph>NA</wind_gust_mph>
<pressure_string>30.31" (1026.7 mb)</pressure_string>
<pressure_mb>1026.7</pressure_mb>
<pressure_in>30.31</pressure_in>
<dewpoint_string>48 F (9 C)</dewpoint_string>
<dewpoint_f>48</dewpoint_f>
<dewpoint_c>9</dewpoint_c>
<heat_index_string>NA</heat_index_string>
<heat_index_f>NA</heat_index_f>
<heat_index_c>NA</heat_index_c>
<windchill_string>53 F (12 C)</windchill_string>
<windchill_f>53</windchill_f>
<windchill_c>12</windchill_c>
<visibility_mi>7.00</visibility_mi>
<icon_url_base>
http://weather.gov/weather/images/fcicons/
</icon_url_base>
<icon_url_name>ovc.jpg</icon_url_name>
<two_day_history_url>
http://www.weather.gov/data/obhistory/KRIC.html
</two_day_history_url>
<ob_url>http://www.nws.noaa.gov/data/METAR/KRIC.1.txt</ob_url>
<disclaimer_url>http://weather.gov/disclaimer.html</disclaimer_url>
<copyright_url>http://weather.gov/disclaimer.html</copyright_url>
<privacy_policy_url>http://weather.gov/notice.html</privacy_policy_url>
</current_observation>
|
위 XML 파일에서 날씨 뱃지가 필요로 하는 정보는 일부에 불과하다. 구체적으로는 location, weather, icon_url_base, icon_url_name, temperature_string, wind_string, relative_humidity, visibility_mi, observation_time 엘리먼트 값이 필요하다.
접근 방법 1. DOM 트리 탐색
첫 번째 방법은 XMLHttpRequest 객체가 지니는 기본 한계점을 공략한다. Ajax 프로그램에서 사용하는 XMLHttpRequest 객체는 같은 도메인으로만 요청이 가능한 문제가 있다.
구체적으로 설명하자면, 보안상 XMLHttpRequest 객체는 원래 웹 페이지를 가져온 동일 서버로만 요청을 보낼 수 있다. 그러나 내가 미국립 기상청에서 일하지 않는 한 우리 웹 서버는 미국립 기상청 도메인(www.nws.noaa.gov) 밖에 있다. 그림 2는 날씨 뱃지를 만들기 위한 첫 번째 접근 방법이 사용하는 파이프라인이다.
그림 2. 접근 방법 1을 위한 자료 파이프라인
내게 우리 웹 서버 구성을 바꿀 권한이 있다면 해결책은 간단하다. 웹 프록시를 사용하면 된다.
웹 프록시는 한 서버로 보낸 요청을 다른 서버로 전달하는 방법이다. 일단 내 Ajax 프로그램은 우리 서버로 요청을 보낸다. 그러면 우리 서버는 이를 NWS 서버로 전달한다. Ajax 프로그램이 같은 도메인에 속한 우리 서버와 통신하므로 (우리 서버는 Ajax 프로그램 모르게 요청을 NWS 서버로 전달하므로) 도메인 제한 문제를 교묘하게 회피한다.
아파치 웹 서버에서 프록시는 ProxyPass 규칙으로 구현한다. 규칙을 정의하는 방법은 간단하다.
ProxyPass our_directory their_url
|
첫 번째 옵션은 우리 서버에 존재하지 않는 위치를 참조한다. 두 번째 옵션은 원격 서버 URL이다. our_directory를 참조하는 요청이 들어올 때마다 아파치 서버는 이를 their_url로 전달한다. 요청자인 Ajax 프로그램은 이 사실을 결코 알지 못한다.
다음은 NWS 정보를 가져올 목적으로 우리 서버에 구현한 프록시 규칙이다.
ProxyPass /nws_currobs/ http://www.nws.noaa.gov/data/current_obs/
|
버지니아 주 리치몬드 날씨 정보를 가져오려면 Ajax 프로그램에서 다음 URL을 요청한다.
그러면 아파치 서버는 위 요청을 NWS로 전달한다.
http://www.nws.noaa.gov/data/current_obs/KRIC.xml
|
브라우저에서 XML 구문분석하기
서버가 XML 정보를 성공적으로 반환하면 Ajax 프로그램 내 responseXML 속성이 초기화된다. 이 responseXML 객체는 서버에서 가져온 XML 정보를 XMLDocument 형식의 DOM 트리로 구문분석해 저장한다. 서버에서 가져온 XML 정보가 유효하지 않거나, (브라우저에 따라) 헤더에 text/xml 혹은 application/xml HTTP 컨텐트 유형이 없으면, responseXML 속성은 생성되지 않는다. 이 경우 responseText 속성이 서버에서 가져온 텍스트를 그대로 포함한다.
이제 responseXML에서 DOM 트리를 탐색하여 XML 값을 추출한다. Listing 4는 서버에서 가져온 XML을 축약한 버전이다.
Listing 4. NWS 서버에서 가져온 XML 축약 버전
<current_observation version="1.0"
xsi:noNamespaceSchemaLocation=
"http://www.weather.gov/data/current_obs/current_observation.xsd">
<location>Richmond International Airport, VA</location>
<observation_time>
Last Updated on Dec 11, 12:54 pm EST
</observation_time>
<weather>Overcast</weather>
<temperature_string>54 F (12 C)</temperature_string>
<relative_humidity>80</relative_humidity>
<wind_string>From the South at 5 MPH</wind_string>
<visibility_mi>7.00</visibility_mi>
<icon_url_base>
http://weather.gov/weather/images/fcicons/
</icon_url_base>
<icon_url_name>ovc.jpg</icon_url_name>
</current_observation>
|
responseXML에서 wind_string 엘리먼트 값을 찾아보자. 먼저, responseXML 속성은 XMLDocument 유형이다. XMLDocument의 documentElement 속성은 XML DOM 트리에서 최상위 엘리먼트를 가리킨다. 이 사실을 검증하고자 프로그램에 alert() 함수를 추가했다.
alert ("tagName: " + req.responseXML.documentElement.tagName);
|
프로그램을 실행하면 alert() 함수는 다음 내용이 담긴 창을 띄운다.
tagName: current_observation
|
current_observation 아래 있는 엘리먼트를 찾으려면 getElementsByTagName()을 사용한다. 이 엘리먼트 메소드는 찾으려는 태그 이름을 인수로 받아서 이름이 일치하는 해당 자식 엘리먼트 전부를 배열로 반환한다. 다음은 wind_string 엘리먼트를 찾는 자바스크립트 코드다.
var elements = req.responseXML.documentElement.getElementsByTagName("wind_string");
|
NWS XML 문서에는 wind_string 엘리먼트가 하나뿐이다. 그러므로 내가 찾으려는 엘리먼트가 배열에서 첫 번째 엘리먼트라고 가정해도 무리가 없다. wind_string 엘리먼트 태그 내 실제 값은 다음과 같이 참조한다.
elements[0].firstChild.data
|
XML 문서 구조는 아주 단순한 반면, XML 문서에서 값 하나를 찾는 과정은 이렇듯 복잡하다. DOM 트리를 탐색하여 XML 정보를 추출하는 작업이 어렵고 번거롭게 여겨지는 이유가 여기에 있다. 위 단계를 모두 결합하여 한 줄로 구현하면 다음과 같다.
req.responseXML.documentElement.getElementsByTagName("wind_string")[0].firstChild.data
|
우리 프로그램에서는 간단한 자바스크립트 함수를 정의해서 코드 가독성을 높였다. Listing 5는 DOM 문서에서 값을 추출하는 자바스크립트 함수다.
Listing 5. DOM을 좀 더 쉽게 참조하는 함수
function get_element (doc_el, name, idx) {
var element = doc_el.getElementsByTagName (name);
return element[idx].firstChild.data;
}
|
위 함수를 사용하면 weather_badge() 코드가 좀 더 깔끔해진다. Listing 6을 참조한다.
Listing 6. 아파치 프록시를 사용해 XML 정보를 가져오는 weather_badge() 함수
function weather_badge (nws_id, div_name) {
var ajax = new Ajax
("/nws_currobs/" + nws_id + ".xml",
"",
"GET",
function (req) {
var doc_el = req.responseXML.documentElement;
// Ajax(XMLHttpRequest) 호출로 반환되는 XML 구조체에서 값을 인출
var location = get_element (doc_el, "location", 0);
var temperature_string = get_element (doc_el, "temperature_string", 0);
var weather = get_element (doc_el, "weather", 0);
var icon_url_base = get_element (doc_el, "icon_url_base", 0);
var icon_url_name = get_element (doc_el, "icon_url_name", 0);
var wind_string = get_element (doc_el, "wind_string", 0);
var relative_humidity = get_element (doc_el, "relative_humidity", 0);
var visibility_mi = get_element (doc_el, "visibility_mi", 0);
var observation_time = get_element (doc_el, "observation_time", 0);
var div = document.getElementById (div_name);
div.innerHTML =
"<center>\n"
+ "<b>" + location + "</b><br>\n"
+ weather + "<br>"
+ "<img border='0' src='"
+ icon_url_base + icon_url_name + "'/><br>\n"
+ temperature_string + "<br>\n"
+ "Wind: " + wind_string + "<br>\n"
+ "Humidity: " + relative_humidity + "<br>\n"
+ "Visibility: " + visibility_mi + "<br>\n"
+ "<br><span style='font-size: 0.8em; font-weight: bold;'>"
+ observation_time + "</span><br>\n"
+ "</center>\n";
}
);
ajax.request ();
}
|
위 코드는 Ajax 객체를 생성한다. 앞서도 언급했지만, Ajax 객체는 XMLHttpRequest 객체를 둘러싸는 껍데기(Wrapper) 객체다. Ajax 생성자는 매개변수 네 개를 받는데, 각각은 표 2에서 설명한다.
표 2. Ajax 생성자가 받는 매개변수 네 개
| 매개변수 | 설명 |
|---|
| url | 원격 URL — 여기서는 미국립 기상청 XML 파일이다. 우리 서버가 프록시 서버 역할을 수행한다. | | parms | URL 매개변수 문자열 — 여기서는 서버쪽 스크립트가 아니라 정적 XML 문서를 요청하므로 매개변수가 필요없다. | | method | HTTP 요청 방식 — 여기서는 HTTP GET 방식으로 요청한다. | | callback | XML 문서가 브라우저로 반환된 후 Ajax 프로그램이 호출할 함수 — 여기서는 XML에서 값을 추출한 후 HTML 태그와 조합하여 HTML 코드를 생성한다. 이렇게 생성한 HTML 코드가 날씨 뱃지다. |
우리 예제에서는 innerHTML 속성을 사용해 HTML 코드를 웹 페이지에다 추가했다. 코드를 추가할 DIV 태그 이름은 weather_badge() 함수로 넘어온 div_name라는 매개변수다. HTML 코드를 DIV 내에 추가하는 방법은 간단하다.
var div = document.getElementById (div_name);
div.innerHTML = html_snippet;
|
장점과 단점
프로그래밍에서는 어떤 방식을 취하든 장점과 단점이 있다. 표 3은 방금 살펴본 방식에 나타난 장단점을 요약한다.
표 3. 접근 방식 1에 나타난 장점과 단점
| 장점 | 단점 |
|---|
주요 브라우저 제품에서 모두 똑같이 동작한다.
추가 라이브러리나 써드 파티 도구가 필요하지 않다. | 간단한 XML 문서에서도 XML 엘리먼트를 찾아내는 찾아내는 과정이 번거롭고 까다롭다. |
Part 2에서 소개할 접근 방식 두 가지
Part 2에서는 Part 1에서와 다른 접근 방식 두 가지를 소개한다. XSLT를 사용해 XML을 HTML로 변환하는 방법이다. 두 번째와 세 번째 접근 방식 모두가 XSLT를 사용하지만, 자료 파이프라인에서 변환이 일어나는 위치(서버냐 브라우저냐)가 다르다.
다운로드 하십시오 | 설명 | 이름 | 크기 | 다운로드 방식 |
|---|
| 이 연재의 예제 코드 | x-xmlajax.zip | 194KB | HTTP |
|---|
참고자료 교육
-
XML processing in Ajax, Part 2: Two Ajax and XSLT approaches (Mark Pruett, developerWorks, 2007년 3월): Ajax 날씨 뱃지를 만드는 방법 두 가지를 더 소개한다. 두 방법 모두 XSLT 변환을 사용하는데 하나는 서버쪽에서, 다른 하나는 브라우저쪽에서 변환을 수행한다.
-
XML
processing in Ajax, Part 3: JSON and avoiding proxies (Mark Pruett, developerWorks,
007년 3월): 이 연재의 마지막 기사다. 공개 웹 서비스와 JSON(JavaScript Object Notation), 동적 스크립트 태그를 사용해 Ajax 날씨 뱃지를 만든다.
-
Apache Proxy의 명령어 (mod_proxy)를 사용한 LAMP 보안 향상 (영문) (Nick Maynard, developerWorks, 2006년 11월): 아파치의
mod_proxy 모듈을 사용해 LAMP 보안을 강화하는 방법을 소개한다.
-
Ajax 마스터하기, Part 1: Ajax 소개 (Brett McLaughlin, developerWorks, 2006년 5월): 웹 사이트 구축이라는 실용적인 관점에서 Ajax를 소개하는 기사 연재다.
-
IBM developerWorks Ajax 자원 센터
: 다양한 Ajax 기술을 소개한다.
-
IBM XML 인증: XML과 관련 기술 분야에서 IBM 인증 개발자가 되는 방법을 소개한다.
-
XML 기술 라이브러리: developerWorks XML 영역에서는 기사와 팁, 튜토리얼, 표준, IBM 레드북 등 다양한 기술 자료를 제공한다.
-
developerWorks 기술 행사와 웹 캐스트: 최신 기술 동향을 파악할 수 있다.
- The 온라인 기술 서점: 다양한 기술 서적과 기술 자료를 제공한다.
제품 및 기술 얻기
토론
필자소개
기사에 대한 평가
|
| 이 문서 북마킹 하기
|
| |
