소프트웨어 개발에 유용한 여러 팁

자바스크립트 큰 수 다루기

자바스크립트는 너무 큰 수를 다룰 때 정확하지 않은 수가 출력될 수 있다. 자바스크립트 내부에서 큰 수를 다루는 경우엔 Bigint 자료형을 사용하면 되지만, 컨트롤러에서 리턴 받을 땐 그 방식도 통하지 않는다.

이때 sql에서 number가 아닌 char 형식으로 가져오면 문자로 인식하여 정확한 값을 출력할 수 있다.

동적 생성된 태그에 이벤트 걸기

$(document).on('change', ".dataCheck", function(){
});

$("#propertyTb").on("click", "tr[id^='propertyTr']", function() {
    // "propertyTr"로 시작하는 tr를 클릭했을 때만 실행
    alert("클릭된 tr ID: " + this.id);
});

동적으로 태그가 생성된 경우 id나 class로 직접 이벤트를 걸면 이벤트가 적용되지
않는다.

이벤트 위임(Event Delegation)을 통해 선택하는 방식이 효율적이고, 그렇지 않다면 동적으로 코드가 생성될 때마다 이벤트를 걸어야 한다.

jQuery의 이벤트 위임은 .on() 메서드의 두 번째 매개변수(Selector)를 활용해 부모(또는 조상) 요소에 이벤트 리스너를 등록하고, 실제 타겟은 동적으로 생기는 자식 요소로 지정하는 방식이다.

bind()는 jQuery 3 버전부턴 사용이 권장되지 않아(deprecated) .on()을 쓰는 게 좋다.

div 팝업 추가하기

insertAdjacentHTML로 DOM에 새로운 요소를 추가할 수 있다.
innerHTML은 기존 DOM의 내용을 덮어 씌운다.

insertAdjacentHTML는 기존 DOM 구조를 보존하면서 새로운 태그나 텍스트를 삽입하기에 좋다.
innerHTML는 DOM 내부를 모두 재렌더링하기에 기존 이벤트 핸들러나 하위 요소 상태 등이 리셋될 수 있다.

사용법은 다음과 같다.
element.insertAdjacentHTML(position, text);

position은 4가지 경우만 가능하다.

beforebegin: element 앞에 새로운 HTML 삽입
afterbegin: element 안에 가장 첫번째 자식 요소로 새로운 HTML 삽입
beforeend: element 안에 가장 마지막 자식 요소로 새로운 HTML 삽입
afterend: element 뒤에 새로운 HTML 삽입

여기서 beforebegin와 afterend는 해당 element가 DOM 트리(문서)에 삽입돼 있어야 하고, 부모 요소가 존재해야 한다.

자바스크립트 배열, 오브젝트 선언방법

// 배열
var arr = new Array();
var arr = [];

// 오브젝트
var obj = new Object();
var obj = {};

attr를 써야 하는 경우

기본적으론 prop를 쓰는 게 좋다고 하나 속성 관련된 것은 attr를 써야 작동된다. 대표적으로 onclick이 있다.
$("#btnSearch").attr("onclick", "getSum()");

인덱스

인덱스는 테이블에서 원하는 데이터를 쉽고 빠르게 찾기 위해 사용된다.
이는 자주 사용되는 필드값으로 만들어진 원본 테이블의 사본으로 볼 수 있다.
인덱스는 데이터와 데이터의 위치를 포함한 자료구조로 구성된다.

데이터를 검색할 때 첫번째 필드부터 테이블 전체를 검색(Full Table Scan)하는데, 테이블이 클수록
데이터를 탐색하는 시간도 증가한다.

인덱스를 사용하면 테이블 전체를 읽지 않아도 되어 빠른 검색이 이뤄진다.
인덱스는 사용자가 직접 접근할 순 없고, 검색에서만 사용된다.

인덱스가 설정된 필드값을 포함한 데이터의 삽입, 삭제, 수정 작업이 원본 테이블에서 이뤄지면
인덱스도 함께 수정돼야 한다.

이 경우 인덱스가 설정된 테이블의 처리 속도가 느려질 수 있다.
인덱스는 수정보다 검색이 자주 사용되는 테이블에 쓰는 것이 적합하다.

인덱스의 자료구조

1. 해시 테이블(Hash Table)
   해시 테이블은 (Key, Value)로 데이터를 저장하는 자료구조 중 하나로 빠른 데이터 검색이 필요할 때 유용하다.
   해시 테이블은 Key값을 사용해 고유한 Index를 생성하여 그 Index에 저장된 값을 꺼내오는 구조이다.

해시 테이블 기반의 DB 인덱스는 (데이터=컬럼의 값, 데이터의 위치)를 (Key, Value)로 사용하여 컬럼의 값으로 생성된
해시를 통해 인덱스를 구현한다. 해시 테이블의 시간복잡도는 O(1)이며 매우 빠른 검색을 지원한다.

그러나 DB 인덱스에서 해시 테이블이 사용되는 경우는 제한적인데, 그건 해시가 등호(=) 연산에만 특화됐기 때문이다.
해시 함수는 값이 1이라도 달라지면 완전히 다른 해시 값을 생성하는데 이런 특성에 의해 부등호 연산(>, <)이 자주 사용되는
데이터베이스 검색을 위해선 해시 테이블이 적합하지 않다.

이를테면 '나는'으로 시작하는 모든 데이터를 검색하기 위한 쿼리문은 인덱스의 혜택을 받지 못한다.
그런 이유로 데이터베이스 인덱스에선 B+Tree가 일반적으로 사용된다.

2. B+Tree
   B+Tree는 DB 인덱스를 위해 자식 노드가 2개 이상인 B-Tree를 개선시킨 자료구조이다. B+Tree는 모든 노드에
   데이터(Value)를 저장한 BTree와 다른 특성을 가지고 있다.

• 리프노드(데이터 노드)만 인덱스와 함께 데이터(Value)를 가지고 있고, 나머지 노드(인덱스 노드)들은 데이터를 위한
  인덱스(Key)만을 갖는다.
• 리프노드들은 LinkedList로 연결되어 있다.
• 데이터 노드 크기는 인덱스 노드 크기와 같지 않아도 된다.

데이터베이스 인덱스 컬럼은 부등호를 이용한 순차 검색 연산이 자주 발생할 수 있다. 이런 이유로 BTree의 리프노드들을
LinkedList로 연결하여 순차검색을 용이하게 하는 등 BTree를 인덱스에 맞게 최적화하였다.(Best Case에 대해 리프노드까지
가지 않아도 탐색할 수 있는 BTree에 비해 무조건 리프노드까지 가야 한다는 단점도 있다)

이런 이유로 B+Tree는 O(lon2n)의 시간 복잡도를 갖지만 해시테이블보다 인덱싱에 적합한 자료구조이다.

인덱스를 사용하면 Order by에 의한 sort를 하지 않을 수 있다.
MIN, MAX의 효율적 처리가 가능하다.

인덱스는 테이블의 전체 데이터 중 10~15% 이하의 데이터를 처리하는 경우에만 효율적이고,
그 이상의 데이터를 처리할 땐 인덱스를 사용하지 않는 게 낫다.

인덱스를 관리하기 위해선 데이터베이스의 약 10%에 해당하는 저장공간이 추가로 필요하다.

인덱스에 적합한 컬럼

1. 조건절에 자주 등장하는 컬럼
2. 항상 = 으로 비교되는 컬럼
3. 중복되는 데이터가 최소한인(분포도가 좋은) 컬럼
4. ORDER BY 절에서 자주 사용되는 컬럼
5. 조인 조건으로 자주 사용되는 컬럼

B-Tree

B-Tree는 탐색 성능을 높이기 위해 균형있게 높이를 유지하는 Balanced Tree의 일종이다.
모든 leaf node가 같은 level로 유지되도록 자동으로 밸런스를 맞춰준다.
자식 node의 개수가 2개 이상이며, node 내 key가 1개 이상일 수 있다.
node의 자식 중 최댓값을 K라 하면 해당 B-Tree를 K차 B-Tree라고도 한다.

B-Tree의 조건

1. node의 key의 수가 k개라면 자식 node의 수는 k+1개이다.
2. node의 key는 반드시 정렬된 상태여야 한다.
3. 자식 node들의 key는 현재 node의 key를 기준으로 크기 순으로 나뉜다.
4. root node는 항상 2개 이상의 자식 node를 갖는다.(root node가 leaf node인 경우 제외)
5. M차 트리일 때, root node와 leaf node를 제외한 모든 node는 최소 M/2, 최대 M개의 서브 트리를 갖는다.
6. 모든 leaf node들은 같은 level에 있어야 한다.

node 안에서 key는 항상 정렬된 상태를 유지하며, 이진탐색 트리처럼 항상 각 key의 왼쪽자식은 자기 자신보다 작고, 오른쪽 자식은
자기 자신보다 크다.

일반적 트리는 탐색에 평균적으로 O(logN)의 시간복잡도를 지니나, 편향된 트리는 연결리스트를 탐색하듯 O(N)의 시간복잡도를 갖는다.
그런 단점을 보완하기 위해 밸런스를 유지하는 트리가 필요하며, 자식들의 밸런스를 잘 유지하면 최악의 경우에도 O(logN)의 시간복잡도를 갖게 된다.

배열 포함여부 확인

for( let i = 0; i < 21 ; i++ ) {
    if(jQuery.inArray(date, me.jobAlMainGrid.getProvider().getFieldNames()) != -1) continue;
}

ie에선 indexOf가 잘 작동하지 않는 경우가 있어 jQuery 함수 inArray를 쓰는 게 좋다.

for문 내에서 조건식을 적용한 모습이다.

클러스터

1. DB 서버 관점

• 여러 대의 DB 서버를 하나로 묶어 운용하는 개념
  • 주로 고가용성이나 확장성 등의 목표를 위해 쓰임
  • 여러 노드(서버)가 동일한 DB나 데이터를 공유하거나, 노드 간 데이터 복제를 수행하여 장애 대응 및 부하 분산에 유리
• 하나의 논리적 DB처럼 보이지만 실제론 여러 DB 서버로 이뤄진 집합을 가리킨다.

2. 일반적 의미

• 서로 관련 있는 여러 개체(서버, 테이블, 프로세스 등)를 하나로 묶어두는 것
  • 서버 클러스터: 여러 대 서버를 하나로 묶어 동작
  • 테이블 클러스터: 서로 밀접하게 조인되는 테이블들을 물리적으로 가깝게 저장
  • 클러스터 분석(Clustering): 머신러닝에서 데이터들을 유사성에 따라 여러 군집으로 묶는 것

window 객체

window 객체는 모든 객체 위에 있는 전역 객체이다.
document 객체도 window 객체에 포함되어 있다.
window 객체엔 브라우저의 즐겨찾기나 툴바까지 포함되어 있다.

모든 변수와 함수는 window 객체의 자식 요소이다.

text란 함수가 있다면 window.text()란 코드로 사용할 수 있다.

다음은 window 객체의 대표적인 두 함수이다.

window.close() 팝업 닫기
window.open() 팝업 열기

close()와 open()으로 써도 상관이 없다.

window.open() 함수는 변수에 저장할 수 있다.
변수.document.write로 새 창의 내용을 변경할 수 있다.

변수.opener.document.write()처럼 opener를 사용하여
자식창에서 부모창으로 접근할 수도 있다.

HTML 문서를 계층 구조로 표현하는 객체 모델은 DOM으로 불리며 DOM에서 벗어나 있는 브라우저 고유 기능(주소, 화면 정보, 탭/창 관리, 즐겨찾기 등)은 브라우저에 대한 객체 모델이라 하여 BOM(Browser object model)이라 칭한다.

BOM의 navigator 객체엔 브라우저나 운영체제에 대한 정보가 담겨 있다.(navigator.userAgent)
브라우저에 따라 다른 동작을 취해야 하거나, IE 여부를 체크하는 등의 상황에서 navigator 객체를 사용한다.

navigator.language; // "ko"
navigator.cookieEnabled; // true
navigator.vendor; // "Google Inc"

screen 객체는 화면에 대한 정보를 알려준다. 너비(width), 높이(height), 픽셀(pixelDepth),
컬러(colorDepth), 화면 방향(orientation), 작업표시줄을 제외한 너비와 높이(availWidth, availHeight)
등이 있다.
화면 크기에 따라 다른 동작을 취해야 할 때 사용한다.

screen.availHeight; // 1080
screen.availWidth; // 1920
screen.colorDepth; // 24

location 객체는 주소에 대한 정보를 알려준다.(protocol, host, hostname, pathname, href, port,
search, hash 속성 이용)
location.reload()로 새로고침이 가능하고, location.replace()로 주소를 교체한다(다른 페이지로 이동하며 이전 페이지 기록이 남지 않는다) .

location.host; // "panipani.app'"
location.hostname; // "location.hostname"
location.protocol; // "https:"
location.href; // "https://panipani.app/"
location.pathname; // "/"

window.location.href로 현재 주소를 가져올 수 있다.
window.location.search로 쿼리스트링(파라미터)를 가져올 수 있다.

history는 앞으로 가기(history.forward() 또는 history.go(1)), 뒤로가기(history.back() 또는
history.go(-1)) 같은 것을 다룬다.
히스토리 간 이동(history.go(페이지수))이 가능하다.
history.length는 뒤로가기 할 수 있는 페이지의 개수를 의미한다.

url 쿼리스트링(파라미터) 추출

const url = new URL(window.location.href);
const urlParams = url.searchParams;

var param = urlParams.get('feerqst_sn');

url.searchParams

URL 객체 중 searchParams 속성은 URL의 파라미터를 다룰 수 있는 객체인 URLSearchParams 객체를 리턴한다.

URLSearchParams.get('파라미터명')

URLSearchParams.get() 함수는 URL의 쿼리스트링에서 파라미터명으로 조회된 첫 번째 값을 리턴한다.

URLSearchParams.getAll('파라미터명')

URLSearchParams.getAll() 함수는 URL의 쿼리스트링에서 파라미터명으로 조회된 모든 값을 배열로 리턴한다.

중복된 파라미터가 없다면 값 1개를 지니는 배열이 출력된다.

URL과 URLSearchParams 객체는 ie에선 지원하지 않는다.
ie에선 window.location.search로 문자열을 나눠 파라미터를 추출해야 한다.

ie urlParam 추출 코드

URL 쿼리스트링에 포함된 특정 파라미터의 값을 추출한다

function getUrlParam(param){
    var queryString = window.location.search;
    var paramArr = queryString.substring(1).split('&');

    for(var i = 0; i < paramArr.length; i++){
        var urlParam = paramArr[i].split('=');
        if(urlParam[0] == param){
            return decodeURI(urlParam[1])
        }
    }

    return null;
}

이클립스 워크스페이스 생성시 문자열 인코딩 UTF-8로 변환해야 함

java, jsp, css 등 UTF-8로 설정 후 작업 필요

특히 jsp는 content types -> text -> jsp에서 설정해야 함

===의 사용

result.errMsg가 null일시
result.errMsg == undefined는 true가 된다.

null인 경우와 undefined인 경우를 구분하여 처리하기 위해선 ===를 사용하여 정확히 비교할 수 있다.

try{
    if(result.errMsg != undefined || result.errMsg === null){
            callAlert(result.errMsg);
            return;
        }else if(JSON.parse(result).errMsg != undefined){
            callAlert(JSON.parse(result).errMsg);
            return;
        }
}catch(e){
}

javascript 시간 간격 설정(setTimeout)

var timerId;

function clickOneSecond(){
    clickApprove();
    timerId = setTimeout(clickOneSecond, 1000);
}

function StopClock(){
    if(timerId != null){}
    clearTimeout(timerId);
}

function clickApprove(){
    $("#billTest").click();
}

함수가 실행종료된 다음 1초 후 다시 함수를 실행한다.

setInterval은 유사한 목적으로 사용되나 시간 간격보다 함수 실행시간이 긴 경우 함수 실행에 문제가 발생할 수 있다.