Node.js 다운로드


Windows 설치

다운로드 후 클릭 > Next 클릭



Linux 설치

wget https://nodejs.org/dist/v6.10.0/node-v6.10.0-linux-x64.tar.xz
tar xvf node-v6.10.0-linux-x64.tar.xz
mv node-v6.10.0-linux-x64 nodejs
mkdir bin
ln -s ../nodejs/bin/node node
ln -s ../nodejs/bin/npm npm
node -v


OSX 설치

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
node -v


N 설치

개발환경에서 유용하게 버전을 바꿔가며, 테스트하며 사용할 수 있다.

npm install -g n
sudo n 6.9.2
node -v

Node.js는 ES6을 지원하고 있다. 고질적인 자바스크립트의 문제점을 보완하는 문법이 제공된다.


무턱대고 사용하다가는 큰 코 다칠 수 있다. 버전 별로 지원되는 기능이 차이가 있기 때문이다. 아래 링크는 지원되는 ES6의 목록이다. Server/runtimes 부분을 참고하자.


http://kangax.github.io/compat-table/es6/



Node.js는 아래와 같은 기능을 기본으로 제공하고 있다.



전체적으로 사용하기에는 시기상조이고, 개인적으로 현재 사용할만한 기능은 자바스크립트에서 항상 문제가 되어왔던 Scope 를 좀더 엄격하게 제한을 두는 문법인 Block scoping, 그리고 Connections 정도라고 생각한다.


참고 사이트


Datepicker 를 사용하여 선택하는 날짜를 받아오는 이벤트는 onSelect 이다. CSS 요소가 크게 영향이 없는 형태로 사용한다면, 문제가 되지 않는다. 하지만 브라우저에 부담을 주는 요소를 사용하는 경우 깜빡임 현상이 나타 날 수 있다.


최근에 겪은 사례로는 background 요소를 적용 한 경우 발생 했다. setTimeout( fun, 200 ) 을 사용해서 시점을 천천히 하여 보면, 초기화 된 후 재 생성 되는 부분을 확인 할 수 있다. 즉 CSS 는 초기화 된다.


아래 소스는 jquery-ui.js 중 datepicker onSelect 함수를 Callback 하는 부분이다. trigger custom callback 부분을 보도록 한다. 두개 인자를 제공 한다.


  • dateStr: 날짜 문자열
  • inst: Datepicker Object

/* Update the input field with the selected date. */
_selectDate: function(id, dateStr) {
    var onSelect,
        target = $(id),
        inst = this._getInst(target[0]);

    dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
    if (inst.input) {
        inst.input.val(dateStr);
    }
    this._updateAlternate(inst);

    onSelect = this._get(inst, "onSelect");
    if (onSelect) {
        onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
    } else if (inst.input) {
        inst.input.trigger("change"); // fire the change event
    }

    if (inst.inline){
        this._updateDatepicker(inst);
    } else {
        this._hideDatepicker();
        this._lastInput = inst.input[0];
        if (typeof(inst.input[0]) !== "object") {
            inst.input.focus(); // restore focus
        }
        this._lastInput = null;
    }
},


inst.inline 기준에 따라 this._updateDatepicker( inst ) 함수를 호출 하여 위에서 언급한 상황이 재연 된다. 현상을 해결 하기 위해서는 onSelect 함수를 아래와 같이 구현하여 호출 되지 않도록 해야 한다.


$datepicker.datepicker( { 
  inline: true,
  showOtherMonths: true,
  showMonthAfterYear: true,
  monthNames: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ],
  dayNamesMin: [ '일', '월', '화', '수', '목', '금', '토' ],

  onSelect: function( date, inst ) {
    inst.inline = false; // datepicker object inline false 변경
    customSelect( date ); // 사용자 정의 구현 함수
  }
} );


위 소스를 참고하여 적용 한다면, 깜박임 현상은 해결 된다. customSelect( date ) 로 정의한 함수는 스타일에 맞게 적용 하도록 한다.


참고 사이트


window opener 로 접근해야만 부모 창 window 접근이 가능 하다.


window.opener.location.href = 'http://www.naver.com'


위 코드를 적용 하자.


 

http://youall-textcube.blogspot.kr/2010/04/javascript.html

 


Date의 처리가 까다로운 관계로 개선을 위해서 opensource library인 sugar.js 를 활용 하였다.


※ 공식 사이트: http://sugarjs.com/



공식 사이트 일부 화면이다. Download 한다. 아래와 같이 js 파일을 추가 해 준다.



<script type="text/javascript" src="/javascripts/sugar/sugar-1.3.9.min.js"></script>



Date와 String의 간단한 변환을 위해서 작성 하였다.


추가 소스

whitelife.js



// whitelife.js
// sugar.js is used

Date.prototype.toShortString = function() {
    return this.format('{yyyy}-{MM}-{dd}');
}

Date.prototype.toLongString = function() {
    return this.format('{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}');
}

Date.prototype.beforeDate = function(regex) {
    return this.rewind(regex);
}

Date.prototype.afterDate = function(regex) {
    return this.advance(regex);
}

String.prototype.toDate = function() {
    return Date.create(this);
}

String.prototype.isBeforeDate = function(endDate) {
    return this.toDate().isBefore(endDate.toDate());
}

String.prototype.isAfterDate = function(endDate) {
    return this.toDate().isAfter(endDate.toDate());
}



사용 예제

sugar.js 의 Date 라이브러리 와 추가된 함수들의 조합 이다.



var startDate = Date.create('today').beforeDate('5 day').toShortString();

var endDate = Date.create('today').afterDate('5 day').toShortString();
           
console.log(Date.create('today').toShortString());
console.log(Date.create('today').toLongString());
console.log(Date.create('today').beforeDate('5 day').toLongString());
console.log(Date.create('today').afterDate('5 day').toLongString());
           
console.log(startDate.isBeforeDate(endDate)); // 시작 날짜가 마지막 날짜 보다 [이전: true, 이후: false]
console.log(startDate.isAfterDate(endDate)); // 시작 날짜가 마지막 날짜 보다 [이전: false, 이후: true]
           
console.log(startDate.toDate());
console.log(endDate.toDate());



결과



2013-02-18

2013-02-18 12:00:00

2013-02-13 12:00:00

2013-02-23 12:00:00

true

false

Date {Wed Feb 13 2013 00:00:00 GMT+0900 (KST)}

Date {Wed Feb 23 2013 00:00:00 GMT+0900 (KST)}



조금 더 수월하게 작업을 할 수 있다.



순차적으로 요소를 제거 한다.


샘플 코드


var testArr =[1, 2, 3, 4, 5, 6];


testArr.shift();

console.log(testArr);



실행 화면


[ 2, 3, 4, 5, 6 ]



참고 사이트:  http://www.w3schools.com/jsref/jsref_shift.asp



자바스크립트에서는 각각의 이벤트리스너를 추가/삭제 할 수 있는 메서드를 제공한다.
그러나, 불행히도 IE와 다른 브라우저들간의 차이점이 존재하고 있다.


W3C 표준은 다음과 같은 addEventListener 메서드를 사용한다.


window.addEventListener('load', FunctionName, false);



IE는 attachEvent 메서드를 사용한다.


window.attachEvenet('onload', FunctionName);



'Javascript' 카테고리의 다른 글

Date 관리 하기 sugar.js 이용  (0) 2013.02.18
Array 요소 없애는 함수  (0) 2013.02.05
jQuery로 Ajax 처리시 Array 전송하기  (0) 2012.12.06
jQuery 다수의 Ajax 요청 처리 관련  (2) 2012.11.27
Date 함수 관련  (0) 2012.11.16

+ Recent posts