본문 바로가기

WebDev

Require.js

Require JS

javascript에서 하기 귀찮고, 아쉬운 기능인 모듈 임포트를 편하게 해주는 녀석이다.
AMD Require는 인터넷에 널려있는 얘기라 딱히 언급할 필요 없고, Java나 Python에서 늘상 하던 import을 그대로 쓸 수 있다는게 포인트다.

이제부터는 Java라고 생각하자


잠시 개발 언어를 javascript라고 하지 말고 Java라고 생각해 보자.
보통 프로젝트를 개발할 때 모든 코드를 우리가 직접 짜지는 않는다. 따라서 코드는 크게 2가지로 나눌 수 있다:

  • 직접 개발한 코드
  • 라이브러리 코드 (jar 같은)

또한, 코드들은 비슷한 역할을 하는 녀석끼리 모여 “패키지”로 묶여진다.
이러한 개념들을 간단하게 사용할 수 있도록 RequireJS가 모든 걸 준비해 두었다.
따라가 보자

1. 루트, 패키지 설정


예제 프로젝트를 보면 아래와 같은 코드를 찾을 수 있다:

requirejs.config({
    baseUrl: 'lib', // 루트를 설정함과 동시에 라이브러리 폴더도 설정한다
    paths: {
        app: '../app' // 패키지 "app"을 만들었다. app 디렉토리는 현재 루트 디렉토리(lib 디렉토리)의 sibling이라 "../"이 붙은 것.
    }
});

requirejs(['app/main']); // EntryPoint를 지정한다. 실제 requirejs가 찾을 파일은 "./lib/../app/main.js"가 된다

이렇게 의존성은 js로 다 관리해 두니, html에서는 할 게 없다.
따라서 <script data-main="app" src="lib/require.js"></script>과 같이 간소화가 가능한 것이다.

2. 코드 작성


예제 코드가 구려서 조금 변경했다

define(function () {
    var getHello = function() {'Hello World';}
    var getBye = function() {'Bye World';}

    return {
        getHello: getHello,
        getBye: getBye
    };
});

작성 룰은 간단하다
1. define안에 모든 코드를 정의한다.
2. return object 스타일로 코드를 반환하도록 한다. 이건 모듈형 javascript 개발로 항상 해오던 거다.

3. 코드 이용


패키지를 만들었으니, 당연한 일이지만 코드를 작성하자.
단, Require.js의 룰에 따라 작성하자.

create-template/www/app/main.js에서 볼 수 있는 코드다.

스타일1

define(function (require) {
    var messages = require('./messages'); // 같은 패키지 안에 있는 녀석
    var print = require('print'); // lib에 있는 녀석

    print(messages.getHello());
});

스타일2 (나는 이쪽을 선호한다)

define(['./messages', 'print'], function (messages, print) {
    print(messages.getHello());
});

룰은 다음과 같다:
1. 모든 코드는 define안에서 작성되어야 한다.
2. 다른 소스를 불러오려면 require(PATH)를 사용해야 한다

부록. 전역 변수는?


전역 변수가 자주 쓰이는 것은 아니지만, 중앙에 상태를 저장하기 위함 등 때때로 전역 변수가 필요할 때가 있다.
Stackoverflow의 질문과 답변을 보자.

// In foo.js
define(function () {
    var theFoo = {};

    return {
        getTheFoo: function () { return theFoo; }
    };
});

// In bar.js
define(["./foo"], function (foo) {
    var theFoo = foo.getTheFoo(); // save in convenience variable

    return {
        setBarOnFoo: function () { theFoo.bar = "hello"; }
    };
}

// In baz.js
define(["./foo"], function (foo) {
    // Or use directly.
    return {
        setBazOnFoo: function () { foo.getTheFoo().baz = "goodbye"; }
    };
}

// In any other file
define(["./foo", "./bar", "./baz"], function (foo, bar, baz) {
    bar.setBarOnFoo();
    baz.setBazOnFoo();

    assert(foo.getTheFoo().bar === "hello");
    assert(foo.getTheFoo().baz === "goodbye");
};

간단하다. 전역 변수를 위한 모듈을 작성하면 그만인 것이었다.

'WebDev' 카테고리의 다른 글

letsencrypt  (0) 2016.02.29
Django Foreign Key  (0) 2016.02.25
tosync.js  (0) 2016.02.20
Chrome extension 개발  (0) 2016.02.16
Web SQL  (0) 2016.02.15