Sencha Architect User Extension 개발

Sencha Architect를 쓰는 팀에서 공통으로 쓰이는 컴포넌트를 공유하려면 Sencha CMD Package를 기반으로 한 User Extension을 사용해야 합니다. 하지만 Sencha 공식 문서에 있는 설명이 굉장히 부실하고, Sencha Architect를 실 사용하는 유저도 거의 없어서 관련된 정보가 매우 드물어 Extension을 개발하는데 어려움이 있습니다.

이 글이 Sencha Architect User Extension을 개발하는데 도움이 됐으면 좋겠습니다.

Project & Package 생성

센차 아키텍트로 프로젝트를 만듭니다.

프로젝트 폴더에서 Sencha CMD를 이용해 package를 만듭니다.

잘 만들어졌네요. 패키지의 구조는 Document에 간략히 나와 있으며 내부적인 프로세스에 대한 이해는 공식 블로그에서 확인하세요.

클래스 파일 및 Definition 추가

src폴더에 CustomComponent.js파일을 만듭니다.

// CustomComponent.js
Ext.define('Incleaf.component.CustomComponent', {
    extend: 'Ext.Component',
    alias: 'widget.component',
    listeners: {
        boxready: 'onBoxReady'
    },

    initConfig: function(instanceConfig) {
        var me = this,
            config = {};
        if (instanceConfig) {
            me.getConfigurator().merge(me, config, instanceConfig);
        }

        return me.callParent([config]);
    },

    onBoxReady: function(w, h) {
        this.update("I'm CustomComponent");
    }
});

Architect 폴더를 만들고 그 안에 CustomComponent.Definition.js 파일을 만듭니다. Definition 파일의 이름은 src 폴더에 있는 파일의 이름과 반드시 매핑되어야 합니다.

{
    "classAlias": "widget.incleaf",
    "className": "Incleaf.component.CustomComponent",
    "inherits": "Ext.Component",
    "autoName": "CustomComponent",
    "helpText": "Please send an email for incleaf@gmail.com",
    "toolbox": {
        "name": "CustomComponent",
        "category": "CustomComponent",
        "groups": ["Incleaf"]
    }
}

package.json 수정

sencha generate package 명령어로 생성된 package.json입니다. 공식 문서에서 User Extension에 대한 구조를 확인할 수 있습니다.

{
    "name": "TestingExtension",
    "type": "code",
    "creator": "anonymous",
    "summary": "Short summary",
    "detailedDescription": "Long description of package",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "format": "1",
    "slicer": {
        "js": [
            {
                "path": "${package.dir}/sass/example/custom.js",
                "isWidgetManifest": true
            }
        ]
    },
    "output": "${package.dir}/build",
    "local": true,
    "requires": []
}

Sencha Architect에 대한 설정을 추가해야 합니다.

{
    ...
    "architect": {
        "compatFrameworks": [
            "ext50", "ext51"
        ],
        "classes": [{
            "definition": "CustomComponent.Definition.js",
            "className": "Incleaf.component.CustomComponent",
            "js": [
                "CustomComponent.js"
            ],
            "css": [
            ]
        }]
    }
}

Sencha Architect에서 확인

이제 Sencha Architect에서 프로젝트를 껐다 다시 켜보면, 다음과 같은 창을 확인할 수 있습니다. Architect에 추가합시다.

좌측 메뉴에 잘 보이네요.

컴포넌트를 뷰에다 끌어다 놓아도 잘 나오네요.

배포

좌측에 있는 익스텐션을 우클릭 후 Package Extension을 선택하면 User Extension을 배포하기 위한 파일 포맷인 AUX로 export할 수 있습니다.

배포할 때마다 이런식으로 해야한다니, 참 귀찮죠? 조금 더 편한 방법이 있습니다. export한 AUX 파일의 바이너리를 확인해보니 ZIP 파일의 바이너리 형식과 같았습니다.

그러니 굳이 저렇게 귀찮게 하지 마시고, Grunt, Gulp같은 프레임워크들을 이용해서 자동화 하시면 됩니다. 단, 압축할 때 .sencha같은 숨김 파일들도 포함하셔야 합니다. 자동화 해둔 스크립트는 회사에서 사용하는 스크립트라 공개할 수는 없지만 쉽게 하실 수 있으실겁니다.

혹은 AUX 파일로 배포하지 마시고, 그냥 Package 폴더 자체를 공유하셔도 됩니다. Sencha CMD 6 버젼 이상에선 package가 프로젝트에 귀속되는게 아니라 워크스페이스에 귀속되어 조금 더 쉽게 관리할 수 있습니다.

마무리

User Extension을 개발하면서 느낀 문제점이 몇 가지 있습니다.

첫 째로, 프로젝트 전체를 껐다 켜야 수정한 익스텐션이 반영이 된다는 점입니다. Senca Architect는 IDE로서의 기능도 거의 없고 프로그램 자체가 무거워서 규모가 있는 프로젝트를 저장하거나 새로 오픈하는데 굉장히 오랜 시간이 걸리는데, Sencha 팀은 왜 이런식으로 만들어 둔 걸까요?

둘 째로, 버전 업을 하면서 config의 이름을 바꾸어야 하는 상황이라는 가정을 해봅시다. Definition에서 설정해뒀던 myConfig라는 name을 가진 config를 버전을 업그레이드를 하면서 ourConfig라는 이름으로 바꾸면, 기존의 myConfig에 있던 소스가 모두 날아갑니다. 미리 백업해두지 않으면 복구할 수 없습니다.

셋 째로, 제가 쓴 내용에는 포함되어 있지 않지만, 리소스 파일을 관리하는데 있어 어려움도 큽니다. 외부 라이브러리를 사용하기 위해서는 이것 저것 설정과 함께 빌드 프로세스를 수정해야 합니다. 왜 이런 중요한 부분을 센차는 알려주지 않은건지..

마지막으로, 배포하는데 어려움이 있습니다. sencha package repo라는 명령어가 있긴 한데, 이도 마찬가지로 센차의 Document에는 제대로 된 설명이 없습니다. npm처럼 쉽게 패키지 관리를 할 수 있으면 좋을텐데, 이런 점이 참 아쉽습니다.

이런 문제점들은 제가 부족하고 몰라서 저만 느낀 것일지도 모릅니다. 글에 잘못된 점이 있다면 댓글 남겨 주세요. 긴 글 읽어주셔서 감사합니다.