Dojo Dojo로 HTML 위젯 개발하기 - 시작하기

시작하기

이 튜토리얼을 위한 개발환경을 설정한다.

튜토리얼 개발환경 설정하기

튜토리얼을 위한 개발환경 설정은 비교적 쉽다. 아래 예제를 따라하면 된다. 사용하는 운영체제나 브라우저가 Dojo 툴킷이 지원하는 것이라면 아래 내용대로 하면 된다.

• Dojo 툴킷 zip 파일을 http://dojotoolkit.org/에서 다운로드한다.
• 튜토리얼용 폴더를 C:tutorial 등의 형태로 만든다.
• Dojo zip 파일을 새로 만들어진 폴더에 압축을 푼다(예: C:tutorialdojo-0.3.1-ajax).
• 특정 버전의 Dojo 폴더의 이름을 dojoAjax로 바꾼다(예를 들어 C:tutorialdojo-0.3.1-ajax를 C:tutorialdojoAjax로 바꾼다).

코드 예제

이 튜토리얼의 예제 코드는 파일 세 개인데 이 파일들은 적절히 만들고 수정해야 한다. 튜토리얼을 읽으면서 예제 코드를 접할 것이다. 지금은 간단히 비어 있는 파일을 만들고 아래의 위치에 둔다(이클립스는 파일마다 적절한 탭을 제공한다. 하지만 메모장을 써도 무방하다).

• test.html
  • C:tutorialtest.html
• dojoAjax/src/widget/HelloWorld.js
  • C:tutorialdojoAjaxsrcwidgetHelloWorld.js
• dojoAjax/src/widget/template/HtmlHelloWorld.html
  • C:tutorialdojoAjaxsrcwidgettemplateHtmlHelloWorld.html

파일 위치 Dojo 내부 디렉토리에 튜토리얼 파일을 넣는 것은 주의해야 한다. 그것은 장기적인 프로젝트에서 좋은 방법이 아니다. Dojo 디렉토리 구조 밖에 코드를 두는 방법에 대해서는 Dojo 질답(참고자료)을 참고하기 바란다.

예제 코드를 접하면 적당한 파일에다 코드를 복사해 붙여넣는다. 그런 후 브라우저에서 test.html 파일을 연다. 파일을 저장한 후 브라우저를 새로 고치면 결과로 만들어진 위젯을 볼 수 있다(Ctrl 키를 누른 상태에서 다시 고침을 해야 캐시를 무시한다는 것을 명심하라. 캐시 문제에 대해서는 이 튜토리얼의 뒷 부분에서 다룰 예정이다).

이 튜토리얼의 예제 코드가 실행되지 않는 문제(브라우저에 위젯이 그려지지 않는 상황)를 경험한다면 dojo.require("dojo.widget.*");를 test.html이나 HelloWorld.js에 추가하면 된다. 필자는 이 문제를 재현하지 못했으므로 튜토리얼 예제 코드에는 이 줄이 추가되어 있지 않다.