1. AJAX 및 Dojo 소개
AJAX(Asynchronous JavaScript and XML) 프로그래밍은 최근 클라이언트측 웹 애플리케이션 개
발에 많이 사용되고 있는 기술로서 사용자의 브라우저와 웹 서버 간에 매번 전체 페이지를 새로
고치지 않고도 동적으로 상호 작용할 수 있는 기능을 제공한다. 이 기술은 유용성이 높기 때문에
Dojo Toolkit, jQuery, Prototype, YUI(Yahoo! User Interface), qooxdoo 등을 포함한 여러 가지 구
현(툴킷, 프레임워크 또는 라이브러리 등의 다양한 명칭으로 사용됨)을 사용할 수 있다.
참고자료 섹션의 링크를 통해 AJAX 의 정의와 사용 가능한 툴킷 또는 라이브러리에 대한 설명을
볼 수 있으며 우선적으로 라이브러리를 사용해야 하는 이유가 잘 설명되어 있는 Dojo 와 YUI 를
비교하는 링크도 볼 수 있다.
IBM® Rational® Application Developer 에서는 유명한 구현 중 하나인 Dojo 라이브러리(IBM®
WebSphere® Application Server Feature Pack for Web 2.0 에 포함됨)를 포함시켜서 AJAX 프로
그래밍을 지원한다.
Rational Application Developer V7.5.5.1 이상에서는 Installation Manager 의 설치 옵션으로
WebSphere Application Server Feature Pack for Web 2.0 이 제공된다. WebSphere Application
Server 7.0 Test Environment 를 설치하기로 선택한 경우에는 Web 2.0 을 포함한 여러 가지
Feature Pack 을 선택할 수 있다(그림 1 참조).
그림 1. Feature Pack for Web 2.0 설치하기
IBM 에서는 Dojo Toolkit 을 패키징하여 다음과 같은 추가 확장을 포함시켰다.

2. • SOAP 엔벌로프 및 RPC(Remote Procedure Call) 작업을 위한 SOAP(Simple Open
Access Protocol) 클라이언트
• ATOM 피드와 피드 입/출력(I/O) 라이브러리 및 dojo.data 기반 데이터 저장소로 사용하
기 위한 APP(ATOM Publishing Protocol)
• dojo.data API 의 구현인 OpenSearch Data Store
• 막대 및 아날로그 게이지와 같은 Gauge Widget
• AJAX 프록시
WebSphere Application Server Feature Pack for Web 2.0 에 대한 자세한 정보는 참고자료 섹션
을 참조한다.
웹 프로젝트에 Dojo Toolkit 설치하기
그림 2 에서는 Dojo Toolkit 을 추가하기 전의 프로젝트 내용을 보여 준다(dojo 폴더가 없음).

3. 그림 2. Dojo Toolkit 을 추가하기 전의 프로젝트 내용
Dojo Toolkit 을 추가하려면 다음 단계를 수행한다.
1. 웹 프로젝트를 선택한다.
a. 왼쪽에 있는 Properties > Project Facets 을 선택한다.
b. 오른쪽 분할창에서 Web 2.0 선택란을 선택한다(그림 3 참조).

4. 그림 3. Web 2.0 기능 추가하기
2. OK 를 클릭한다. Dojo Toolkit 파일이 웹 프로젝트로 복사되는 진행 상황이 표시된다(그
림 4 참조).
그림 4. 설치 진행 상황 확인하기
3. Dojo Toolkit 패싯을 추가한 후에는 WebContent 아래에 dojo 폴더가 표시되어야 한다(그
림 5 참조).

5. 그림 5. Dojo Toolkit 패싯을 추가한 이후의 프로젝트 내용
참고자료 섹션의 Java EE 웹 페이지에 Dojo 위젯 추가 링크를 통해 추가 정보를 볼 수 있다.
시간이 많이 소요되는 불필요한 컴파일 생략하기
Dojo Toolkit 라이브러리는 웹 내용에 실제로 추가되기 때문에 프로젝트의 유효성 검증에 포함되
며, 결과적으로 빌드를 완료하는 데 필요한 시간이 불필요하게 늘어날 수 있다. Dojo Toolkit
Library 는 자체적으로 검토 및 유효성 검증을 거치므로 전체 WebContent/dojo 폴더를 Rational
Application Developer IDE 의 유효성 검증에서 제외하는 것이 안전하다. 빌드 시간을 단축하기
위해 다음과 같이 제외 필터를 작성할 수 있다.
1. 웹 프로젝트를 선택한다.
2. Properties > Validation 을 선택한다. 그러면 마법사가 실행된다.
a. 마법사에서 실행할 유효성 검증기를 선택할 수 있다(그림 6 참조).

6. b. 규칙도 작성할 수 있다(예를 들어, HTML 및 JSP 에 대한 유효성 검증에서 Dojo
폴더를 제외하는 규칙).
그림 6. 유효성 검증 필터 및 유효성 검증기 목록
3. 제외 규칙을 작성하려면(예를 들어, JSP Content Validator 의 경우) 해당 유효성 검증기
의 오른쪽에 있는 줄임표( ) 단추를 클릭하여 Validation Filters 마법사를 실행한다.

7. 4. Add Exclude Group 단추를 클릭한다(그림 7 참조).
그림 7. 제외 그룹 추가하기
5. 왼쪽에서 새로 작성된 Exclude Group 을 선택한다.
6. Add Rule 단추를 클릭한다. 그러면 제외할 항목을 선택할 수 있는 대화 상자가 표시된
다.
7. Folder or File name 을 선택하고 Next 를 클릭한다(그림 8 참조).
그림 8. 필터 유형 선택하기

8. 8. 다음으로 Browse Folder 단추를 클릭하고 WebContent 폴더 아래의 dojo 폴더로 이동
한다(그림 9 참조).
그림 9. 유효성 검증에서 제외할 폴더 선택하기
9. Finish 를 클릭한다.
10. 결과를 확인한다. Exclude Group 아래에 WebContent/dojo 폴더가 표시되어야 한다
(그림 10 참조). OK 를 클릭한다.
그림 10. JSP Content Validator 에서 Dojo 제외하기

9. 11. dojo 라이브러리 폴더에 적용할 다른 관련 유효성 검증기에 대해서도 이 프로시저를 반
복한다(예: JSP Syntax Validator 및 HTML Syntax Validator)).
12. OK 를 클릭하여 Preferences 대화 상자를 종료한다.
Dojo Toolkit 업데이트하기
Rational Application Developer 에서 사용할 수 있는 Dojo Toolkit 라이브러리는 WebSphere
Application Server Feature Pack for Web 2.0 의 일부로 설치된다. 새 버전의 기능 팩이 릴리스될
때 라이브러리에 대한 업데이트도 제공된다.
이 기사의 집필 당시 Feature Pack for Web 2.0 의 최신 버전은 Dojo Toolkit 1.4.1 이 포함된
V1.0.1 이었다.
작업 공간 프로젝트에 반입된 Dojo Toolkit 은 새 Feature Pack for Web 2.0 을 설치할 때 자동으
로 업데이트되지 않는다.
다음 단계에서는 웹 프로젝트에 이미 설치되어 있는 Dojo Toolkit 을 업데이트하는 방법을 보여
준다.
앞에서 살펴본 대로 가져온 dojo 라이브러리의 기본 위치는 WebContent/dojo 폴더이다.
1. Enterprise Explorer 에서 웹 프로젝트를 마우스 오른쪽 단추 클릭하고 Properties 를 선
택한다.
2. Properties 목록에서 Project Facets 을 선택한다.
3. Project Facets 목록에서 Web 2.0 항목을 펼친다(그림 11 참조).
a. Dojo Toolkit 선택란을 해제한다.
b. OK 를 클릭한다.

10. 그림 11. Web 2.0 프로젝트 패싯 펼치기
4. WebContent/dojo 폴더를 제거한다.
5. 단계 1 및 2 를 반복한다.
6. Project Facets 목록에서 Web 2.0 항목을 펼친다.
a. Dojo Toolkit 선택란을 선택한다.
b. Further configuration available 을 클릭한다.
c. 로더와 CSS 가 올바른지 확인한다(그림 12 참조).
i. Dojo Loader 는 dojo/dojo.js 여야 한다.
ii. Dojo CSS 는 dojo/resources/dojo.css 여야 한다.
iii. Dijit CSS 는 dijit/themes/dijit.css 여야 한다.
iv. Theme CSS 는 dijit/themes/tundra/tundra.css 여야 한다.
d. Copy to current project 선택란을 선택한 후 Target Folder 가
WebContent/dojo 인지 확인한다.
e. OK 를 클릭한다.
7. OK 를 클릭한다.

11. 그림 12. 고급 Dojo 구성
최신 Dojo Toolkit 라이브러리가 프로젝트에 복사된다. 파일 복사가 완료되면 다음을 수행하여 버
전을 확인한다.
1. Enterprise Explorer 보기에서 웹 프로젝트를 마우스 오른쪽 단추 클릭하고 Properties
를 선택하여 Properties 창을 표시한다.
2. Dojo Toolkit 을 선택한다.
3. Version 을 확인한다.
예제 웹 애플리케이션
첨부된 .zip 파일을 다운로드한다. 이 파일에는 Dojo 라이브러리와 함께 제공되는 수정된 예제 애
플리케이션이 포함되어 있으며, 다음 두 파일로 구성되어 있다.
• 일부 계층 구조 데이터의 대화식 트리를 생성하는 HTML 파일(이 경우에는 일부 샘플 국
가가 포함된 대륙)
• 이 데이터의 저장소로 사용할 JSON(JavaScript Object Notation) 형식의 두 번째 파일

12. 새 Rational Application Developer 작업 공간을 시작한 후 다음 단계를 수행하여 샘플 웹 애플리
케이션을 작성한다.
1. File > New > Dynamic Web Project 를 클릭한다.
a. 프로젝트 이름을 지정한다.
b. Finish 를 클릭하여 기본값을 모두 승인한다.
c. 프롬프트가 표시되면 웹 Perspective 로의 전환을 승인한다.
2. 새로 작성된 웹 프로젝트를 펼치고 다음을 수행한다.
a. Web Content 폴더를 선택한다.
b. 이 폴더를 마우스 오른쪽 단추 클릭하고 Import > General > Archive File
을 선택한다.
c. 첨부된 파일(DojoTreeSampleSourceFiles.zip)을 다운로드해 놓은 위치로 이동
한다.
3. 이 기사의 웹 프로젝트에 Dojo Toolkit 설치하기 섹션에서 설명한 단계를 수행하여(즉,
Properties > Project Facets > Web 2.0 에서) Dojo 라이브러리를 가져오고 사용한
다.
이제 프로젝트 구조는 그림 13 과 같아야 한다.
그림 13. 업데이트된 프로젝트 내용

13. 가져오기를 완료하고 나면 WebContent 폴더 아래에 새로 가져온 dojo 폴더뿐만 아니라 트리 데
이터가 포함된 countries.json 과 SampleTree.html 이라는 두 개의 파일도 있어야 한다.
4. 데모를 실행하려면 SampleTree.html 파일을 선택한다.
a. 이 파일을 마우스 오른쪽 단추 클릭하고 Run As > Run on Server 를 선택한
다.
b. 이 예제에서는 이전에 설치된 WebSphere Test Environment V7.0 을 사용하므
로 Existing server 를 선택한다.
테스트를 실행한 최종 결과는 그림 14 와 같다. 즉, 대륙 목록이 표시되며 각 대륙을 펼치면 해당
대륙에 속한 국가를 볼 수 있다.

14. 그림 14. Dojo 라이브러리 dijit: 트리 위젯 예제
학습 내용
이 기사에서는 Rational Application Developer 및 WebSphere Application Server 에 포함된 Dojo
라이브러리를 설치하고 구성하는 방법에 대해 살펴보았다. 그리고 예제 파일을 가져와서 AJAX
웹 애플리케이션을 작성하는 방법도 살펴보았다.
감사의 인사

15. 이 기사를 검토해 준 IBM Toronto Lab 의 Tommy Kong 에게 감사의 뜻을 전한다.
다운로드 하십시오
설명 이름 크기 다운로드 방식
Dojo tree sample source files DojoTreeSampleSourceFiles.zip 1.56 KB HTTP
다운로드 방식에 대한 정보
참고자료
교육
• Rational Application Developer 에 대해 자세히 알아보자.
o developerWorks 의 Rational Application Developer for WebSphere Software 페
이지에서 기술 기사 및 여러 관련 참고자료에 대한 링크를 살펴보자.
o Information Center 를 살펴보자.
• 이 기사에서 언급된 다른 Rational 소프트웨어를 살펴보려는 경우에는 developerWorks
Rational 소프트웨어 페이지 또한 좋은 출발점이다.
• IBM Rational Software Delivery Platform 에서 병렬 개발 및 지역적으로 분산된 팀을 위
한 협업 도구와 아키텍처 관리, 자산 관리, 변경 및 릴리스 관리, 통합 요구사항 관리, 프
로세스 및 포트폴리오 관리, 품질 관리를 위한 특수 소프트웨어를 포함한 기타 애플리케
이션에 대해 살펴보자. 제품 매뉴얼, 설치 안내서 및 기타 문서는 IBM Rational Online
Documentation Center 에서 확인할 수 있다.
• 강사가 지도하는 컴퓨터와 웹을 기반으로 하는 Rational 온라인 강의를 살펴보자. 초급에
서 고급까지의 다양한 강의를 통해 Rational 도구에 대한 지식을 쌓고 기술을 연마하자.
이 카탈로그의 강의는 컴퓨터 기반 교육 또는 웹 기반 교육을 통해 구입할 수 있다. 일부
"시작하기" 강의의 경우 무료로 제공된다.
• What is AJAX?: Wikipedia 에서 AJAX 의 간략한 역사를 볼 수 있다.
• Ajax 라이브러리 간의 경쟁: Dojo 대 YUI
• WebSphere Application Server Feature pack for Web 2.0
• WebSphere Application Server Feature Pack for Web 2.0 설치
• 기존 Java EE 웹 페이지에 Dojo 위젯 추가
• developerWorks 의 XML 영역에서 DTD, 스키마 및 XSLT 를 비롯한 XML 스킬의 진일보
에 필요한 참고자료를 읽을 수 있다.

16. • developerWorks 기술 행사 및 웹 캐스트를 통해 다양한 IBM 제품 및 IT 산업 주제에 대한
최신 정보를 얻을 수 있다.
• 무료 developerWorks Live! briefing 을 통해 최신 IBM 제품 및 도구에 대한 정보뿐만 아
니라 IT 업계의 최신 경향까지도 빠르게 확인할 수 있다.
• Twitter 의 developerWorks 페이지를 살펴보자.
• developerWorks on-demand demos 에서는 입문자를 위한 제품 설치 및 설정부터 숙련
된 개발자를 위한 고급 기능까지 망라된 다양한 데모를 제공한다.
제품 및 기술 얻기
• 자신에게 가장 적합한 방법으로 IBM 제품을 평가해 보자. 시험판 제품을 다운로드하거나
온라인으로 제품을 사용해 보거나 클라우드 환경에서 제품을 사용하거나 SOA Sandbox
에서 SOA(Service Oriented Architecture)를 효과적으로 구현하는 방법을 배울 수 있다.
토론
• 토론 포럼에 참여하자.
• My developerWorks 커뮤니티에 참여하자. 개발자가 이끌고 있는 블로그, 포럼, 그룹 및
Wiki 를 살펴보면서 다른 developerWorks 사용자와 의견을 나눌 수 있다.
필자소개
Robert works with the Eclipse and Rational Application Developer Accelerated
Value Program team. He is located at the IBM Toronto Lab.
James 는 Rational Application Developer Accelerated Value Program 팀에서 활동
하고 있 으며 IBM Toronto Lab 소속이다.