E4X와 Prototype으로 구현하는 Ajax 스무고개 게임, Part 2: 게임을 더 똑똑하게 만들기 (한글)

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 토론 샘플 코드 영어원문  제안 및 의견 피드백

난이도 : 중급

Nicholas Chase, 필자, 자유기고가

2008 년 4 월 22 일

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

Ajax 스무고개 프로그램 최종 버전은 http://www.backstopmedia.com/examples/e4x.html을 참조한다. 여기서는 독자가 XML과 자바스크립트 개념에 어느 정도 익숙하다고 가정한다. 필요하다면 참고자료를 읽어본다. 프로그램을 구현하고 테스트하려면 E4X를 지원하는 브라우저가 필요하다. 파이어폭스 1.5 이상이면 충분하겠다.

현재 상태

아직 Part 1를 살펴보지 않았다면 먼저 Part 1부터 차근차근 읽어보라고 권한다(참고자료 참조). Part 1에서는 기존 지식 데이터베이스를 받아서 사용자 답을 유추하는 프로그램을 만들었다. Part 1에서 사용한 지식 데이터베이스는 Listing 1에서 보듯이 대다수 질문이 "예"/"아니오" 형식이었다.

                
<knowledgebase>
   <questions>
      <question id='1'>
         <display>Is it animal, vegetable, or mineral?</display>          
         <answerOption>Animal</answerOption><
		                      answerOption>Vegetable</answerOption>          
         <answerOption>Mineral</answerOption>
      </question>
...
   </questions>
   <targets>
      <target id='1'>
         <display>a house cat</display>
         <answer questionid = '1'><answerValue1>Animal</
		                                       answerValue1></answer>
         <answer questionid = '41'><answerValue41>No</
		                                      answerValue41></answer>
      </target>
      <target id='2'>
         <display>a carrot</display>
         <answer questionid = '1'><answerValue1>Vegetable</
		                                       answerValue1></answer>
         <answer questionid = '44'><answerValue44>No</
		                                      answerValue44></answer>
      </target>
...
   </targets>
</knowledgebase>

자주 사용하는 약어 Ajax: Asynchronous JavaScript™ and XML DOM: Document Object Model HTML: Hypertext Markup Language JSON: JavaScript Object Notation XML: Extensible Markup Language

분석을 위해, 프로그램은 먼저 질문을 던지고, 답변에 맞지 않는 후보를 제거하고, 남은 질문 중 가장 빈번한 질문을 다시 던지고, 후보 하나가 남을 때까지 이 과정을 반복한다.

정답 후보가 하나 남으면 프로그램은 사용자가 생각하고 있으리라는 정답을 추측한다. 추측한 답이 옳으면 처음으로 돌아간다. 여기서는 추측한 답이 틀렸을 경우를 구현한다.

위로

추측한 답이 틀렸을 경우

정답 후보가 하나 남았으나 틀린 답이라면 프로그램에게 사용자가 생각했던 진짜 답을 가르친다. 예를 들어 사용자는 "celery"를 생각했는데 프로그램이 "carrot"이라 추측했다면 프로그램에게 "celery"라는 개념을 알려줘야 한다. 또한 "celery"와 "carrot"을 구분하는 방법도 가르쳐야 한다.

가장 먼저, 사용자가 생각하는 답이 무엇인지 알아낸다. Listing 2에서 보듯이 폼은 간단하다.

참고: Part 1 예제를 살펴보지 않았다면 참고자료에서 필요한 파일을 내려받아 여기서부터 시작하자.

                
<div id="targetFormDiv" style="position: absolute; top: 50px;
                               visibility: hidden; width: 100%;">
    <form id="targetForm" name="targetForm">
       OK, what is it?  It's <input type="text" name="newTargetDisplay" 
                                    id="newTargetDisplay" />/>
       <input type="button" onclick="submit_new_target()" value="Teach me!" />
    </form>
</div>

사용자가 응용 프로그램이 추측한 값이 틀렸다고 응답하면 프로그램은 get_new_target() 함수를 호출한다. Listing 3에서 보듯이 이 함수는 Listing 2 폼을 표시한다.

                
function get_new_target(){
     document.getElementById("guessDiv").style.visibility = "hidden" ;
     document.getElementById("targetFormDiv").style.visibility = "visible" ;
}

결과는 그림 1과 같다.

사용자가 입력란에 새 정답 후보를 입력하고 Teach me! 버튼을 클릭하면 프로그램은 submit_new_target() 함수를 호출한다. 예를 들어 사용자가 "a lion"을 입력했다고 가정하자.

                
...
     show_form("targetFormDiv");
}

var newTarget;
function submit_new_target(){
    
    newTarget = document.getElementById("targetForm").elements[0].value;
    
    document.getElementById("newTarget").innerHTML = newTarget;
    document.getElementById("oldTarget").innerHTML = currentGuessText;
    
    hide_form("targetFormDiv");
    show_form("answerFormDiv");    
}

function hide_form(divName){
...

submit_new_target() 함수는 사용자가 입력한 값을 전역 변수인 newTarget에 저장한다. 그런 다음 answerFormDiv에 정보를 채워서 표시한다.

                
<div id="answerFormDiv" style="position: absolute; top: 50px;
                               visibility: hidden;  width: 100%;">

   <form id="answerForm" name="answerForm" >
      What question distinguishes <span id="newTarget"></span> 
      from <span id="oldTarget"></span>?<br />

    <input type="text" name="newQuestion" value="" id="newQuestion" /><br />

      What is the correct answer for this item?
      <select id="newAnswer" name="newAnswer">
          <option value="Yes">Yes</option>
          <option value="No">No</option>
      </select>
     <input type="button" value="Add Question" onclick="add_new_question()" />
   </form>

</div>

결과는 그림 2와 같다.

이제 새롭게 습득한 정보를 지식 데이터베이스에 저장할 차례다.

위로

지식 데이터베이스 확장과 자바스크립트 변수 사용

지식 데이터베이스를 확장하는 가장 첫 단계로, 새 질문 요소를 생성하여 추가한다. 코드는 Listing 6과 같다.

                
...
var nextQuestionId = 3;
var nextTargetId = 5;
function add_new_question(){

    var newQuestion = document.getElementById("answerForm").elements[0].value;
    var newAnswer = document.getElementById("answerForm").elements[1].value;

    thisQuestionId = nextQuestionId;
    nextQuestionId++;

    var newQuestionXML = <question id={thisQuestionId}>
          <display>{newQuestion}</display>
          <answerOption>Yes</answerOption>
          <answerOption>No</answerOption>
       </question>;
       
    var newQuestionElement = new XML(newQuestionXML);
    knowledgeBase.questions.appendChild(newQuestionElement);

}

입력 폼에서 새 질문과 답을 추출한 후 새 요소를 생성한다. 새 질문 ID는 nextQuestionId 변수에서 가져온다. 그런 다음 잊지 말고 nextQuestionId 변수를 증가시킨다.

다음으로 새 요소를 생성한다. XML 문법은 Part 1과 같지만(참고자료 참조), 여기서는 자바스크립트 변수 문법을 사용하여 새 ID를 표시한다. ID 속성 앞뒤에 인용부호가 없다는 사실에 주목한다. 인용부호를 넣으면 "3"이 아니라 "{thisQuestionId}"라는 값이 들어간다.

XML을 생성한 후에는 여기서 XML() 객체를 만든다. 그런 다음, appendChild() 함수를 사용하여 새 질문 요소를 추가한다.

이제 프로그램이 추측했던 정답 후보에 새 질문을 추가할 차례다. 예를 들어 프로그램이 추측한 정답은 "a house cat"이었으나 사용자가 생각한 정답은 "a lion"이었다면, "a house cat"에다 "Is it wild?"는 "No"라는 정보를 추가해야 한다(Listing 7 참조).

                
...       
    var newQuestionElement = new XML(newQuestionXML);
    knowledgeBase.questions.appendChild(newQuestionElement);

    // 추측한 정답 후보에 새 대답을 추가한다
    var oldAnswer = "Yes";
    if (newAnswer == "Yes"){
        oldAnswer = "No";
    }

    var oldTargetNewAnswer = <answer questionid={thisQuestionId}></answer>;
    oldTargetNewAnswer["answerValue"+thisQuestionId] = oldAnswer;
    knowledgeBase..target.(@id==currentGuessId).appendChild(oldTargetNewAnswer);
...

사용자가 입력한 새 답변에 따라 프로그램이 추측한 정답 후보에 들어갈 답변을 결정한 후 새 answer 요소를 생성한다. 여기서 몇 가지 기교를 사용한다.

먼저 앞서 보았듯이 XML 문에 자바스크립트 변수를 사용한다.

둘째, 해시 표기법을 사용한다. oldTargetNewAnswer.answerValue3 요소는 암시적으로 생성된다. 즉 존재하지 않으면 E4X가 생성한다.

마지막으로, 지식 데이터베이스에서 모든 target 요소를 선택한 후 currentGuessId 필터를 사용하여 프로그램이 추측한 target 요소를 찾는다. 여기에다 방금 생성한 answer 요소를 추가한다. 이로써 기존 정답 후보는 처리가 끝났다.

이제 새로운 정답 후보를 생성할 차례다. 새 정답 후보는 이제까지 답한 질문을 모두 포함하므로, 프로그램이 추측했던 target 요소에서 복사하는 편이 가장 빠르다. 코드는 Listing 8을 참조한다.

                
...
    knowledgeBase..target.(@id==currentGuessId).appendChild(oldTargetNewAnswer);
    var oldTargetElement = new XML();
    oldTargetElement = knowledgeBase..target.(@id==currentGuessId);

    // 옛날 정답 후보 복사
    var newTargetElement = oldTargetElement.copy();
    newTargetElement.@id = nextTargetId;
    nextTargetId++;
    newTargetElement.display = newTarget;

    var newAnswerElement = newTargetElement.answer.(@questionid == thisQuestionId);
    newAnswerElement["answerValue"+thisQuestionId] = newAnswer;

    knowledgeBase.targets.appendChild(newTargetElement);

    hide_form("answerFormDiv");  

    start_over();

}

앞서와 같은 방법으로, 프로그램이 추측했던 target 요소 참조값을 찾는다. 그런 다음, copy() 함수를 사용하여 요소 사본을 생성한 후 새로 생성한 요소에다 ID와 새 값을 설정한다. 마지막으로, 가장 최근 answer 요소에 들어 있는 답변을 새 값으로 변경한다.

이제 새 요소를 지식 데이터베이스에 추가한다.

그런 다음, start_over() 함수를 호출하여 첫 번째 질문으로 돌아간다. alert() 문을 제거하지 않았다면 "Animal"을 선택한 후 새로운 질문과 후보가 표시된다(그림 3).

페이지를 다시 띄우지 않는 이상, 사용자가 추가하는 새 질문과 답변은 지식 데이터베이스에 계속 쌓인다. 지식 데이터베이스에 들어 있지 않은 뭔가를 떠올린 후 실험해도 좋겠다.

불행하게도, 페이지를 다시 띄우는 순간 지식 데이터베이스는 원래 상태로 돌아간다. 즉 사용자들은 서로가 추가한 질문과 답변을 보지 못한다. 다른 사용자가 추가한 정보를 이용할 수 있다면 좋지 않을까?

위로

새롭게 개선한 알고리즘

다른 사용자와 정보를 공유하려면 외부 데이터베이스가 필요하다. 우리 예제에서는 MySQL 데이터베이스와 PHP를 사용한다. 구체적으로 PHP와 MySQL 데이터베이스를 연동하는 방법은 여기서 다루지 않는다(필요하다면 참고자료에서 SQL 파일과 PHP 스크립트를 내려 받는다). 데이터베이스를 추가하여 원래 알고리즘을 개선하면 다음과 같다.

1. 데이터베이스에서 최신 지식 데이터베이스를 가져온다.
2. 사용자에게 생각하는 답이 "동물, 식물, 광물"인지 묻는다.
3. 사용자 응답에 맞지 않는 후보를 모두 제거한다.
4. 후보가 하나만 남으면 사용자에게 맞는지 확인한다.
   맞다면 지식 데이터베이스를 다시 읽어들이고 새로 시작한다.
   틀렸다면 사용자에게 올바른 답이 무엇인지 그리고 잘못된 대답을 구분하기 위해 어떤 질문이 필요한지 묻는다.
   
   • 사용자가 입력한 질문을 데이터베이스로 보내고 새 질문 ID를 얻는다.
   • 새 질문 ID를 사용하여 프로그램이 추측한 정답 후보와 새로운 정답 후보에 answer 엘리먼트를 추가한다. 그런 다음, 새로운 target 엘리먼트를 지식 데이터베이스에 추가한다.
5. 여전히 후보가 여러 개 남아있다면 가장 많은 항목에 적용되는 질문을 찾는다. (이 부분이 중요하다. 가장 많은 항목에 적용되는 질문을 던지면 가장 많은 항목을 제거할 가능성이 생긴다.)
6. 찾은 질문을 던진다.
7. 3단계로 돌아간다.

프로그램과 데이터베이스가 서로 통신하는 과정에서 핵심은 Prototype 자바스크립트 라이브러리다.

위로

Prototype 소개

여기서는 Prototype 자바스크립트 라이브러리 중에서도 잘 알려진 Ajax 기능을 주로 사용한다. 하지만 Prototype 자바스크립트 라이브러리는 Ajax 외에도 풍부한 기능을 제공한다. 라이브러리는 크게 네 부분으로 나뉜다.

• Class 관리: 클래스와 객체를 쉽게 생성하고 확장하는 방법을 제공한다.
• DOM 관리: 페이지 엘리먼트, 특히 폼을 다루기 쉽다. 엘리먼트를 표시하고 숨기기도 쉽다.
• JSON: 문자열에서 객체를 생성하는 등 자료를 변환하는 안전하고도 빠른 방법을 제공한다.
• Ajax: 라이브러리에서 가장 인기 있는 기능이다. 외부 URL에서 데이터를 가져와 페이지에 표시하기 쉽다. 이 기사에서는 사용하지 않지만, 페이지를 주기적으로 갱신하는 기능도 있다.

Prototype 클래스와 메서드를 사용하려면 Prototypejs.org 웹 사이트에서 최신 버전을 다운로드한 후 HTML 페이지를 Listing 9처럼 수정한다.

                
<html>
<head>
<title>E4X mindreader</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript; e4x=1" src="e4x.js"></script>
...

이제 몇 가지 간단한 작업을 수행해 보자.

위로

폼 관리

가공하지 않은 DOM 함수만으로도 웹 페이지 내용을 조작할 수 있지만, Prototype은 더욱 편리한 함수를 제공한다. 예를 들어 $() 함수는 페이지 내 엘리먼트를 가리킨다. 즉 $('answerFormDiv')는 ID가 answerFormDiv인 요소를 뜻한다. 이 함수를 사용하면 Part 1에서 구현했던 DOM 코드가 아주 깔끔해진다. 예를 들어 document.getElementById("displayQuestion").innerHTML = questionDisplay ; 부분은 $("displayQuestion").innerHTML = questionDisplay ;으로 대체할 수 있다.

또한 $F() 함수를 사용하면 폼 엘리먼트에 접근하기 쉽다. 예를 들어 newTarget = document.getElementById("targetForm").elements[0].value; 부분을 newTarget = $F("newTargetDisplay");으로 대체할 수 있다.

위 함수는 HTML 엘리먼트에서 ID 속성을 사용한다. 따라서 HTML 페이지를 구현할 때는 ID 속성을 빼먹지 않도록 한다.

이제 프로그램 뒷단에 데이터베이스를 연결해 보자.

위로

지식 데이터베이스 요청하기

지식 데이터베이스를 가져오려면 Prototype의 Ajax.Request 객체를 사용한다. 이 객체를 사용하여 HTTP 요청을 보낸 후 결과에 따라 새 함수를 호출한다. 여기서는 지식 데이터베이스를 표현하는 XML 문자열을 요청한다. 그런 다음, XML 문자열로 XML 객체를 생성한다. 구체적인 방법은 Listing 10을 참조한다.

                
function get_knowledge_base(){
 
  new Ajax.Request("knowledgebase.php",
      {method: "get",
       parameters: {getkb: 'YES'},
       onSuccess: function(transport){
           kstring = transport.responseText;
           knowledgeBase = new XML(kstring);
           start_over();
       }
      })    
}

Ajax.Request 객체를 생성할 때는 상당한 자료를 인수로 넘긴다. 첫째 인수는 HTTP 요청을 보내려는 URL이다. 호스트 이름을 지정해도 되지만, 기본적으로 Ajax 요청은 요청받는 URL과 요청하는 페이지의 서버와 포트가 같다고 가정한다. 그래서 여기서는 상대적인 URL만 지정한다.

다음으로 GET 메서드를 사용한다. 메서드 인수는 getkb 하나이고 인수 값은 YES다. 잠시 후 보겠지만, 필요하다면 parameters 안에 여러 인수를 지정해도 된다.

이 함수에서 가장 중요한 부분은 onSuccess 핸들러라고 하겠다. 이 핸들러는 요청이 성공했을 때 객체가 취할 동작을 지정한다. (Prototype은 핸들러를 일곱 개까지 지원하므로 온갖 상황에 대처할 수 있다.) 요청이 성공하면 스크립트는 요청에서 텍스트 부분(XML 문자열)을 추출한 후 새로운 XML() 객체를 생성한다. 이 XML() 객체가 바로 지식 데이터베이스다. 모든 단계를 끝낸 후에는 start_over() 함수를 호출하여 페이지를 다시 시작한다.

이 파일을 저장해서 페이지를 다시 띄우면, 두 가지 차이점을 제외하고 프로그램은 Part 1과 똑같이 돌아간다. 첫째, alert() 호출을 제거하지 않았다면 이제는 지식 저장소로 사용되는 새로운 데이터베이스 내용이 출력된다. 둘째, 다른 사용자가 통합 데이터베이스를 수정하면 현재 사용자도 늘어난 정보를 공유한다.

새로운 정보 이야기가 나왔으니, 사용자가 새 정보를 입력하는 방법을 살펴보자.

위로

새 질문 추가하기

Prototype이 제공하는 Ajax 함수를 사용할 때는 당연한 말이지만 함수가 비동기식이라는 사실에 주의한다. 즉 요청을 보낼 때는 결과에 대응할 방법도 명시해야 한다. 그냥 요청만 보내고 기다리지 못한다. 응답이 돌아오면 어떻게 하라고 구체적으로 알려줘야 한다. 이런 이유로 Listing 11에서 보듯이 add_new_question() 함수를 두 부분으로 나눈다. 첫째 부분은 질문을 지식 데이터베이스에 추가하고 질문 ID를 받는다. 질문 ID가 없으면 새 정답 후보를 추가하지 못하므로 먼저 질문 ID를 기다려야 한다.

                
function add_new_question(){

    var newQuestion = $F('newQuestion');
    var newAnswer = $F('newAnswer');

    var thisQuestionId;

      new Ajax.Request("knowledgebase.php",
      {method: "get",
       parameters: {getkb: 'NO', question: newQuestion},
       onSuccess: function(transport){
           thisQuestionId = transport.responseText;
           finish_adding_new_question(newQuestion, newAnswer, thisQuestionId);
       }
      })

}

코드는 별로 복잡하지 않다. 먼저, 폼에서 새 질문과 답을 추출한 후 PHP 파일로 보낸다. 이 때 PHP 파일로 넘기는 매개변수는 두 개인데 각 쌍을 쉼표(,)로 분리한다.

그런 다음 함수는 응답을 기다린다. 응답이 돌아오면, 즉 새 질문 ID가 반환되면 나머지 절반을 실행한다. 코드는 Listing 12와 같다.

                
function finish_adding_new_question(newQuestion, newAnswer, thisQuestionId){  

    var newQuestionXML = <question id={thisQuestionId}>
          <display>{newQuestion}</display>
          <answerOption>Yes</answerOption>
          <answerOption>No</answerOption>
       </question>;

    var oldAnswer = "Yes";
    if (newAnswer == "Yes"){
        oldAnswer = "No";
    }

    new Ajax.Request("knowledgebase.php",
      {method: "get",
       parameters: {addAnswers: 'YES', 
                    old_target_id: currentGuessId,
                    old_answer: oldAnswer,
                    target_display: newTarget,
                    question_id: thisQuestionId,
                    new_answer: newAnswer},
       onSuccess: function(transport){
           get_knowledge_base();
       }
      })
}

앞서와 마찬가지로, 질문 요소를 생성한 후 새 정답 후보에 넣을 답(newAnswer)과 프로그램이 추측한 정답 후보에 넣을 답(oldAnswer)을 결정한다. 그런 다음 새 요청을 보낸다. 여기서 요청으로 넘기는 다중 매개변수에 주목한다. 새 정답 후보를 추가하고 기존 정답 후보를 수정하는 데 필요한 모든 정보를 PHP 스크립트로 넘긴다.

요청이 성공하면 지식 데이터베이스를 다시 요청해서 최신 정보를 가져온다.

위로

마무리와 다음 단계

이 기사에서 구현한 프로그램을 인공 지능이라고 부르기까지는 어렵지만, 사용자를 즐겁게 하기에는 충분하다. 사용자가 지식 데이터베이스에 없는 항목을 떠올려서 게임을 할 때마다 프로그램은 새로운 항목과 적절한 질문/답을 데이터베이스에 추가한다. Prototype 자바스크립트 라이브러리를 사용하면 게임을 새로 시작할 때마다 최신 데이터베이스를 읽어오므로 게임은 항상 최신 상태를 유지한다.

물론, 프로그램에 문제가 없지는 않다. 이 기사를 쓰는 현재로는 지식 데이터베이스 크기가 매우 작다. 하지만 많은 사용자가 게임을 하면서 많은 항목을 추가한다면 전체 데이터베이스를 내려받는 데 걸리는 시간이 늘어날지도 모른다. 하물며 새로 게임을 시작할 때마다 데이터베이스를 내려받으려면 성능 문제가 걸림돌이 될지도 모른다.

해결책은 여러 가지다. 가장 간단한 해결책은 관련 있는 자료만 내려받는 방법이다. 예를 들어 첫 번째 질문 “animal, vegetable, mineral”을 하드 코딩한 후 사용자 답변을 통과하는 정답 후보만 내려받는다. 그러면 내려받는 자료 양이 1/3로 줄어든다. 결국 데이터베이스가 너무 커지면 브라우저가 아니라 서버측에서 처리하는 편이 더 효율적이지만, 서버측 처리는 이 기사에서 다루는 범위를 벗어난다. 여기서는 E4X와 Prototype을 사용하여 간단한 스무고개 프로그램을 구현해 보았다.

위로

다운로드 하십시오

	다운로드 방식에 대한 정보

참고자료

• 응용 프로그램 데모: 이 기사에서 구현하는 스무고개 응용 프로그램이다. 완성된 응용 프로그램을 직접 사용해본다.
  
  
• E4X 명세 (PDF 파일, 1.81MB): 공식적인 E4X(ECMAScript for XML) 문서를 읽어본다. E4X는 ECMAScript에 원시 자료 유형으로 XML 지원을 추가한 프로그래밍 언어 확장이다.
  
  
• Ajax and scripting Web Services with E4X (Paul Fremantle, Anthony Elder, developerWorks, 2005년 4월): 이 기사에서는 E4X와 자바스크립트를 좀더 복잡하게 사용해서 웹 서비스 요청을 만든다.
  
  
• 예제 지식 데이터베이스: 스무고개 응용 프로그램을 위한 최신 지식 데이터베이스를 내려 받을 수 있다.
  
  
• 20q.net: 신경망을 사용하여 진짜 스무고개 응용 프로그램을 시도해 본다.
  
  
• 스무고개 게임: 인간과 스무고개 게임을 진행하는 전략을 소개한다.
  
  
• 이진 검색 알고리즘: 위키백과에 나온 내용으로, 정렬된 목록에서 특정 값을 찾아내는 알고리즘이다.
  
  
• Tutorial: Build apps using Asynchronous JavaScript with XML (Naveen Balani and Rajeev Hathi, developerWorks, 2005년 11월): Ajax(Asynchronous JavaScript with XML)를 사용하여 웹 응용 프로그램을 설계하고 개발하는 방법을 소개한다.
  
  
• Ajax와 XML: 다섯 가지 Ajax 안티 패턴(anti-pattern) (한글) (Jack Herrington, 한국 developerWorks, 2007년 5월): Ajax를 사용할 때 피해야 할 구현 관례를 소개한다.
  
  
• Ajax와 XML: 다섯 개의 일반적인 Ajax 패턴 (한글) (Jack Herrington, 한국 developerWorks, 2007년 4월): 흔히 사용하며 작업에 유용한 Ajax 설계 패턴 다섯 가지를 소개한다.
  
  
• 자바 개발자를 위한 Ajax: 동적 자바 애플리케이션 구현 (한글) (Philip McArthy, 한국 developerWorks, 2005년 9월): Ajax를 사용하여 동적 웹 응용 프로그램을 생성하는 혁신적인 방법을 소개한다.
  
  
• IBM XML 인증 사이트: XML과 관련 기술 분야에서 IBM 인증 개발자가 되는 방법을 안내한다.
  
  
• XML 기술 라이브러리: 기술 자료, 정보, 튜토리얼, 표준, IBM 레드북 등 다양한 자료를 제공한다.
  
  
• developerWorks 기술 행사와 웹 이벤트: 기술 동향 세션을 놓치지 말기 바란다.
  
  
• 온라인 기술 서점: 다양한 기술 관련 서적을 제공한다.
  
  

• Prototype 라이브러리: Ajax 라이브러리를 내려받아 자바스크립트 프레임워크와 클래스 기반의 동적 웹 응용 프로그램 제작을 위한 쓰기 쉬운 프레임워크를 테스트해보자.
  
  
• IBM 평가판 소프트웨어: developerWorks에서 직접 내려 받아 다음번 프로젝트에 활용하자.
  
  

• 포럼에 참여하기.
  
  
• XML 포럼: XML과 관련하여 다앙햔 토론을 나눌 수 있다.
  
  
• developerWorks XML 영역: 생각을 나누자: 항상 여러분의 의견을 환영한다. 기사를 읽은 후 의견을 보내주기 바란다. 중재는 XML 영역 편집자들이 맡는다.
  
  
• developerWorks developerWorks 블로그: 블로그를 살펴보고 developerWorks 공동체에 참여하자.

필자소개

		Nicholas Chase는 루슨트 테크놀로지즈, 썬 마이크로시스템즈, 오라클, 템파 베이 버커니어스(프로 미식축구 팀)과 같은 회사의 웹 사이트 개발에 참여했다. 그는 또한 고등학교 물리 교사, 저준위 핵 폐기물 시설 관리자, 온라인 SF 잡지 편집자, 멀티미디어 엔지니어, 오라클 강사, 어느 통신 회사의 CTO이기도 하다. XML Primer Plus(Sams)를 비롯하여 여러 책을 집필했으며, 세컨드 라이프라는 가상 현실 컨텐츠와 응용 프로그램을 전문적으로 개발하는 InterSection Unlimited 사 파트너다. 세컨드 라이프에서 Chase Marellan으로 Chase를 찾아보기 바란다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us

위로