본문 바로가기
Programming/JavaScript

[Dojo] Hello Dojo!

by NAMP 2014. 12. 6.

Hello Dojo!


원문 : http://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/

도조에 온 것을 환영한다. 이 튜토리얼에서 도조를 어떻게 불러오는지에 대해 배울 것이며 도조의 핵심 기능에 대해서 알아볼 것이다. 당신은 또한 도조의 AMD 기반의 모듈 구조에 대해 배울 것이며  여러분의 웹 사이트나 어플리케이션에 추가적인 기능을 추가하기 위해 어떻게 추가적으로 모듈을 불러오는지에 배울 것이다. 그리고 무언가 잘못 되고 있을때 어떻게 도움을 얻는지 배울 것이다. 


    • 난이도: 초급
  •  
  • 도조 버전: 1.10

Getting Started

도조의 시작은 다른 자바스크립트 파일과 마찬가지로 간단하게 웹페이지에 dojo.js 스크립트를 추가하면 된다. 도조는 유명 CDN들에서 사용가능하며, 따라서 아래 소스를 hellodojo.html 파일에 입력하여 당신의 웹브라우저에 열면 시작할 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.2/dojo/dojo.js"
            data-dojo-config="async: true"></script>
</body>
</html>

보통, 라이브러리 자바스크립트 파일을 한번 불러오면 당신은 모든 함수들을 사용할 수 있다. 과거에는 이것이 가능했으나 1.7 배포부터는 완전히 모듈화된 웹 애플리케이셔 개발을 위하여 소스에 Asynchronous Module Definition (AMD) 포맷을 채용했다. AMD은 순수한 자바스크립트에서 동작하며 웹 브라우저에서 소스파일을 허용하며, 개발시에 어플리케이션 성능향상을 위해 자원 최적화를 위한 빌드처리를 지원하기 때문에 선택되었다.

dojo.js를 불러오면 무엇이 가능한가? 도조의 AMD 로더는  require 와 define 사용을 위한 두개의 전역 함수를 정의한다. AMD 는 AMD 튜토리얼(Introduction to AMD tutorial)에 자세히 소개되어 있다. 시작하기 위해서  define은 당신만의 새로운 모듈을 정의하는 것이 가능한 반면에 require는 모듈을 불러오고 사용하는 것을 가능하게 한다는 것을 이해하는 것으로 충분하다. 하나의 모듈을 일반적으로 하나의 자바스크립트 소스 파일이다. 

HTML DOM 조작을 위한 도조의 기본 모듈들은 dojo/dom 와 dojo/dom-construct 이다. 어떻게 모듈을 불러오고 그들이 제공하는 함수를 어떻게 사용하는지 알아보자. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.2/dojo/dojo.js"
            data-dojo-config="async: true"></script>
 
    <script>
        require([
            'dojo/dom',
            'dojo/dom-construct'
        ], function (dom, domConstruct) {
            var greetingNode = dom.byId('greeting');
            domConstruct.place('<i> Dojo!</i>', greetingNode);
        });
    </script>
</body>
</html>

require의 첫번째 파라미터(줄번호 14-17)는 모듈 ids(로드를 위한 모듈의 식별자들)의 배열이다. 일반적으로, 이것들은 파일명이다. 도조의 배포 소스를 다운로드 받고 도조 디렉토리를 확인한다면, 각 모듈을 정의하고 있는 dom.js 와 dom-construct.js 파일들을 볼 수 있다. 

AMD 로더는 비동기적으로 실행된다. 자바스크립트에서 비동기적 실행은 콜백으로 구현된다. 따라서 두번째 파라미터 (줄번호 17) 은 콜백 함수 이다. 이 함수에서 그 모듈들을 사용하기 위한 당신만의 코드를 작성할 수 있다. AMD로더는 모듈들을 모듈 ID 배열에 선언한것과 같은 순서로 콜백함수에 파라미터로 전달한다. 콜백 함수에 전달되는 파라미터명은 당신 마음대로 정할 수 있다. 그러나 일관성과 가독성을 위해서 우리는 모듈 id에 기반해서 사용하기를 추천한다. 

18, 19 번째 줄에서 id를 이용한 DOM 노드 참조와 내용을 조작하기 위해 dom 과 dom-construct 모듈을 사용하는 것을 볼 수 있다. 

AMD 로더는 자동적으로 요청된 모듈의 모든 하위 의존 모듈을 로드 한다. 따라서 직접 사용을 위한 모듈만 의존 목록에 있으면 된다. .

Defining AMD Modules

이 시점에서 당신은 모듈을 불러오고 사용하는 예제를 보았다. 당신만의 모듈을 정의 하고 불러오기 위해서 당신은 당신의 HTML파일을 HTTP서버에서 불러오는 것을 보장해야 한다. (localhost 이어도 좋다.  "file://" 프로토콜 동작을 방해하는 보안의 중요 요소들때문에 HTTP서버가 필요하다.). 이 예제들을 위해서 당신의 웹서버에서 파일을 제공하는 것 외에 특별한 것이 필요하지 않다.  hellodojo.html가 있는 디렉토리에 demo 디렉토리를 추가한다. 그리고 demo 디렉토리에 myModule.js 파일을 생성한다. 

demo/
    myModule.js
hellodojo.html

myModule.js 파일에 아래 내용을 입력한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
define([
    // The dojo/dom module is required by this module, so it goes
    // in this list of dependencies.
    'dojo/dom'
], function(dom){
    // Once all modules in the dependency list have loaded, this
    // function is called to define the demo/myModule module.
    //
    // The dojo/dom module is passed as the first argument to this
    // function; additional modules in the dependency list would be
    // passed in as subsequent arguments.
 
    var oldText = {};
 
    // This returned object becomes the defined value of this module
    return {
        setText: function (id, text) {
            var node = dom.byId(id);
            oldText[id] = node.innerHTML;
            node.innerHTML = text;
        },
 
        restoreText: function (id) {
            var node = dom.byId(id);
            node.innerHTML = oldText[id];
            delete oldText[id];
        }
    };
});

AMD define 함수는 require 함수와 비슷한 파라미터를 수용한다. 모듈 ids의 배열과 콜백 함수. AMD로더는 모듈의 값으로 콜백 함수의 반환값을 저장한다. 따라서 require 또는 define 으로 불러온 모듈은 정의한 모듈의 반환값의 참조를 받을 수 있다. 

CDN Usage

CDN에서 도조를 사용하여 지역 모듈을 불러오는 경우에는 추가적인 설정이 필요하다. (도조 AMD 로더와 CDN 도조의 사용에 대한 자세한 내용은 theAdvanced AMD 와 Using Modules with a CDN 튜토리얼에서 확인할 수 있다.). hellodojo.html 파일을 아래와 같이 업데이트 한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
</head>
<body>
    <h1 id="greeting">Hello</h1>
    <!-- configure Dojo -->
    <script>
        // Instead of using data-dojo-config, we're creating a dojoConfig
        // object *before* we load dojo.js; they're functionally identical,
        // it's just easier to read this approach with a larger configuration.
        var dojoConfig = {
            async: true,
            // This code registers the correct location of the "demo"
            // package so we can load Dojo from the CDN whilst still
            // being able to load local modules
            packages: [{
                name: "demo",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
            }]
        };
    </script>
    <!-- load Dojo -->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.2/dojo/dojo.js"></script>
 
    <script>
        require([
            'demo/myModule'
        ], function (myModule) {
            myModule.setText('greeting', 'Hello Dojo!');
 
            setTimeout(function () {
                myModule.restoreText('greeting');
            }, 3000);
        });
    </script>
</body>
</html>

추가적으로 도조를 위한 설정을 추가함으로써 우리는 메인 코드를 재정립했다. 이제 우리는 단지 demo/myModule를 로드하고 페이지에 있는 텍스트 조작의 목적 달성을 위해 활용한다. 당신이 보고 있는 것처럼 모듈을 정의하고 불러오는 것은 매우 간단하다. 26번째 줄에서 프로토콜을 생략해서 dojo.js의 URL을 변경하였다. 이것은 페이지가 사용하는 http나 https 프로토콜과 상관없이 브라우저에서 보안 위험을 증가시키는 내용을 막는 링크를 만든다. 

AMD 모듈들에서 코드를 조직화 하는 것은 브라우저에서 즉시 실행 가능한 모듈화된 자바스크립트 소스를 생성하는 것을 가능하게 하고 쉽게 디버그 할 수 있게 한다. AMD 모듈들은 전역 이름공간을 어지럽히는 것을 피하고 빠른 이름 참조를 제공하기 위해 변수들을 지역스코프로 사용한다. AMD는 다수 실행을 위한 표준사양 이다. 따라서 하나의 실행때문에 락이 걸리지 않는다. 어느 AMD로더도 AMD 모듈을 사용할 수 있다. 

Waiting for the DOM

웹 어플리케이션의 목적을 달성하기 위해 당신에게 필요한 것들 중의 하나는 코드가 실행되기 전에 브라우저의 DOM이 사용가능해야 한다는 것이다. 이것은 "plugin"이라 불리는 특별한 AMD로더에 의해 충족되어진다. 플러그인들은 다른 모듈들 처럼 사용되는데, 그들의 특별한 기능은 모듈 식별자의 마지막에 ! 느낌표를 붙여야만 활성화가 된다. DOM 준비 이벤트의 경우, 도조는 dojo/domReady 플러그인을 제공한다. 간단히 require나 define 에 이 플러그인을 추가함으로써 콜백은 DOM이 준비되기 전까지는 호출되지 않는다. 

1
2
3
4
5
6
7
require([
    'dojo/dom',
    'dojo/domReady!'
], function (dom) {
    var greeting = dom.byId('greeting');
    greeting.innerHTML += ' from Dojo!';
});
View Demo

상단의 예제는 단순히 텍스트에 DOM이 로드 되어야지만 읽을 수 있는 greeting 요소를 추가한다. —  (우리는 스크립트 요소가 body 요소의 마지막에 있는 이전의 코드에서는 이것을 사용하지 않았다. 이것은 DOM이 준비되기까지 처리를 지연시킨다.) 다시 한번 말하자면, 모듈 식별자가 ! 느낌표로 끝나야 한다. ! 느낌표가 없다면 dojo/domReady 모듈은 단순이 다른 모듈들처럼 동작할 것이다. 

몇몇 경우에 dojo/domReady와 같이, 우리는 참조할 필요가 없는 경우에 모듈을 로드하기만 한다. AMD로더는 알 수 없다. 그것은 항상 의존모듈 배열에 있는 각 모듈의 콜백 함수에 참조를 전달한다. 따라서 어떤 모듈들 반환값 사용을 원하지 않는 모듈들은 의존 배열의 마지막에 위치시켜야 한다. 그리고 콜백 함수의 반환값에서 참조들을 생략할 수 있다. DOM 조작 함수의 자세한 설명은  Dojo DOM Functions 튜토리얼에서 확인할 수 있다. 

Adding Visual Effects

우리는 이제 애니메이션을 추가함으로써 활기를 띄울 수 있다. 페이지에 효과를 위해 dojo/fx 모듈을 로드할 수 있다. dojo/fx의 slideTo 메소드를 추가해서 슬라이딩 애니메이션을 추가해보자. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
require([
    'dojo/dom',
    'dojo/fx',
    'dojo/domReady!'
], function (dom, fx) {
    // The piece we had before...
    var greeting = dom.byId('greeting');
    greeting.innerHTML += ' from Dojo!';
 
    // ...but now, with an animation!
    fx.slideTo({
        node: greeting,
        top: 100,
        left: 200
    }).play();
});
View Demo

당신이 보는 것처럼 dojo/fx로 한가지 의존모듈을 추가했다. greeting 요소를 움직이기 위해 그 모듈을 사용했다. 

애니메이션 효과에 대한 더 자세한 정보는 Dojo Effects 와 Animations 튜토리얼에서 확인 할 수 있다. 

Using the Dojo Source

CDN은 편하기 때문에 튜토리얼 예제에서 사용한다. 당신이 코드를 복사해서 아무런 수정을 하지 않아도 동작한다. 그러나 몇가지 단점들이 있다. 

  • 성능의 이유상에서, 그것들은 인터넷을 통해 효율적으로 전송되기 위해 각 모듈들이 최소화되고 최적화된 도조의 "빌트" 버전이다. 이것은 당신에게 이슈가 생겼을 때에 디버그 하기 어렵게 만든다. 
  • 당신의 어플리케이션을 위해서 공공인터넷 접속이 필요하다. 많은 경우에 이것을 실용적이거나 그렇지 않을 수 있다. 
  • 커스텀 모듈을 추가하기 위해 더 많은 노력이 필요하다. 
  • 당신의 어플리케이션을 상품화하길 원한다면, 당신의 특정 어플리케이션과 사용할 브라우저에 맞춘 도조 버전이 성능상의 큰 이익을 줄 것이다. 

보통 당신이 도조를 사용하여 프로젝트를 개발할때 도조 소스를 사용하기 위해 아래 단계들을 따라 하라. 

  1. Download Dojo - 밑쪽을 확인 하고 배포 소스를 다운로드 한다. 

    git 과 GitHub에 경험이 있다면, GitHub에서 복사 할 수 도 있다. (clone Dojo from GitHub). dojo를 최소로 사용한다면 dijit, dojox, 그리고 util 를 사용할 것이다. (소스를 다운로드 하면 이것들 모두 포함하고 있다.).

  2. 당신의 프로젝트 폴더에 도조 압축 파일을 푼다.  
    demo/
    myModule.js
dojo/
dijit/
dojox/
util/
hellodojo.html
  3. CDN대신에 dojo.js 을 로드한다. 
    1
    <script src="dojo/dojo.js"></script>
  4. 당신의 패키지 설정을 업데이트 한다. 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var dojoConfig = {
        async: true,
        baseUrl: '.',
        packages: [
            'dojo',
            'dijit',
            'dojox',
            'demo'
        ]
    };

Getting Help

곤란한 문제에 직면하거나 혼란스러워지더라도, 당신은 혼자가 아니다! 자원봉사자들이 dojo-interest mailing list 에서 이메일을 통해서 IRC 의 #dojo on irc.freenode.net에서 도울 준비가 되어 있다. 우리의 문서에서 에러를 찾은것 같다면, 또는 오해의 소지가 있거나 혼란스럽다면 문서의 하단에 있는 피드백 링크를 통해서 우리에게 알려주길 바란다. 

긴급하거나 비밀의 도움이 필요하거나 또는 자원봉사자 팀이 해결할 수 없는 문제를 가지고 있다면 SitePen을 통하여 commercial Dojo support 와 training workshops 역시 가능하다.

Where to next?

도조툴킷을 시작하기 위해서 스크립트 태그와 필요한 몇몇 모듈을 추가하기만 하면 된다. 그러나 우리는 엄청난 범위와 도조 파워의 겉부분만을 살펴보았을 뿐이다. 당신의 요구에 따라서 이 튜토리얼은 다양한 경로가 있다. 

  • 이전에 Dojo를 사용해 본적이 있고, AMD 세계와 근거없는 도조에 대한 더 많은 이해와 변경된 다른 컨셉들에 대한 이해를  원한다면 Modern Dojo 튜토리얼을 보기 바란다. 
  • 존재하는 정적 웹 페이지나 서버 주도의 웹 사이트에 몇몇 기능과 효과를 추가하는것에 관심이 있다면 다음의 Using dojo/query, Events with Dojo, 그리고 effects 와 animations 튜토리얼을 보기 바란다. 
  • 당신의 사이트에 AJAX를 추가하길 원한다면 Ajax with Dojo 가 당신의 티켓이다. 
  • 당신의 웹 사이트나 어플리케이션에 풍부한 위젯을 통합시키기를 원한다면 Creating Template-based Widgets 튜토리얼과 추가적으로 우리의 tutorial series on Dijit widgets을 둘러 보아라 
  • 복잡한 웹 어플리케이션 구조와 도조의 유용한 함수들의 파워에 대해 더 배우고 싶다면 Core Concepts 섹션으로 가라.
  • 모바일 어플리케이션이 목표라면 Getting Started with dojox/mobile 으로 가서 실행하라. 

당신이 바라던 수입과 상관없이, 도조는 당신이 프로젝트를 완수하는데 더 적은 시간과 더 효과적이인 결과가 나오도록 도와주는 주도산업 오픈 소스 툴을 제공한다. 우리는 당신이 도조를 가지고 무엇을 만들지 기대하고 있다. 




저작자표시 비영리 변경금지

'Programming > JavaScript' 카테고리의 다른 글

[Angular] 3단 배열 테이블 만들기  (0) 2015.09.22
[Angular] paging 만들기  (0) 2015.09.22
[jQuery] Datepicker  (0) 2015.09.22
[javascript] YUIDOC  (0) 2014.12.18
[js] JSHint  (0) 2014.12.05

관련글

댓글

티스토리툴바