세이자바

[2007.5.7 에 썼던 글입니다]
지난 4월 26일에 DWR(Direct Web Remoting)  의 2.0 버전이 정식으로 릴리즈 되었다. milestone 1 버전이 릴리즈 된 이후 거의 1년 정도가 지났고 RC(Release Candidate) 4까지 발표했었기 때문에 관심이 있던 사람들은 어떤 기능들이 추가되었는지도 대충 알고 있었겠지만, 그렇지 않은 사람들이 더 많을 것이다.

DWR 은 자바 클래스의 메소드를 자바스크립트에서 그대로(파라미터가 하나 추가되기는 한다) 호출할 수 있도록 하자는 취지에서 만들게된 라이브러리이고, 그 중간에 AJAX 기술이 사용된다. 즉 자바 클래스 AClass 에 methodB(String a, String b) 와 같은 메소드가 있다면 자바스크립트에서 다음과 같이 호출을 하면 서버에서 실행이 되는 것이다.

AClass.methodB(callbackFunction, "A","B");

여기서 callbackFunction 은 서버에서 메소드가 실행이 된 다음에 그 메소드의 리턴값으로 브라우저에서 무엇인가를 처리해야 할 때 그 것을 실행하는 자바스크립트 함수이다. AJAX 를 사용하므로 결과처리는 비동기 방식으로 할 수 밖에 없기에 필연적으로 callback 함수로 리턴 결과를 이용하게 된다.

DWR 에 대한 대략적인 설명은 대충 이정도로 마무리 짓고, 이제 2.0 버전에 추가된 Reverse AJAX 를 살펴보자.

AJAX 는 XML과 자바스크립트를을 이용해서 비동기 방식으로 클라이언트인 브라우저와 서버가 메시지를 주고 받는 기술을 말한다. 여기에서 당연히 가정할 수 있는 것은 호출의 방향이다. 기본적으로 HTTP 프로토콜은 클리이언트가 서버에 페이지를 요청하면 서버가 페이지 데이터로 리턴하는 방식이기 때문에 브라우저에서 서버의 무엇인가를 실행하는 것은 가능해도 서버에서 브라우저의 특정 함수를 호출하는 것은 일반적인 방식으로는 불가능하다. 하지만 DWR 2.0 에서는 Reverse AJAX 라는 이름으로 이러한 구현을 구현했다. 이는 Comet, Polling, Piggyback 의 3가지 방식을 통해 지원되며 Comet 와 Polling 은 능동적인(active) 방식이고 Piggyback 은 수동적인(passive) 방식이다.

그러면 이것이 어떤 때에 쓰이는가? 몇가지 샘플이 있으니 직접 보도록 하자.

 Mats Henricson 은 Script.aculo.us 와 DWR 의 reverse AJAX 를 이용해서 주식현황표 를 만들었다. 혹시 좌측 링크를 클릭해서 어떻게 동작하는지 페이지를 열어보았는가? 소스보기를 하면 거의 볼 내용이 없을 정도로 짧은데 눈에 띠는 부분이 있다.

    function loadStocks()
    {
        if (stocksLoaded) return;    // Only load once, in case user moves around mouse
        Stocks.loadStocks();
        dwr.engine.setActiveReverseAjax(true);
        stocksLoaded = true;
    }

위에서 Stocks.loadStocks() 라는 DWR 에서 생성한 함수를 호출하는 부분이 있는데 이것은 실제 서버의 같은 이름의 메소드를 호출하고 있을 것이다. 서버 메소드를 한 번 호출하고 dwr.engine.setActiveReverseAjax(true) 라는 명령으로 reverse AJAX 를 활성화하는데 이제부터 계속 화면의 값들이 바뀌기 시작한다. 서버에서 클라이언트를 제어하기 시작한 것이다. 그렇다면 이제 서버의 소스를 살펴보자. 먼저 dwr.xml 을 보는 것이 우선일 것이다. 여기에는 다음과 같이 설정이 되어있다.

    <create creator="new" javascript="Stocks" scope="application">
      <param name="class" value="ajaxkurs.StocksUtil"/>
      <include method="loadStocks"/>
    </create>

 이 파일에서 위의 자바스크립트에서 호출했던 Stocks.loadStocks() 이 ajaxkurs.StocksUtil 라는 클래스에 있는 것이라는 것을 알 수 있다. 그럼 실제 StocksUtil 를 보자. 지면 관계상 소스를 다 싣는 것은 무리이므로 간단하게 설명만 하면 StocksUtil 은 Runnable 을 구현하고 있고 당연히 run() 메소드가 있어서 쓰레드로 동작을 하는 것을 볼 수 있다. run 메소드에서는 랜덤한 시간 간격으로 updateStocks() 라는 메소드를 호출하고 이 메소드의 제일 아랫부분에서는 다음과 같은 코드가 보인다.

        Effect effect = new Effect(sessions);
        effect.highlight("price" + updatedStock.getId(),
                         "{startcolor:'FFFF00', queue: {position: 'end', scope: 'price" + updatedStock.getId() + "', limit:1}}");

이 부분이 바로 클라이언트를 제어하는 부분이다. Effect 는 Script.aculo.us 라는 AJAX 라이브러리에 있는 클래스인데 org.directwebremoting.proxy.scriptaculous.Effect 으로 서버측의 자바로 구현된 프락시를 이용해서 클라이언트의 자바스크립트 함수를 호출하고 있는 것이다.

아마 이 짧은 글로는 확실히 이해가 가지는 않을 수도 있다. 더우기 AJAX 와 DWR 을 처음 접하는 사람이라면 더더구나 힘들 수도 있다. 어쨌거나 이번에 정식 릴리즈한 DWR 2.0 의 reverse AJAX 는 기존의 라이브러리들과 차별화되는 느낌이 강하다. 좀 더 알아보고 싶은 사람들은 다른 예제들이 http://upl.codeq.info/ajaxkurs/ 와 DWR 2.0 패키지에 있으므로 찾아보면 도움이 될 것이다.

DWR 을 처음 시작하는 사람들은 흰둥이's DWR 강좌 를 보면 어렵지 않게 시작할 수 있을 것이다.