.UNOPROJ에 ‘*:BUNDLE’을 추가하는 이유

퓨즈[Fusetools] 샘플들을 보다보면 .unoproj의 “Includes”에 “*.js:Bundle”, “*.jpg:Bundle” 등과 같은 코드를 종종 볼 수 있습니다. 그런데 js 파일의 경우 < JavaScript File="main.js" />와 같은 방식으로 불러들여서 사용할 수 있는데 왜 굳이 저런식으로 쓰는지 의문이 들어서 자료도 찾아보고 채팅도 하면서 이제는 알게되었습니다.

.unoproj 파일을 수정한 경우 preview를 다시 시작하는게 좋습니다.

1. js 파일을 JavaScript 태그로 불러들이지 않고 require()로 쓰기 위함입니다. 즉, 아래 코드와 같습니다.
– “txt.js:Bundle”을 추가하지 않으면 동작하지 않습니다.

[[ txt.js ]]

1
2
3
4
5
6
7
8
var txt = "Test Code";
function foo() {
    debug_log("Foo!!");
}
module.exports = {
    txt,
    foo
};

[[ MainView.ux ]]

1
2
3
4
5
6
7
8
<App>
    <JavaScript>
        var _txt = require("txt");
        _txt.foo();
        exports.txt = _txt.txt;
    </JavaScript>
    <Text Value="{txt}" />
</App>

2. 이미지를 동적으로 로드하기 위함입니다. 아래 샘플과 같습니다.
– “*.jpg:Bundle”을 추가하지 않으면 동작하지 않습니다.

[[ MainView.ux ]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var Img = Observable("AImg.jpg");
       
        function changeImg()
        {
            Img.value = "BImg.jpg";
        }

        module.exports = {
            Img,
            changeImg
        };
    </JavaScript>
    <StackPanel>
        <Image File="{Img}" />
        <Button Text="Change" Clicked="{changeImg}" />
    </StackPanel>
</App>

3. JSON 파일을 로드하고 파싱할 수도 있습니다.
– “data.json:Bundle”을 추가하지 않으면 동작하지 않습니다.

[[ data.json ]]

1
2
3
{
    "name" : "WonHada"
}

[[ MainView.ux ]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var _name = Observable();

        var Bundle = require("FuseJS/Bundle");
        Bundle.read("data.json")
            .then(function(jsonData) {
                var data = JSON.parse(jsonData);
                _name.value = data.name;
            });
        exports.name = _name;
    </JavaScript>
    <Text Value="{name}" />
</App>

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles