하드코딩이 싫어요

ExtJS를 얼마만에 만져 보는건지..

2014년 ~ 2018년 까지 해보고 그 이후로 처음 해보는 것 같다.

이번에 한 업체에서 간단한 프로젝트를 맡겼고, 디자이너와 퍼블리셔, 기획 등이 없는 상황이라

ExtJS를 택하게 되었다. 가장 큰 장점은 UI Component 가 너무 잘 되어있다.

GPL 버전은 공식 오픈소스 버전으로 개발에 마음껏 사용하여도 좋다.

단, 상업적으로 이용할 시 소스는 공개하게 되어있다. 유의하길 바라며...

Sencha에서 ExtJS GPL 버전을 더 이상 지원을 안하나?

라이센스 구매 유도로 다 변경되어 있고,

7.0 버전 이후로 CMD도 GPL도 찾아보기도 힘들며 다운받기 어렵게 해놓았다.

우선, 작성일자 기준으로 소개를 해보겠다.

GPL 버전은 아래에서 받았다.

https://cdn.sencha.com/ext/gpl/ext-7.0.0-gpl.zip

그리고, ExtJS는 JS 라이브러리로 초기에는 빌드를 해야, 정상적으로 사용할 수 있다.

Sencha에서 지원하는 CMD로 해당 Package를 sdk 설치 해줘야 한다.

일반 소스가 아닌, ExtJS 라이브러리를 수정할 경우 해당 CMD로 계속 빌드 해줘야 한다.

CMD는 아무리 찾아도 받아볼 수 없어, Sencha에서 Trial 버전을 신청한 후 다운 받았다.

그럼 최신 CMD를 받는데, 그게 7.8버전이다.

그럼 GPL 버전을 압축 해제한 후 sencha cmd로 해당 경로에 접속 한 다음 아래 명령어를 입력해 보자.

sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp

/path/to/sdk 는 압축을 해제 한 GPL 경로
MyApp은 프로젝트 명

/path/to/myapp 는 압축 해제한 GPL package를 풀 경로를 뜻한다.

완료가 된다면, 프로젝트가 풀어진 경로에서 

sencha app watch를 해보자

localhost:1841 이 서비스가 시작 될 것이며 해당 페이지를 띄어보면 아래와 같은 화면이 나올 것이다.

Ext JS SDK Build 최초 화면

스크립트로 개발을 하면서, 고민이 생겼다.

혼자 개발하면 문제가 없지만.. 협업을 하게 되었을 때 스크립트 특성상

function명이나, 변수명이 중복으로 사용될 때 정말 난감하지 않을 수 없었다.

특히, 공통 script에 선언한 function 명이 중복되는 상황이 왔을 때 이러지도 저러지도 못하는 상황이 있다.

그럴 때, 즉시 실행함수로 모듈화 하는것이 이 문제를 해결할 수 있고, 중복을 피할 수 있었다.

더 나아가 유지보수에도 많은 도움이 되었다.

앞으로는 공통 script는 꼭 모듈화를 통해, 만들어 써야겠다.

(function(window){
    let module = {
        HI_HELLO: '안녕하세요',
        getString: function (str) {
            let value = '';
            	value = str + '빼기';
            return value;
        },

        getInteger: function (num) {
            return num;
        }
    }
    window.CustomUtils = module;
}(window));

* 사용법은 다음과 같다

// 전역변수 사용하기
console.debug('Hello -> ' , CustomUtils.HI_HELLO);
// result:: 안녕하세요

// function 사용하기
CustomUtils.getString('빼기');
// result:: 더하기빼기

JS Tree를 사용 중 답답한 상황이 있었다.

옵션 중 체크박스(checkbox)를 사용하고 있었는데,

한 부모의 자식노드를 모두 클릭하거나, 하나의 자식부모로 연결된 여러개의 노드가 있을 경우

모두가 선택(체크)되는 현상이었다.

그 기능이 default로 지정되어서 몇 시간 째 고생이었다.

JS Tree의 옵션 중 checkbox 안에 'three_state' 라는 옵션이 있었고,

default가 true로 되어있었다.(true: 사용, false: 미사용)

$('#tree').jstree({
    'checkbox' : {
        'three_state': false
    }
});

API를 꼼꼼히 읽어보지 못한 내 잘못이다.

Chrome 에서는 그리드의 Editable Cell 클릭시 X버튼표시가 없었는데

유독IE에서만 X버튼이 발생되었다.

CSS 문제인듯 아무리 건드려봐도 지워지지 않았고 변경되지 않았다.

AUI에 문의해보니 당사에서 CSS를 변경해 쓰고있지 않느냐고해서... 그렇지 않다고 했다.

재문의 해보니 IE브라우저의 특징이라고 IE10이상에서는 meta태그의 content를 IE=edge로 변경하라고 했다.

그렇게 진행했더니 아무일 없듯이 X버튼이 표시되지 않았다.

기존에 사용하고있던 meta content가 IE=9 이었던 데다가, 필자가 환경설정을 하지 않아 함부로 건드릴 수가 없었다.

그러나, 찾아보니... 

http-equiv="X-UA-Compatible"는 IE에서만 작동하는 비표준 속성이며,

IE=5 : 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용됩니다.

IE=7 : IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용됩니다.

IE=EmulateIE7 : IE7 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링됩니다.

IE=8 : IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링됩니다 .

IE=EmulateIE8 : IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링됩니다.

IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링됩니다.

출처: https://webdir.tistory.com/38 [WEBDIR]

라는 자료를 찾아볼 수 있었고, edge로 설정함으로서 프로그램 가동에 아무 문제 없음을 확인하였다.

( 혹 모르는 다른 문제가 생길까 두렵기도 하였다. 아직 부족한 지식이라.... )

meta태그 필요없이 서버 자체에 HTTP Header설정을 할 수 있다는걸 봤는데.. 다음에 기회되면 이걸 찾아봐야겠다.