메인 컨텐츠로 가기

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관 보기.

모든 정보가 안전하게 전송되었습니다.

  • 닫기 [x]

서버측에서 Jaxer와 함께 E4X 사용하기

JavaScript와 Jaxer를 사용하여 웹 애플리케이션 빌드하기

Michael Galpin, Software architect, eBay
Michael Galpin's photo
Michael Galpin은 1990년대 말부터 웹 애플리케이션을 개발하고 있으며 California Institute of Technology에서 수학과를 졸업하고 현재는 캘리포니아 산호세에 있는 eBay에서 아키텍트로 근무하고 있다.

요약:  E4X(ECMAScript for XML) 표준은 JavaScript 개발자에게 XML 작업에 필요한 강력한 API를 제공합니다. 이 표준은 Internet Explorer®에서 지원되지 않기 때문에 자주 사용할 필요는 없습니다. 하지만 서버에서 JavaScript를 Jaxer와 함께 사용할 때는 많이 사용하게 됩니다. 이 기사에서는 JavaScript와 E4X를 사용하여 서버에서 XML 작업을 쉽게 수행하는 방법에 대해 설명합니다. 이 주요 요소를 Jaxer와 결합하여 JavaScript만으로 Ajax 애플리케이션을 작성합니다.

원문 게재일:  2009 년 3 월 03 일 번역 게재일:   2009 년 6 월 23 일
난이도:  중급 영어로:  보기 PDF:  A4 and Letter (117KB | 13 pages)Get Adobe® Reader®
페이지뷰:  2949 회
의견:  


소개

이 기사에서는 Jaxer를 사용하여 클라이언트 및 서버측에서 JavaScript를 사용하는 웹 애플리케이션을 빌드한다. 웹 애플리케이션 특히, JavaScript에 대한 경험이 있는 것으로 간주한다. 이 기사에서는 JavaScript와 특히, E4X를 사용하여 XML 작업을 수행하므로 XML에 대한 지식도 도움이 된다. 이 애플리케이션은 Aptana Studio™ 1.2.1을 사용하여 개발되었지만 Aptana Studio를 사용하지 않고도 Jaxer 애플리케이션을 개발할 수 있다. Jaxer 1.0.2는 Aptana Studio에 포함되어 있으므로 별도로 다운로드하지 않아도 된다. 참고자료에서 다운로드 링크를 볼 수 있다.

Jaxer 개요

자주 사용하는 약어

  • Ajax: Asynchronous JavaScript + XML
  • API: Application Programming Interface
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • IDE: Integrated Development Environment
  • JSON: JavaScript Object Notation
  • PHP: PHP Hypertext Preprocessor
  • URL: Uniform Resource Locator
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language

Jaxer는 JavaScript를 서버측 프로그래밍 언어로 사용하는 데 필요한 기능을 제공한다. Java™, PHP, Python 또는 Ruby™ 프로그래밍 언어를 사용하여 일반적으로 수행하는 작업 즉, 데이터베이스 액세스, 파일 읽기 및 쓰기 또는 다른 서버와의 통신과 같은 모든 작업을 수행할 수 있다. 하지만 Jaxer에서는 JavaScript라는 단 하나의 프로그래밍 언어로만 현대적인 웹 애플리케이션을 개발할 수 있다. 동적 대화식 웹 애플리케이션을 개발하고 있다면 이미 수많은 JavaScript를 작성했을 것이다. 또한 여러 Ajax를 개발하고 있을 경우에는 아마도 서버에서 사용되는 항목과 JavaScript를 변환하는 데 많은 시간을 투자했을 것이다. 그러나 이제는 JavaScript에서 모든 작업을 수행하여 개발 작업을 단순화할 수 있다. Jaxer의 사용 방법을 살펴보기 전에 Jaxer 애플리케이션의 작동 방법을 이해하기 위해 Jaxer 아키텍처를 간략하게 설명한다.


Jaxer 아키텍처

서버에서 Jaxer를 통해 JavaScript를 사용하는 방법은 일반적으로 사용되는 방법은 아니지만 Jaxer는 표준에 충실하다. Jaxer는 Apache Web 서버에서 실행되는 Apache 모듈 중 하나인 mod_jaxer이다. 이 아키텍처는 PHP, Python 또는 Ruby on Rails™(Phusion Passenger™ 사용)을 사용할 때나 Apache를 Tomcat(mod_jk 사용)과 같은 Java 웹 컨테이너를 사용할 때와 같다. 그림 1에서는 이 아키텍처에 대한 상위 레벨 보기를 보여 준다.


그림 1. Jaxer 아키텍처
Jaxer 아키텍처

이는 표준에 충실한 서버측 아키텍처이다. 또한 Jaxer는 PHP 등의 서버측 기술과 여러 가지 특성을 공유하며 공통 데이터베이스에 세션 데이터를 자동으로 저장하기는 하지만 Shared Nothing 방식을 사용한다.

그렇다면 Jaxer는 실제로 서버에서 JavaScript를 어떻게 실행할까? Jaxer는 Mozilla®의 SpiderMonkey JavaScript Virtual Machine을 사용한다. 이는 Firefox® 3.0에 사용되는 것과 같은 JavaScript 엔진이다. 따라서 Jaxer는 PHP에 버금가는 매우 좋은 성능을 제공한다. Jaxer를 사용하면 Firefox와 Internet Explorer 둘 다에서 지원되는 JavaScript의 일부분이 아닌 Firefox에서 지원되는 모든 JavaScript를 사용할 수 있다. Array.mapArray.reduce와 같은 몇 가지 함수 프로그래밍 구문과 XML 구문 분석 및 생성을 위한 E4X가 지원된다. 지금까지 Jaxer의 작동 방법에 대해 살펴보았으며 이제는 Jaxer를 시작하기 위해 설치해야 하는 프로그램에 대해 설명한다.


Jaxer 설치하기

Jaxer는 Windows®, Mac OS® X, Linux® 및 Solaris™를 포함한 대부분의 플랫폼에서 사용할 수 있다. Jaxer는 Apache에 번들로 포함되어 있으므로 따로 다운로드하지 않아도 된다. 하지만 Aptana Studio(참고자료 참조)를 다운로드하면 Jaxer 작업을 훨씬 쉽게 시작할 수 있다. JavaScript 개발자에게 유용한 IDE이기도 하고 내장 Apache/Jaxer 서버도 포함되어 있는 Aptana Studio를 사용할 경우에는 웹 애플리케이션을 작성한 후 Jaxer에서 바로 실행할 수 있다. Aptana Studio는 Eclipse 플러그인이다. Eclipse에 번들로 포함된 독립 실행형 애플리케이션으로 다운로드할 수 있으며 이미 Eclipse를 사용 중인 경우에는 플러그인으로 다운로드할 수 있다.

Aptana Studio를 시작한 후에는 Jaxer 쉘을 사용해 볼 수 있다. 이 쉘에서는 JavaScript를 입력한 후 Jaxer 내부에서 직접 실행할 수 있다. 이는 서버에서 코드를 직접 테스트 및 디버깅할 수 있는 매우 효과적인 방법이다. 그림 2에서는 Jaxer 쉘을 사용하여 몇 가지 Jaxer API를 탐색하는 예제를 보여 준다.


그림 2. Jaxer 쉘
Jaxer 쉘

Jaxer를 사용하는 애플리케이션을 작성하려면 새 프로젝트를 작성한 다음 Aptana Projects > Default Web Projects를 선택한다. 그러면 Jaxer Support를 추가할 수 있는 마법사가 표시된다. 프로젝트를 작성한 후에는 HTML 파일을 마우스 오른쪽 단추로 클릭하고 Run As > JavaScript Web Application을 선택할 수 있다. 이렇게 하면 파일이 Jaxer에 전개되면서 해당 페이지가 기본 웹 브라우저에 표시된다. Firefox를 사용할 경우 Jaxer에는 유명한 Firebug 플러그인을 사용하여 JavaScript를 디버깅하는 플러그인이 있다. Jaxer 버전을 사용하면 Aptana Studio 내에서 실제 코드를 디버깅할 수 있다. 이제 Aptana Studio와 Jaxer를 사용할 준비가 완료되었으므로 서버측 E4X에 대한 Jaxer의 지원을 보여 주는 샘플 애플리케이션을 빌드할 수 있다.


샘플 애플리케이션: JavaScript로 Flickr 검색

이제 샘플 애플리케이션을 작성할 시간이다. 간단히 설명하기 위해 이 기사에서는 유명한 사진 공유 사이트인 Flickr의 사진을 검색하는 애플리케이션을 작성한다. 이 애플리케이션에서는 Flickr 웹 서비스를 사용하여 지정된 태그를 가지고 있는 모든 사진을 검색한다. Flickr는 이 데이터를 XML로 제공하며 이 XML은 서버에서 E4X를 통해 처리된다. 먼저 이 XML의 모습과 E4X를 사용하여 XML을 처리하는 방법을 살펴보자.

E4X로 XML 구문 분석하기

Flickr의 웹 서비스는 XML, JSON 및 직렬화된 PHP와 같은 다양한 형식으로 데이터를 제공할 수 있으며 기본 형식은 XML이다. Listing 1에서는 Flickr 웹 서비스의 샘플 출력을 보여 준다.


Listing 1. Flickr의 샘플 XML

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<photos page="1" pages="20626" perpage="16" total="330003">
    <photo id="3284086892" owner="49356365@N00" secret="a072efd762" 
server="3294" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3283258525" owner="49356365@N00" secret="30c9b39aa1" 
server="3409" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3284079858" owner="49356365@N00" secret="798d6ca888" 
server="3517" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3284077350" owner="49356365@N00" secret="c27902242e" 
server="3413" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3283262179" owner="49356365@N00" secret="2b2e36cafd" 
server="3149" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3284084794" owner="49356365@N00" secret="57afa6f5f8"
server="3294" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3284081008" owner="49356365@N00" secret="5cd1b5a932" 
server="3435" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3284085910" owner="49356365@N00" secret="0a51105dcd" 
server="3487" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3283263823" owner="49356365@N00" secret="944da852f9"
server="3407" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3284082986" owner="49356365@N00" secret="2d0f3c3755" 
server="3282" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3283236151" owner="49356365@N00" secret="2299cca4e1" 
server="3146" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
    <photo id="3283249899" owner="49356365@N00" secret="e23d563cef" 
server="3623" farm="4" title="Snow Day" ispublic="1" isfriend="0" isfamily="0" />
</photos>
</rsp>

서버측 Java 코드 또는 클라이언트측 JavaScript 코드가 포함된 이와 같은 데이터를 구문 분석하려면 DOM API를 사용하게 된다. 이 방법은 간단하기는 하지만 매우 상세한 코드가 생성될 수 있다. E4X를 사용하면 훨씬 간단하게 처리할 수 있다. Listing 2에서는 Flickr의 XML을 구문 분석하는 코드를 보여 준다.


Listing 2. E4X로 Flickr XML 구문 분석하기

/*
 * Parses XML in the following format:
 *     <photo id="3283249899" owner="49356365@N00" secret="e23d563cef" 
 *   server="3623" farm="4" title="Snow Day" ispublic="1" isfriend="0" 
 *   isfamily="0" />
 */
function FlickrPhoto(xml){
    this.id = xml.@id.toXMLString();
    this.owner = xml.@owner.toXMLString();
    this.secret = xml.@secret.toXMLString();
    this.server = xml.@server.toXMLString();
    this.farm = xml.@farm.toXMLString();
    this.caption = xml.@title.toXMLString();
    this.url = "http://farm"+ this.farm + ".static.flickr.com/"+
    this.server +"/"+ this.id +"_"+ this.secret +".jpg";
    this.toHtml = function(){
        var html = <img src={this.url} alt={this.caption} 
title={this.caption}></img>;
        return html.toXMLString();
    }    
}    

먼저 코드 앞에 있는 주석을 보면 입력 매개변수로 사용할 XML의 유형이 적혀 있다. 이 유형은 Listing 1의 샘플 XML에 있는 단일 photo 요소이다. id 및 owner와 같은 photo 요소의 각 속성 값에 JavaScript 클래스인 FlickrPhoto의 특성 중 유사한 이름의 특성을 맵핑한다. 예를 들어, 이 XML의 server 속성에 액세스하려면 xml.@server.toXMLString()을 사용한다. toXMLString 메소드는 문자열 형식의 데이터 표현을 리턴한다.

위에서 설정한 url 특성은 웹 서비스에서 제공하는 데이터의 이미지에 대한 URL을 생성한다. 여기에서 흥미로운 부분은 toHtml 메소드이다. 이 메소드는 XML 리터럴을 사용한다. E4X는 XML 데이터에 액세스할 때뿐만 아니라 XML을 작성할 때도 유용하게 사용할 수 있다. 물론 HTML 또는 좀 더 엄밀히 말해서 XHTML도 XML이기 때문에 E4X를 사용하여 HTML 표현식도 작성할 수 있다. 이 예제에서는 이 표현식이 이미지 태그로 사용된다. 여기에서는 이 표현식을 문자열로 작성하지만 E4X에서는 훨씬 쉽게 작성할 수 있다. 이 예제에서는 url 및 caption 특성을 XML 표현식에 포함시키는 방법을 볼 수 있다. 그렇다면 Flickr의 XML을 이러한 오브젝트 중 하나로 가져오려면 어떻게 해야 할까? 이를 위해서는 프록시가 필요하다.

프록시 사용하기

브라우저 내에서는 XMLHttpRequest를 사용하여 원격 호출을 수행할 수 있다. 그러나 이 호출은 웹 페이지와 동일한 도메인에서만 사용할 수 있기 때문에 브라우저에서 Flickr를 직접 호출할 수는 없다. 따라서 프록시를 사용하여 서버에서 Flickr를 호출해야 한다. Jaxer를 사용하면 이 작업을 매우 쉽게 수행할 수 있다. 평소처럼 script 요소 내에 JavaScript를 선언한 후 추가 속성을 추가하여 해당 스크립트를 프록시로 사용할 것임을 Jaxer에게 알려 주면 된다. Listing 3을 살펴보자.


Listing 3. 프록시가 포함된 Flickr 검색 페이지

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Flickr Search</title>
    <script type="text/javascript" runat="server-proxy">            
// server side code goes here        
    </script>
    <script type="text/javascript">
        function getData(){
            var tag = document.getElementById("tag").value;
            var response = getFlickr(tag);
            document.getElementById("out").innerHTML = response;
        }
    </script>
    </head>
    <body>
        <div>
            <span>Search:</span>
        <input type="text" id="tag"></input>
            <input type="button" value="Show Photos" onclick="getData()"/>
      </div>
    <div id="out">Output will go here</div>
    </body>
</html>

첫 번째 script 태그를 보면 runat 속성이 server-proxy로 설정되어 있다. 이 설정은 Jaxer에게 해당 블록의 코드가 서버에서 실행되지만 클라이언트에서 호출할 수 있는 코드여야 한다는 것을 알려 준다. Jaxer는 클라이언트에 프록시 오브젝트를 생성한다.

이 예제에서는 단일 텍스트 입력 필드와 하나의 단추가 있는 간단한 HTML 양식을 사용한다. 사용자가 단추를 클릭하면 getData 함수가 호출된다. 이 함수는 텍스트 필드에 입력된 데이터를 가져와서 getFlickr 함수에게 전달한다. 하지만 getFlickr 함수는 어디에 있을까? 이 함수는 서버에 정의되어 있다. Jaxer 라이브러리는 Listing 3의 클라이언트 코드에서 이 함수를 호출할 수 있도록 프록시를 생성한다. 이 함수는 Flickr 웹 서비스에 액세스하는 함수이다. 이제 이 함수의 작동 방식을 살펴보자.


웹 서비스 호출하기

서버에서는 클라이언트에서 사용할 수 있는 모든 것을 사용할 수 있다. 예를 들어, XMLHttpRequest를 사용하여 원격 웹 서비스를 호출할 수 있다. @@@하지만 Jaxer에 이 작업을 쉽게 수행하는 데 필요한 API가 포함되어 있으므로 서버에 적용되는 제한 사항이 거의 없다.@@@ Listing 4에서는 이에 대한 코드를 보여 준다.


Listing 4. 서버에서 Flickr 호출하기

function getFlickr(tag){
    const API_KEY = "Your Key Goes here";
    var url = "http://api.flickr.com/services/rest/?method=" +
        "flickr.photos.search&per_page=16&api_key="+ API_KEY + 
        "&tags="+tag;
    var raw = Jaxer.Web.get(url);
    Jaxer.Log.debug("Got data from Flickr=" + raw);
    var rsp = new XML(raw.replace(/<\?(.*?)\?>/,''));
    var photos = [rsp.photos.photo[i] for (i in rsp.photos.photo)];
    photos = photos.map(function(x) new FlickrPhoto(x));
    var html = photos.reduce(function (previous, current){
        return previous + current.toHtml();
    }, "");                
    return html;
}

Listing 4의 코드는 간단함에도 불구하고 많은 작업을 수행한다. 먼저 Flickr 웹 서비스에 대한 URL을 작성한다. 그리고 Flickr를 호출하려면 API 키가 필요하다. API_KEY 변수는 const로 선언된다. 이 유형은 JavaScript 1.5에 포함되어 있지만 Internet Explorer에서 지원되지 않는다. 이름으로 알 수 있듯이 이 유형은 변수를 읽기 전용 상수로 선언한다.

그런 다음 Flickr 웹 서비스를 호출하기 위해 Jaxer.Web.get API를 사용한다. 이 API는 Jaxer 라이브러리에 있으며 제한 사항 없이 원격 서버에 대한 동기 호출을 생성할 때 사용되며 XMLHttpRequest보다 훨씬 쉽게 사용할 수 있다. 결과를 받은 후 Jaxer.Log.debug라는 Jaxer API를 사용하여 Flickr의 데이터에 대한 로그를 작성한다. Jaxer 로그는 Aptana Studio에서 직접 액세스할 수 있다. 기본적으로 ERROR 레벨 메시지만 로그에 작성되지만 필요에 따라 로깅 레벨을 조정할 수도 있다.

Flickr의 데이터는 XML 오브젝트로 구문 분석된다. 먼저 해당 데이터에 대해 정규 표현식을 실행해야 한다. 이 정규 표현식은 E4X에서 사용되지 않는 항목인 XML 선언(<?xml version="1.0" encoding="utf-8" ?>)을 제거한다. XML 오브젝트가 생성되면 rsp.photos.photo라는 표현식을 사용하여 photo 요소 목록을 가져올 수 있다. 이 결과와 Listing 1의 요소 구조가 얼마나 일치하는지 살펴보자.

다음 표현식(var photos로 시작하는 표현식)은 경험이 많은 JavaScript 개발자에게도 낯선 표현식일 것이다. 이 표현식은 JavaScript 1.7의 일부인 배열 통합이다. 전체 브라우저에서 지원되어야 한다는 요구 사항으로 인해 이 유형의 함수 프로그래밍 스타일은 JavaScript에서 자주 사용되지는 않는다. Python에 익숙한 경우에는 배열 통합이 Python의 목록 통합과 매우 비슷하다는 것을 알 수 있다. 이 예제에서는 rsp.photos.photo 오브젝트를 반복한다. 이 오브젝트는 XMLList 오브젝트이다. 즉, 각 요소가 Listing 1에 표시된 XML의 photo 노드에 해당하는 목록이다. 이 통합은 배열의 각 요소가 XMLList의 XML 요소인 배열을 생성한다. 다시 말해서 XMLList가 배열로 변환된다. 이렇게 하는 이유가 무엇일까? 그 이유는 간단하다. XMLList보다는 Array 클래스에 사용하기 편리한 API가 있기 때문이다. 계속 읽어보자.

photo XML 오브젝트가 들어 있는 배열이 생성된 후에는 이 배열에 대해 map 함수를 호출할 수 있다. 이 함수는 또 하나의 함수 프로그래밍 구문이다. 이 함수는 하나의 함수를 단일 매개변수로 받아서 배열의 각 요소에 적용한다. 매개변수로 전달된 함수를 원래 배열의 i번째 요소에 적용한 결과를 i번째 요소로 가지고 있는 새로운 배열이 결과적으로 생성된다. 이 두 행으로 구성된 코드(배열 통합 및 맵)는 한 행으로 결합할 수도 있지만 이 예제에서는 서버측 JavaScript로 수행할 수 있는 강력한 기능을 보여 주기 위해 구분해 놓았다.

마지막으로 고급 JavaScript 기능인 배열에 대한 reduce 메소드를 살펴보자. 이 메소드는 JavaScript 1.8에서 도입되었으며 배열 통합 및 맵과 마찬가지로 Python 구문과 매우 비슷하며 다른 여러 기능적 언어에도 fold라는 이름의 유사한 메소드가 있다. 이 메소드는 두 개의 매개변수 즉, 함수와 초기 값을 받는다. 함수에는 previouscurrent라는 두 개의 매개변수가 있다. previous 매개변수는 초기 값으로 시작되며, 이 경우에는 빈 문자열이다. current 매개변수는 배열의 첫 번째 요소로 시작된다. previous 매개변수는 함수의 결과로 대체되며 이 프로세스는 모든 요소가 사용될 때까지 배열의 다음 요소를 사용하여 반복된다. 이 경우에는 빈 문자열로 시작한 후 호출되는 첫 번째 요소에 대한 toHtml 메소드의 결과를 빈 문자열에 연결한다. 그런 다음 호출되는 두 번째 요소에 대한 toHtml 메소드의 결과를 첫 번째 결과에 연결하며 이후 요소에도 동일한 방식이 적용된다. 결과적으로 배열의 각 요소에 적용된 toHtml의 결과가 연결된다. 표 1에서는 연결된 결과를 보여 준다.


표 1. toHtml을 배열의 각 요소에 적용하여 연결된 결과
반복PreviousCurrent리턴 값
0 """"
1""photos[0]photos[0].toHtml()
2photos[0].toHtml()photos[1]photos[0].toHtml()
+
photos[1].toHtml()
3photos[0].toHtml()
+
photos[1].toHtml()
photos[2]photos[0].toHtml()
+
photos[1].toHtml()
+
photos[2].toHtml()

결국 map 표현식은 각 요소를 받아서 toHtml 메소드를 적용한 후 모든 값을 연결한다. 이제 클라이언트 코드로 돌아가서 이 메소드의 모든 결과는 클라이언트에 전달되어 DOM을 업데이트하는 데 사용된다. 그리고 마지막으로 Flickr의 모든 이미지가 표시된다.


요약

지금까지 Jaxer를 통해 JavaScript만으로 강력한 웹 애플리케이션을 작성하는 방법을 살펴보았다. 서버에서 JavaScript를 실행하는 방법은 더 이상 낯선 방법이 아니며 매우 현대적인 강력한 프로그래밍 언어에 사용되는 방법이다. 특히 E4X 기능을 사용하면 XML 문서를 쉽게 분석하여 XML 표현식을 작성할 수 있다. 서버에서 JavaScript를 사용하면 다른 여러 가지 장점도 얻을 수 있다. 강력한 언어의 뛰어난 기능을 서버와 클라이언트에서 사용할 수 있다는 점은 매우 매력적인 장점이다. Jaxer를 사용하면 이 모든 장점을 실현할 수 있으므로 이제부터는 새로운 방식으로 JavaScript 기술을 활용해 보자.



다운로드 하십시오

설명이름크기다운로드 방식
The Jaxer applicationFlickrSearch.zip2KBHTTP

다운로드 방식에 대한 정보


참고자료

교육

제품 및 기술 얻기

  • Aptana Studio: Aptana Studio 1.2.1을 다운로드하여 이 기사의 설명에 따라 사용해 보자.

  • Flickr: 온라인 사진 관리 애플리케이션을 살펴보자.

  • Passenger: Phusion Passenger(Ruby on Rails)와 Jaxer의 아키텍처를 비교해 보자.

  • 제품 평가를 위한 IBM 시험판 소프트웨어: developerWorks에서 직접 다운로드할 수 있는 DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere®의 애플리케이션 개발 도구 및 미들웨어 제품을 포함한 여러 가지 시험판 소프트웨어를 사용하여 차기 프로젝트를 빌드해 보기 바란다.

토론

필자소개

Michael Galpin's photo

Michael Galpin은 1990년대 말부터 웹 애플리케이션을 개발하고 있으며 California Institute of Technology에서 수학과를 졸업하고 현재는 캘리포니아 산호세에 있는 eBay에서 아키텍트로 근무하고 있다.

잘못된 도움말 신고

부정사용 신고

감사합니다. 이 항목은 운영자가 관심을 표시했습니다.


잘못된 도움말 신고

부정사용 신고

제출실패 신고. 나중에 다시 실행해주세요.


디벨로퍼웍스 로그인


IBM ID가 필요하세요?
IBM ID를 잊으셨습니까?


비밀번호를 잊으셨습니까?
비밀번호 변경

developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

화면상에 보여지는 닉네임을 정하세요.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

3개의 &이나 대쉬를 포함해주시고 31글자내로 제한해주세요.


developerWorks 이용 약관에 동의하시는 경우 제출을 클릭하십시오. 이용 약관.

 


아티클 순위

의견

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=20
Zone=XML, 웹 개발, 오픈 소스
ArticleID=398852
ArticleTitle=서버측에서 Jaxer와 함께 E4X 사용하기
publish-date=03032009
author1-email=mike.sr@gmail.com
author1-email-cc=dwxed@us.ibm.com

태그

Help
검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오.

태그를 더 많이 보거나 적게 보기 위해 슬라이더 막대를 사용하십시오.

인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다.

내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.

검색 필드를 사용하여 My developerWorks 내에서 해당 태그가 사용된 모든 종류의 컨텐츠를 검색하십시오. 인기 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 최고 인기 태그를 보여줍니다. 내 태그는 특정 컨텐츠 존(예를 들어, 자바, 리눅스, WebSphere)의 귀하의 태그를 보여줍니다.