[nodeJS] 1. 코드 관리기능 - 모듈화(module.export와 require) by rider

 nodeJS 스터디 첫번째 글입니다.

node.js in action을 참고해서 스터디한 내용을 간략하게 블로그에 이어서 올릴 예정입니다.

 본론으로 들어가서, 

개발과 유지보수의 편리함을 위해서는 코드 관리가 필요가 필요합니다.

노드에서 사용되는 코드관리기능인 모듈화 입니다.

ex) * currency.js 

var Currency = function(canadianDollar) {        //생성자 선언
this.canadianDollar = canadianDollar;
}

Currency.prototype.roundTwoDecimals = function(amount) {   
return Math.round(amount * 100) / 100;
}

Currency.prototype.canadianToUS = function(canadian) {
return this.roundTwoDecimals(canadian * this.canadianDollar);
}

Currency.prototype.USToCanadian = function(us) {
return this.roundTwoDecimals(us / this.canadianDollar);
}

module.exports = Currency;    //외부에서 접속 가능하도록 모듈화

* test-currency.js

var Currency = require('./currency');  //모듈을 불러와서 사용
canadianDollar = 0.91;

var currency = new Currency(canadianDollar);
console.log(currency.canadianToUS(50));

위의 소스는 객제지향형 예제로 위와같이 정리하면 코드관리가 편합니다.

그리고 require는 노드에서 사용되는 몇 안되는 동기식I/O다. 보통 파일의 가장윗부분에서 인클루드됩니다.

동기식I/O기 대문에 어플리케이션I/O가 많이 발생하는 부분에서는 사용을 피하는게 바람직합니다.

자바스크립트 slice함수 by rider

배열과 같은 요소에서 특정부분만 추출하거나 변경하고 싶을때 사용하면 좋은 함수입니다.

.slice(startIndex, [endIndex]) 로 사용합니다.

ex)   <ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

이런 구조에서 3번째 li태그부터 마지막 li태그까지만 추출해서 사용이 가능합니다.
$('#list').slice(2,4).hide(); 이렇게 사용하면 3번째 li부터 5번째 li까지 숨겨집니다.
        endIndex는 생략하면 가장 마지막 인덱스까지 포함됩니다.


jQuery플러그인 제작시 체인구조를 위한 return this by rider

메소드 체인은 jQuery 함수를 사용하여 현재 선택된 요소에
jQuery 메소드를 끝없이 연결하여 적용할 수 있게 하는 기법입니다.
ex) $('div').hide();                                       
     $('div').css('font-size', '12px');                  
     $('div').addClass("on");        
     $('div').show();   
     ==>  $('div').hide().css('font-size','12px').addClass('on').show();
위와 같은 방법으로 선택자를 한번만 호출하고 여러 기능을 수행하는 방법입니다. 

 내부적으로 각 메소드들은 항상 jQuery 메서드가 적용되기 전에 선택된 요소를 반환하기 때문에,
메소드를 이어갈 수 있게 됩니다.
그래서 메소드 체인을 이어가기 위해서는 jQuery플러그인을 제작할때는 항상 return this;를 붙여야 합니다.
플러그인의 형태는 이런식이 되겠죠.
(function($){
       $.fn.methodName = function(){
        return this.each(function(){       //this를 리턴
alert($(this);
}
       }
})(jQuery);

sublime text에서 javascript 콘솔 출력 by rider

javascript가 브라우저 위에서 돌아가는 언어라서 콘솔창에 출력하려면 js의 서버버전인 node.js가 필요합니다.

1. node.js설치
   - httpsL//nodejs.org 로 이동해서 설치

2. sublime text의 build 환경 설정
      - tool -> Build System -> New Build System
- {
"cmd":["node",$file"],
  "selector":"source.js"
   }
   입력

      - 
        - 파일 이름 : node.sublime-build
    파일 형식 : JSON으로 저장

3. tool - build system 에서 node선택

4. file - new file로 새 파일 열고 test.js로 파일 저장

5. console.log("hello"); 입력 후 ctrl_b 눌러서 출력 확인

jQuery 부모 엘리먼트 찾기 - closest(), parents() by rider

DOM 트리에서 부모 엘리먼트를 찾을때 사용하는 메소드입니다.

ex)  <ul id='1'>
<li id='1-1'></li>
<li id='1-2'></li>
<ul id='2'>
<li id='2-1'></li>
<li id='2-2'></li>
</ul>
</ul>

위와 같은 구조의 DOM트리가 있을때, 

$('#2-1').parents().each(function() {
alert($(this).attr('id);
});
를 실행하면 1과 2가 알림창에 뜹니다.

그리고 
$('#2-1').closest().each(function() {
alert($(this).attr('id);
});
를 실행하면 2만 알림창에 뜹니다.

1 2 3 4