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

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

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

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

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

My developerWorks：

나의 통지：

로그아웃

언어 선택：

PHP, XML, jQuery로 순간 검색 만들기

Ajax를 사용하여 웹 애플리케이션에 "인스턴트" 기능을 빌드하는 방법 학습하기

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

A senior software engineer with more than 20 years of experience, Jack Herrington is the author of three books: Code Generation in Action, Podcasting Hacks, and PHP Hacks. He is also the author of more than 30 articles.

요약： jQuery, XML 및 PHP를 결합하여 웹 사이트에 "순간 검색" 스타일 기능을 빌드하십시오. 이 기사에서 찾는 코드를 원하는 대로 선택하여 사용할 수 있습니다.

여기에 태그 달기!

원문 게재일: 2010 년 11 월 09 일
번역 게재일: 2011 년 3 월 08 일
난이도: 중급
원문: 보기
PDF: A4 and Letter (930KB | 16 pages)Get Adobe® Reader®
페이지뷰： 5528 회
의견：

순간 검색(Instant)으로 시작하기

자주 사용하는 약어

Ajax: Asynchronous JavaScript + XML
CSS: Cascading Stylesheets
DOM: Document Object Model
HTML: HyperText Markup Language
JSON: JavaScript Object Notation
UI: User Interface
URL: Uniform Resource Locator
XML: Extensible Markup Language

입력하는 동안 결과를 보여주는 새로운 검색의 항샹 기능인 Google의 순간 검색(Instant) 기능은 수많은 논쟁을 불러일으켰고, 그 원인이 무엇인지는 쉽게 알 수 있다. 결과를 얻기 위해 시작하는 일은 입력만 하면 된다. 결과를 보기 위해 Enter 키를 누른 후 검색을 수정하고 Enter를 다시 누를 필요가 없다. 입력하는 동안 바로 나타난다. 아직 해 본 적이 없다면 한 번 시도해 보자. 그렇게 작은 변화로 유용성 면에서 엄청난 차이가 날 수 있다는 것은 놀라운 일이다.

순간 검색 기능의 이러한 유형에 대해 훌륭한 점은, 특히 jQuery(참고자료 참조)와 같이 훌륭한 클라이언트측 도구를 사용할 때에 구현하기에 간편하다는 점이다. 이 기사에서는 간단한 검색 엔진을 빌드하기 위한 프로세스를 따른 후에 그 엔진에 대해 인스턴트 검색 사용자 인터페이스를 빌드한다.

검색하는 데이터를 받으면서 모든 일이 시작된다.

위로

데이터 설정하기

이 기사를 위해 The Simpsons(심슨 가족)의 방송분들을 검색하기로 결정한다. The Simpsons 방송분, 제목, 시즌, 방송분 번호, 방영 날짜 및 방송분 요약이 모두 들어있는 XML 파일(소스 다운로드에 포함됨)을 모았다. 목록 1에서 XML의 일부분을 볼 수 있다.

목록 1. XML 데이터 소스

<?xml version="1.0" encoding="UTF-8"?>
<episodes>
  <episode title='Simpsons Roasting on an Open Fire' episode='1' season='1' 
  aired='17 December 1989'>
     Christmas seems doomed for the Simpson family when Homer receives no
    Christmas Bonus. Homer becomes a mall Santa Claus, hoping to make money and
    bring Marge, Bart, Lisa, and baby Maggie, a happy holiday.
  </episode>
   ...
</episodes>

실로 엄청나게 큰 파일로서 용량이 840K 정도가 된다. The Simpsons가 22년이라는 놀라울 정도로 긴 시간 동안 지속되었으므로 당연한 결과이다.

다음으로 할 일은 XML 구문 분석과 검색을 수행하는 PHP 클래스를 쓰는 것이다. 이 클래스의 이름은 Simpsons이며, 목록 2에 있다.

목록 2. Simpsons 검색 클래스

<?php
class Simpsons {
 private $episodes = array();
 public function __construct() {
   $xmlDoc = new DOMDocument();
   $xmlDoc->load("simpsons.xml");
 foreach ($xmlDoc->documentElement->childNodes as $episode)
   {
     if ( $episode->nodeType == 1 ) {
      $this->episodes []= array( 
      'episode' => $episode->getAttribute( 'episode' ),
      'season' => $episode->getAttribute( 'season' ),
      'title' => $episode->getAttribute( 'title' ),
      'aired' => $episode->getAttribute( 'aired' ),
      'summary' => $episode->nodeValue );
     }
   }
 }
 public function find( $q ) {
   $found = array();
   $re = "/".$q."/i";
   foreach( $this->episodes as $episode ) {
     if ( preg_match( $re, $episode['summary'] ) || 
        preg_match( $re, $episode['title'] ) ) {
     $found []= $episode;
   }
   }
   return $found;
 }
}
?>

클래스에 대한 생성자는 PHP에 표준이 되는 XML DOM 라이브러리를 사용하여 방송분 정보의 XML 파일을 읽는다. 루트 노드의 모든 하위를 통해 반복되어, 시즌, 제목, 방영 날짜 및 방송분 속성과 요약이 들어있는 노드의 텍스트를 추출한다. 그러면 그러한 모든 데이터를 방송분 배열에 해시 테이블로 추가하였으며, 이는 멤버 변수이다.

find 함수가 제목과 요약에 일치하는 간단한 정규식을 사용하여 일치하는 것을 찾도록 방송분 목록을 검색한다. 일치하는 방송분이 있으면 배열에 추가되며, 그러면 호출자에게 리턴된다. 배열이 공백이면 일치하는 것을 찾을 수 없는 것이다.

그 데이터를 가지고 취하는 다음 단계는 순간 검색 UI가 데이터를 검색하도록 호출하는 Ajax 응답자를 빌드하기 시작하는 것이다.

위로

Ajax 응답 페이지 작성하기

UI의 첫 번째 버전은 Ajax 요청에 대해 HTML 응답을 사용한다. 이 접근방식은 순간 검색 UI를 구현하는 가장 간편한 방법이다. 순간 검색 UI 웹 페이지는 그 검색 용어를 취하여 그 용어를 사용하는 서버로 Ajax 요청을 작성한다. 그러면 서버는 응답을 구성하는 HTML 블록을 포맷하고 이를 페이지로 다시 보낸다. 순간 검색 UI 웹 페이지에서 코드는 하나의 간편한 호출로 페이지의 일부를 업데이트된 HTML로 바꾼다.

기사의 뒤 부분에서 서버로부터의 하나의 XML 응답과 하나의 JSON 응답을 사용하여 시연하지만, 지금은 간단히 하기 위해서 HTML 버전으로 시작할 것이다.

첫 번째로 필요한 것은 HTML 응답 페이지이다. 이 페이지는 요청에서부터 쿼리 문자열을 취한다. Simpsons 클래스를 호출하는 문자열을 사용하여 방송분들을 검색한다. 그 후에 HTML로 리턴되는 방송분 배열을 포맷한다. 이에 대한 코드는 목록 3에 있다.

목록 3. HTML Ajax 응답 페이지

<?php
include 'Simpsons.php';

$s = new Simpsons();
$episodes = $s->find( $_REQUEST['q'] );
if ( count( $episodes ) == 0 ) {
?>
No results found
<?php	
} else {
?>
<table>
<?php foreach( $episodes as $e ) { ?>
<tr><td class="episode"><b><?php echo( $e['title'] ) 
?></b> - 
 Season <?php echo( $e['season'] ) ?> 
 Episode <?php echo( $e['episode'] ) ?> - 
 Aired on <?php echo( $e['aired'] ) ?></td></tr>
<tr><td class="summary"><?php echo( $e['summary'] ) 
?></td></tr>
<?php } ?>
</table>
<?php
}
?>

목록 3의 맨 위에 Simpsons 클래스가 포함된다. 코드는 그의 새 인스턴스를 작성하고 찾기 호출을 한다. 그러면 응답이 공백인 것처럼 보이며, 그러한 경우 "No Results Found(결과를 발견할 수 없음)"을 리턴한다. 그렇지 않으면 이는 결과를 루프하고 결과의 테이블을 함께 모은다.

페이지를 테스트하려면 간단히 웹 브라우저로 이동하여 그 페이지를 요청한다. 그림 1에서 출력을 볼 수 있다.

그림 1. HTML Ajax 응답 페이지
HTML Ajax 응답 페이지의 화면 캡처

이제는 순간 검색 UI 빌드를 시작하기 위해 필요한 것이 모두 마련되었다.

위로

순간 검색 UI 빌드하기

JavaScript jQuery 라이브러리를 사용하여 순간 검색 UI를 놀라울 정도로 간편하게 빌드한다. 목록 4를 살펴보면 필자가 말하는 것을 확인할 수 있다.

목록 4. HTML 응답을 사용하는 순간 검색 페이지

<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - HTML Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
$(document).ready(function() {
$('#term').keyup(function() {
  $.get('search_html.php?q='+escape($('#term').val()), function(data) {
    $('#results').html(data);
  } );
} );
} );
</script>
</body>
</html>

출력이 보기 좋도록 목록 4의 페이지의 맨 위에 jQuery 라이브러리 및 CSS 스타일시트가 포함된다. 페이지의 본문은 검색 용어에 대한 입력 필드와 출력을 보유하는 결과 div가 포함된다.

다량의 작업이 페이지의 맨 아래에서 JavaScript 섹션에서 수행된다. 이는 문서에서 ready 함수를 호출하여 시작된다. 이 호출은 페이지가 준비될 때까지 내부 JavaScript가 실행되지 않도록 보장한다. 내부 JavaScript는 검색 용어 필드에서 키 누름을 모니터하는 검색 용어 입력 오브젝트에서 keyup 함수를 사용한다. 텍스트 필드가 변경될 때에 Ajax get 메소드가 서버로 호출된다. 그리고 그 호출로부터의 데이터 응답은 html 함수를 사용하여 결과 요소를 입력하는 데 사용된다.

JavaScript 코드가 행 노이즈(noise)처럼 보여도 괜찮다. 코드가 선을 넘어 이동해야 하기 때문에 코드 크기를 작게 유지하는 것이 최선이므로 실제로는 JavaScript를 사용하는 최첨단이다.

jQuery 라이브러리 없이 이 모든 작업을 수행할 수 있지만, 라이브러리 사용의 값은 코드가 간결하고 모든 크로스 플랫폼 작업이 사용자를 위해 수행된다. Internet Explorer® 대 Safari 또는 Firefox에 대해 걱정하지 않아도 된다. 코드를 한 번 쓰기만 하면 이는 어디서나 작동한다.

라이브러리를 테스트하기 위해 웹 브라우저에 순간 검색 UI를 도입한다. 그림 2에서 이와 같은 내용을 볼 수 있다.

그림 2. 검색 용어에 입력된 몇 개의 문자들
검색 용어에 입력된 몇 개의 문자들로만 검색하는 화면 캡처

그림 2는 몇 개의 문자들을 입력한 후의 인터페이스를 보여준다. "frink"라는 용어의 입력을 완료한 후에 그림 3에 결과가 표시된다.

그림 3. 용어를 완성한 후
용어가 완전히 입력된 후에 결과의 화면 캡처

그림 3은 두 개의 방송분들의 제목이나 시놉시스에 표시되는 "frink"를 보여준다. 데이터가 이렇게 멍청하다니! Frink 교수(아직까지 이 프로그램에서 최고의 인물)는 두 개의 방송분들보다 훨씬 많이 나온다. 그러나 이는 여전히 매우 좋은 재료이다. XML의 840K에 서버 코드 구문 분석까지도 로컬 시스템에서의 응답 시간은 훌륭하다.

이제는 각 키 입력과 실제로 요청할 때와의 사이에 지연을 넣어 요청의 수를 조절하려 할 수 있다. 이를 수행하기 위해 업데이트된 코드는 목록 5에 있다.

목록 5. 지연된 HTML 응답을 사용하는 순간 검색 페이지

<html><head>
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="jquery-1.4.2.min.js"></script>
<title>Instant Search - HTML Based With Delay</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<div id="results">
</div>
<script>
delayTimer = null;

function getResults() {
  $.get('search_html.php?q='+escape($('#term').val()), function(data) {
    $('#results').html(data);
  } );
  delayTimer = null;
}

$(document).ready(function() {
$('#term').keyup(function() {
  if ( delayTimer )
     window.clearTimeout( delayTimer );
  delayTimer = window.setTimeout( getResults, 200 );
} );
} );
</script>
</body>
</html>

이 코드는 사용자가 키를 누를 때에 타이머를 작성한다. 그 타이머가 200밀리초 이후에 꺼지면 요청이 작성된다. 타이머가 꺼지기 전에 한 번 더 키 입력을 수행하면 원본 타이머가 취소되고 새 타이머가 작성된다. 결과는 사용자가 입력을 중지한 지 200밀리초 후에 꺼진다. 인터페이스는 여전히 원본과 같이 깔끔하게 보이지만, 특히 사용자가 빠르게 입력할 때에 서버로 작성되는 요청의 수가 엄청나게 줄어든다.

거기에서 중지할 수도 있지만, 이 인스턴트 프로세스를 수행하기 위해 실제로는 방법이 두 개 더 있다.

위로

XML로 마이그레이션하기

첫 번째 방법은 서버에서 클라이언트로 전송 구문으로 XML을 사용하는 것이다. 이 생각은 어느 프로세스나 쿼리를 만들기 위해 사용할 수 있고 클라이언트가 XML을 읽고 원하는 방식으로 포맷할 수 있을 정도로 영리하여 일반 XML 엔드포인트를 서버가 제공한다는 것이다.

XML에 대해 변경하려면 먼저 새 서버 페이지를 목록 6과 같이 작성한다.

목록 6. XML Ajax 페이지

<?php
include 'Simpsons.php';

header( 'Content-type: text/xml' );

$s = new Simpsons();
$doc = new DOMDocument();
$root = $doc->createElement( 'episodes' );
$doc->appendChild( $root );
foreach( $s->find( $_REQUEST['q'] ) as $episode ) {
   $el = $doc->createElement( 'episode' );
   $el->setAttribute( 'title', $episode['title'] );
   $el->setAttribute( 'episode', $episode['episode'] );
   $el->setAttribute( 'season', $episode['season'] );
   $el->setAttribute( 'aired', $episode['aired'] );

   $tn = $doc->createTextNode( $episode['summary'] );
   $el->appendChild( $tn );

   $root->appendChild( $el );
}
print $doc->saveXML();
?>

검색은 정확히 똑같이 유지되지만 결과를 포맷하는 방법은 변경된다. 이제 코드는 XML 문서를 작성하고 리턴된 모든 데이터를 보유하는 노드를 이에 추가한다. 그 후에 스크립트의 끝부분에서 문자열로 XML DOM을 간단히 저장한다. 스크립트의 맨 위에 HTML이 아니라 XML을 내보낸 대로 콘텐츠 유형을 text/xml로 설정한 것도 참고하자.

웹 브라우저에서 이 페이지로 탐색하면 그림 4와 같은 모양을 볼 수 있다.

그림 4. XML 응답 페이지
XML 응답 페이지의 화면 캡처

일부 브라우저는 그럼에도 불구하고 조금 더 구조화된 방식으로 리턴된 텍스트를 보여줄 수 있다. 원본 소스 XML을 보려는 경우 그림 5의 창과 같은 모양을 보기 위해 View - Source를 선택할 수 있다.

그림 5. XML 응답 페이지 소스
XML 응답 페이지 소스의 화면 캡처

확인한 대로 스크립트가 어느 정도 훌륭하게 포맷된 XML을 작성하여 클라이언트측 코드의 새 조각으로 사용할 준비가 되었다.

HTML을 직접 사용하는 것이 아니라 XML을 구문 분석하는 새 클라이언트측 코드는 목록 7에 있다.

목록 7. XML을 사용하는 순간 검색 페이지

<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - XML Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<table id="results">
</table>
<script>
$(document).ready( function() {
$('#term').keyup( function() {
 $.get('search_xml.php?q='+escape($('#term').val()), function(data) {
html = '<table id="results">';
$(data).find('episode').each( function() {
     var ep = $(this);
         html += '<tr><td class="episode"><b>'+
         ep.attr('title')+'</b>&nbsp;';
         html += 'Season '+ep.attr('season')+'&nbsp;';
         html += 'Episode '+ep.attr('episode')+'&nbsp;';
         html += 'Aired '+ep.attr('aired')+'</td></tr>';
         html += '<tr><td class="summary">'+
         ep.text()+'</td></tr>';
   } );
   html += '</html>';
   $('#results').replaceWith( html );
 } );
} );
} );
</script>
</body>
</html>

키 입력을 모니터하고 Ajax 요청을 작성하는 클라이언트 코드는 거의 비슷하다. 차이점은 HTML 데이터가 아니라 XML 데이터를 받는 다른 URL이다.

데이터를 받은 후 코드는 jQuery를 사용하여 모든 방송분 태그를 찾는다. 그러면 이는 XML의 많은 부분을 포맷하고 replaceWith 함수를 사용하여 이전 테이블을 새 것으로 바꾼다. jQuery로 인해 이 코드는 브라우저의 네이티브 DOM 함수를 사용하는 것보다 사용하기에 훨씬 더 간편하다.

데이터를 전송하는 또 다른 방법은 JSON(JavaScript Object Notation)을 사용하는 것이다.

위로

JSON으로 마이그레이션하기

JSON은 Web 2.0 세상에서 데이터를 이동하는 가장 대중적인 방법이다. 리턴된 JavaScript 코드를 평가하는 일만 하면 되기 때문에 브라우저가 읽기에 간결하고 간편하며 신속하다. 이는 또한 목록 8에서 Ajax 검색 페이지의 JSON 버전에서 확인한 대로 JSON을 작성하기에도 매우 간편하다.

목록 8. JSON Ajax 페이지

<?php
include 'Simpsons.php';

header( 'Content-type: application/json' );

$s = new Simpsons();
print json_encode( $s->find( $_REQUEST['q'] ) );
?>

리턴된 배열을 JSON 코드로 변환하기 위해 json_encode 함수만 사용해야 한다. 궁금하면 JSON을 PHP 기본 유형으로 다시 변환할 수 있는 json_decode 함수도 있다. 대부분의 대중적인 언어는 기본 데이터 구조와 JSON 간에 변환하기에 이만큼 간편한 JSON 메커니즘이 있다.

브라우저에서 JSON 페이지를 살펴보면 그림 6의 응답 페이지와 비슷한 모양을 볼 수 있다.

그림 6. JSON 응답 페이지
JSON 응답 페이지의 화면 캡처

이 페이지는 육안으로 보기에는 좋아 보이지 않지만, 브라우저의 JavaScript 인터프리터가 이 페이지를 읽기에 매우 간편하다.

JSON 포맷된 출력을 읽는 해당 순간 검색 UI 웹 페이지 코드는 목록 9에 있다.

목록 9. JSON 순간 검색 UI

<html><head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Instant Search - JSON Based</title>
</head>
<body>
Simpsons Search: <input type="text" id="term" />
<table id="results">
</table>
<script>
$(document).ready( function() {
$('#term').keyup( function() {
 $.get('search_json.php?q='+escape($('#term').val()), function(data) {
   html = '<table id="results">';
   $.each( data, function( ind, ep ) {
         html += '<tr><td class="episode"><b>'+ep.title+'</b>&nbsp;';s
         html += 'Season '+ep.season+'&nbsp;';
         html += 'Episode '+ep.episode+'&nbsp;';
         html += 'Aired '+ep.aired+'</td></tr>';
         html += '<tr><td class="summary">'+ep.summary+'</td></tr>';
   } );
   html += '</html>';
   $('#results').replaceWith( html );
 } );
} );
} );
</script>
</body>
</html>

이 코드는 리턴된 배열에서 jQuery each 함수를 사용한 후에 점(dot) 노테이션을 사용하여 데이터의 모든 중요한 키(즉, 제목, 방송분, 요약 및 기타 등등)에 액세스할 수 있다는 차이점이 있지만 XML 코드와 매우 유사하다.

이제 자체적인 작업의 시작 지점으로 사용할 수 있는 순간 검색 기능의 기본적인 구현을 갖게 되었다.

위로

덧붙이는 내용

이 구현에는 개발자들이 Google에서 수행한 것과 세 가지의 주요 차이점들이 있다. 첫 번째는 스케일링이다. 그들은 이미 하루에 수 십 억 개의 검색을 처리하고 있었고, 이제 각각의 키 입력으로 수 십 억개의 개별적인 작은 검색들을 처리하고 있다. 이와 관련하여 수많은 문제와 해결책이 있지만, 이 경우에 최소한 한 가지 잊지 말아야 할 사항은 바로 브라우저 캐시이다. 사용자가 동일한 용어를 두 번 입력하는 경우, 브라우저 캐시로 인해 하나의 요청만 실제로 수행되고, 두 번째로 요청되면 브라우저는 캐시된 데이터를 리턴하기 때문이다.

Google이 수행하는 또 다른 작업은 프리페치 결과이다. 예를 들어, "mov"를 입력하면 "movies"를 찾고 있다는 힌트를 얻고 검색을 수행하며, 누락한 "ies"는 회색 텍스트로 표시한다.

세 번째 차이점은 페이징을 지원하는 것이며, 이는 비교적 간편하게 해결된다. 페이지의 맨 아래에 페이지 링크에 대해 일부 JavaScript를 추가하고 사용자가 첫 번째 페이지에서부터 이후 페이지로 탐색하도록 클릭할 때에 그 스크립트를 호출하기만 하면 된다.

위로

결론

Google의 순간 검색 UI 기능은 정말 즉각적이다. 혁신적인가? 실제로는 아니다. 하지만 유용성의 심오한 결과가 들어있는 하나의 작은 단계이다. 이 기사에서 확인한 대로 작동의 기본은 XML, PHP 및 jQuery와 같이 표준 도구를 사용하여 구현하기에 어렵지는 않다.

자체적인 프로젝트에서 여기의 코드를 사용할 수 있기를 바란다. 그렇게 하는 경우에 알려주기 바란다. 이를 어떻게 사용하는지 살펴보고 싶다.

위로

다운로드 하십시오

설명	이름	크기	다운로드 방식
Source code for article	src.zip	82KB	HTTP

다운로드 방식에 대한 정보

참고자료

교육

jQuery: 사이트에서 모든 훌륭한 플러그인을 비롯하여 더 자세히 알아보자.
XML: XML에 대한 표준 페이지의 자세한 정보를 확인하자.
JSON.org: 이 훌륭한 장소를 방문하여 JSON 작동법과 이를 지원하는 언어에 대해 자세히 알아보자.
PHP 홈 페이지: PHP 개발자들을 위한 훌륭한 자원을 방문하자.
필자의 더 많은 기사(Jack Herrington저, developerWorks, 2005년 3월 - 현재): Ajax, JSON, PHP, XML 및 다른 기술에 대한 기사를 읽어보자.
developerWorks의 XML 영역: XML 영역에서 기술 향상에 도움이 되는 참고자료를 얻을 수 있다.
My developerWorks: developerWorks와 관련된 경험을 개인화할 수 있다.
IBM XML 인증: XML 및 관련 기술에 대한 IBM 인증 개발자가 되는 방법을 찾아볼 수 있다.
XML 기술 자료: developerWorks XML 영역에서 다양한 기술 관련 기사와 팁, 튜토리얼, 표준 및 IBM Redbook을 볼 수 있다. 또한 더 많은 XML 팁을 읽어본다.
developerWorks 기술 행사 및 웹 캐스트: 이러한 세션에 참가하여 최신 기술에 대한 정보를 얻을 수 있다.
Twitter의 developerWorks 페이지: 오늘 가입하여 developerWorks 트윗을 팔로우하자.
developerWorks podcasts: 소프트웨어 개발자의 흥미로운 인터뷰와 토론을 확인할 수 있다.
developerWorks on-demand demos: 입문자를 위한 제품 설치 및 설정 과정에서 숙련된 개발자를 위한 고급 기능의 활용에 이르기까지 다양한 데모를 제공한다.

제품 및 기술 얻기

jQuery 자동 완성 플러그인: 여기에서 시연한 인스턴트 검색 패턴과 유사한 자동 완성 패턴을 시도해보자.
MooTools 및 Prototype.js: jQuery 이외에도 이러한 JavaScript 프레임워크들을 고려하자.
IBM 제품 평가판: IBM SQA Sandbox의 온라인 시험판을 다운로드하거나 살펴보고 DB2®, Lotus®, Rational®, Tivoli® 및 WebSphere®의 애플리케이션 개발 도구 및 미들웨어 제품을 사용해 볼 수 있다.

토론