Sencha에서 만든 Ext JS를 기반으로 만들어보려고 합니다.

 

버전은 6.2 기준으로 작성하겠습니다.

 

- 임시 중단

 

Ext.define('App.views.com.notice.Notice')

 

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

 

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

 

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:: 더하기빼기

 

 

 

Javascript 모듈(Module) 만들기

 

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

 

부모, 자식노드의 자동 체크 방지 'three_state'

 

 

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설정을 할 수 있다는걸 봤는데.. 다음에 기회되면 이걸 찾아봐야겠다.

+ Recent posts