하드코딩이 싫어요

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

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

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를 꼼꼼히 읽어보지 못한 내 잘못이다.

프로젝트 중 문자 전송 관련하여 개발했을 때,

문자 내용 길이에 따라, SMS/LMS/MMS 기준으로 전송해야할 때가 있었다.

웹 검색 중 Byte 계산에 대한 1byte, 2byte 등 기준이 애매한게 많았다.

숫자, 영문, 띄어쓰기, 줄바꿈 등은 1byte

한글, 특수문자 등은 2byte로 계산하는것을 작성하였고, 추후에 필요할까 싶어 기록해놓는다.

public static int getByteLength(String str) {
    int bytes = 0;
    if (str == null) {

        return bytes;

    } else {

        char[] strChar = str.toCharArray();
        char ch; int code;

        for (int i = 0; i < strChar.length; i++;) {
            ch = strChar[i];
            code = (int) ch;

            // 2bytes
            if ((ch < '0' || ch > '9') && (ch < 'A' || ch > 'Z') && code > 255) bytes += 2;
            // 1bytes
            else bytes +=1;
        }

        return bytes;

    }
}

이미지 태그를 이용할 시 참조하는 이미지가 없을 경우를 대비해 대체할 이미지를 보여주는 기능이 있다.

바로 onError라는 속성인데 작성하는 방식은 아래와 같다.

<img src="aaa.domain.com/bbb.jpg" onError=this.src="aaa.domain.com/ccc.png">

하지만, 이 부분에서도 무한루프에 빠지는 허점이 있다.

bbb.jpg에 접근하였더니, 존재하지 않아 ccc.png에 접근했는데

이 파일 또한 존재하지 않았을 경우 다시 onError를 호출하여 또 파일을 찾는 것이었다.

<img src="aaa.domain.com/bbb.jpg" onError="this.onerror=null; this.src='aaa.domain.com/ccc.png'">

이렇게 onError부분에 코딩하게 되면, 기본 src의 참조오류로 인한 onError 호출할 때 null로 처리되며..

이후 error의 src가 참조를 못하였을 경우, 앞서 null로 처리하였기 때문에 무한루프에서 벗어날 수 있다.

혹시, 잘못된 부분이나, 더 좋은 정보가 있다면 공유 부탁합니다.