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 을 패키징하여 다음과 같은 추가 확장을 포함시켰다.

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 폴더가 없음).

그림 2. Dojo Toolkit 을 추가하기 전의 프로젝트 내용

Dojo Toolkit 을 추가하려면 다음 단계를 수행한다.

1. 웹 프로젝트를 선택한다.

a. 왼쪽에 있는 Properties > Project Facets 을 선택한다.

b. 오른쪽 분할창에서 Web 2.0 선택란을 선택한다(그림 3 참조).

그림 3. Web 2.0 기능 추가하기

2. OK 를 클릭한다. Dojo Toolkit 파일이 웹 프로젝트로 복사되는 진행 상황이 표시된다

(그림 4 참조).

그림 4. 설치 진행 상황 확인하기

3. Dojo Toolkit 패싯을 추가한 후에는 WebContent 아래에 dojo 폴더가 표시되어야

한다(그림 5 참조).

그림 5. Dojo Toolkit 패싯을 추가한 이후의 프로젝트 내용

참고자료 섹션의 Java EE 웹 페이지에 Dojo 위젯 추가 링크를 통해 추가 정보를 볼 수 있다.

시간이 많이 소요되는 불필요한 컴파일 생략하기

Dojo Toolkit 라이브러리는 웹 내용에 실제로 추가되기 때문에 프로젝트의 유효성 검증에

포함되며, 결과적으로 빌드를 완료하는 데 필요한 시간이 불필요하게 늘어날 수 있다. Dojo

Toolkit Library 는 자체적으로 검토 및 유효성 검증을 거치므로 전체 WebContent/dojo

폴더를 Rational Application Developer IDE 의 유효성 검증에서 제외하는 것이 안전하다.

빌드 시간을 단축하기 위해 다음과 같이 제외 필터를 작성할 수 있다.

1. 웹 프로젝트를 선택한다.

2. Properties > Validation 을 선택한다. 그러면 마법사가 실행된다.

a. 마법사에서 실행할 유효성 검증기를 선택할 수 있다(그림 6 참조).

b. 규칙도 작성할 수 있다(예를 들어, HTML 및 JSP 에 대한 유효성 검증에서 Dojo

폴더를 제외하는 규칙).

그림 6. 유효성 검증 필터 및 유효성 검증기 목록

3. 제외 규칙을 작성하려면(예를 들어, JSP Content Validator 의 경우) 해당 유효성

검증기의 오른쪽에 있는 줄임표( ) 단추를 클릭하여 Validation Filters 마법사를 실행한다.

4. Add Exclude Group 단추를 클릭한다(그림 7 참조).

그림 7. 제외 그룹 추가하기

5. 왼쪽에서 새로 작성된 Exclude Group 을 선택한다.

6. Add Rule 단추를 클릭한다. 그러면 제외할 항목을 선택할 수 있는 대화 상자가

표시된다.

7. Folder or File name 을 선택하고 Next 를 클릭한다(그림 8 참조).

그림 8. 필터 유형 선택하기

8. 다음으로 Browse Folder 단추를 클릭하고 WebContent 폴더 아래의 dojo 폴더로

이동한다(그림 9 참조).

그림 9. 유효성 검증에서 제외할 폴더 선택하기

9. Finish 를 클릭한다.

10. 결과를 확인한다. Exclude Group 아래에 WebContent/dojo 폴더가 표시되어야

한다(그림 10 참조). OK 를 클릭한다.

그림 10. JSP Content Validator 에서 Dojo 제외하기

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 를 클릭한다.

그림 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 를 클릭한다.

그림 12. 고급 Dojo 구성

최신 Dojo Toolkit 라이브러리가 프로젝트에 복사된다. 파일 복사가 완료되면 다음을 수행하여

버전을 확인한다.

1. Enterprise Explorer 보기에서 웹 프로젝트를 마우스 오른쪽 단추 클릭하고

Properties 를 선택하여 Properties 창을 표시한다.

2. Dojo Toolkit 을 선택한다.

3. Version 을 확인한다.

예제 웹 애플리케이션

첨부된 .zip 파일을 다운로드한다. 이 파일에는 Dojo 라이브러리와 함께 제공되는 수정된 예제

애플리케이션이 포함되어 있으며, 다음 두 파일로 구성되어 있다.

일부 계층 구조 데이터의 대화식 트리를 생성하는 HTML 파일(이 경우에는 일부 샘플

국가가 포함된 대륙)

이 데이터의 저장소로 사용할 JSON(JavaScript Object Notation) 형식의 두 번째 파일

새 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. 업데이트된 프로젝트 내용

가져오기를 완료하고 나면 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. Dojo 라이브러리 dijit: 트리 위젯 예제

학습 내용

이 기사에서는 Rational Application Developer 및 WebSphere Application Server 에

포함된 Dojo 라이브러리를 설치하고 구성하는 방법에 대해 살펴보았다. 그리고 예제 파일을

가져와서 AJAX 웹 애플리케이션을 작성하는 방법도 살펴보았다.

감사의 인사

이 기사를 검토해 준 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 스킬의

진일보에 필요한 참고자료를 읽을 수 있다.

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 소속이다.