Backbone.js를 익히기 전에 Underscore에 대해서 알아보자.
1) Underscore
- Functional Programming을 위한 자바스크립트 유틸리티 라이브러리
- 80 개의 펑션을 가지고 있다
- Groc 포멧의 소스코드 보기
- GitHub Underscore.js
- var _ 변수 사용
2) 테스트 돌려보기
- GitHub에서 다운로드 : git clone https://github.com/documentcloud/underscore.git
- package.json 내역
{
"name" : "underscore",
"description" : "JavaScript's functional programming helper library.",
"homepage" : "http://underscorejs.org",
"keywords" : ["util", "functional", "server", "client", "browser"],
"author" : "Jeremy Ashkenas <jeremy@documentcloud.org>",
"repository" : {"type": "git", "url": "git://github.com/documentcloud/underscore.git"},
"main" : "underscore.js",
"version" : "1.4.4",
"devDependencies": {
"phantomjs": "1.8.1-3"
},
"scripts": {
"test": "phantomjs test/vendor/runner.js test/index.html?noglobals=true"
}
}
- scripts 의 test 에서 phantomjs 사용함 : 참조에서 phantomjs를 설치한다 (웹브라우져 없이 테스트시 많이 사용)
+ phantomjs 를 이용한 테스트 코드 작성 연구에 도움이 되겠다
+ 테스트 코드는 underscore/test 디렉토리에 존재함
$ npm test
> underscore@1.4.4 test /Users/nulpulum/git-repositories/underscore
> phantomjs test/vendor/runner.js test/index.html?noglobals=true
2013-03-11 13:58:26.100 phantomjs[32711:f07] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead.
Took 2309ms to run 588 tests. 588 passed, 0 failed.
3) Collection Functions
- 테스트 코드
+ 모듈 설치하기 : npm install underscore
- 테스트 결과
//////////////////////////////////////
// 샘플 코드 짜고 node 로 결과 확인하기
$ node collection.js
-------each : 개별 요소를 지정한 function에서 수행
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
-------map : 각 요소를 지정한 callback에서 수행
3
6
9
-------reduce : 리듀싱
6
-------find : callback에서 찾는 즉시 break
2
-------filter : callback에 매칭되는 것만
[ 2, 4, 6 ]
-------reject : callback에 매칭되지 않는 것만
[ 1, 3, 5 ]
-------every : 모두가 지정한 값일 경우 참
false
-------some : 하나라도 지정한 값일 경우 참
true
-------contains : 포함하면 참
true
-------invoke : 펑션 호출
[ [ 1, 5, 7 ], [ 1, 2, 3 ] ]
-------pluck : 지정한 프러퍼티만 뽑아냄
[ 'dowon', 'haha', 'youngsik' ]
-------max : 지정한 프로퍼티중 최대인 것
{ name: 'youngsik', age: 99 }
-------min : 지정한 플터피중 최소인 것
3
-------groupBy : 그룹핑
{ '1': [ 1.3, 1.9 ], '2': [ 2.1, 2.4 ] }
-------countBy : callback 계산된 그룹핑 건수
{ odd: 3, even: 2 }
-------toArray : 배열 리턴
[ 2, 3, 4 ]
-------size : 크기
3
** 기타 몇가지 테스트 안한 API : where, findWhere, sortBy, shuffle 등
4) Array Functions
- 테스트 코드
- 테스트 결과
////////////////////////////////////////////////////////////////
// 테스트 코드를 작성하면서 nodemon 을 통하여 결과값을 확인한다
$ nodemon array.js
------first : 배열 첫번째 요소
5
------initial : 마지막 요소 제외한 배열
[ 5, 4, 3, 2 ]
------last : 배열 마지막 요소
1
------rest : 첫번째 요소 제외한 요소
[ 4, 3, 2, 1 ]
------compact : '' 0 false null등을 제외한 요소만
[ 4, 2 ]
------flatten : 1차원 배열로
[ 1, 2, 3, 4 ]
------without : 지정한 요소를 제거한 배열
[ 1, 1, 3, 4 ]
------union : 중복 제거
[ 1, 2, 3, 101, 11 ]
------intersection : 서로 중복되는 것만
[ 1, 2 ]
------uniq : 유니크한 것만
[ 1, 2, 3, 4, 5 ]
------zip : 각 배열의 요소끼리 2차원배열
[ [ 'a', 1, true ], [ 'b', 2, false ], [ 'c', 4, true ] ]
------object : 2개 배열의 요소를 javascript obejct형식의 {key:value}로 변환
{ a: 1, b: 2, c: 4 }
------indexOf : 앞에서 부터 지정한 위치
2
------lastIndexOf : 뒤에서 부터 지정한 위치
4
------sortedIndex : 지정한 값이 들어갈 위치
2
------range : 지정한 길이 만큼 배열 만들기
[ 0, 1, 2, 3 ]
5) Object Functions
- 테스트 코드
- 테스트 결과
//////////////////////////////////////////////////////
// coffee-script 로 작성하고 compile과 watch 옵션을 준다
$ coffee --compile --watch object.coffee
//////////////////////////////////////////////////////
// nodemon 으로 컴파일된 object.js 를 모니터링한다
$ nodemon object.js
11 Mar 16:40:06 - [nodemon] app crashed - waiting for file changes before starting...
11 Mar 16:40:14 - [nodemon] restarting due to changes...
11 Mar 16:40:14 - [nodemon] /Users/nulpulum/development/underscore/test/object.js
11 Mar 16:40:14 - [nodemon] starting `node object.js`
--------keys : 오브젝트의 키만
[ 'one', 'two', 'three' ]
--------values : 오브젝트의 값만
[ 1, 2, 3 ]
--------pairs : 각 오브젝트를 key:value 형태로
[ [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] ]
--------invert : key:value를 거꾸로
{ '1': 'one', '2': 'two', '3': 'three' }
--------functions : 객체의 모든 펑션
[ '_',
'after',
'all',
'any',
'bind',
'bindAll',
'chain',
'clone',
'collect',
'compact',
'compose',
'contains',
'countBy',
'debounce',
'defaults',
'defer',
'delay',
'detect',
'difference',
'drop',
'each',
'escape',
'every',
'extend',
'filter',
'find',
'findWhere',
'first',
'flatten',
'foldl',
'foldr',
'forEach',
'functions',
'groupBy',
'has',
'head',
'identity',
'include',
'indexOf',
'initial',
'inject',
'intersection',
'invert',
'invoke',
'isArguments',
'isArray',
'isBoolean',
'isDate',
'isElement',
'isEmpty',
'isEqual',
'isFinite',
'isFunction',
'isNaN',
'isNull',
'isNumber',
'isObject',
'isRegExp',
'isString',
'isUndefined',
'keys',
'last',
'lastIndexOf',
'map',
'max',
'memoize',
'methods',
'min',
'mixin',
'noConflict',
'object',
'omit',
'once',
'pairs',
'partial',
'pick',
'pluck',
'random',
'range',
'reduce',
'reduceRight',
'reject',
'rest',
'result',
'select',
'shuffle',
'size',
'some',
'sortBy',
'sortedIndex',
'tail',
'take',
'tap',
'template',
'throttle',
'times',
'toArray',
'unescape',
'union',
'uniq',
'unique',
'uniqueId',
'values',
'where',
'without',
'wrap',
'zip' ]
--------extend : 두객체를 합침
{ name: 'dowon', age: 33 }
--------pick : 원하는 것만 끄집어 냄
{ age: 33 }
--------omit : 원하는 것을 삭제함
{ name: 'dowon' }
--------defaults : 기본 값으로 대체
{ flavor: 'chocolate', orange: 'lots' }
--------clone : 객체 복제하기
{ name: 'dowon', age: 33 }
--------tap : 오브젝트 필터링시에 사용
[ 2, 400 ]
--------has : 키가 존재하는지 체크
true
** 그외 is** 관련 펑션이 존재함 (true/false 결과 리턴)
6) Utility Functions
- 테스트 코드
- 테스트 결과
$ coffee --compile --watch utility.coffee
$ nodemon utility.js
1 Mar 17:07:19 - [nodemon] clean exit - waiting for changes before restart
11 Mar 17:08:06 - [nodemon] restarting due to changes...
11 Mar 17:08:06 - [nodemon] /Users/nulpulum/development/underscore/test/utility.js
11 Mar 17:08:06 - [nodemon] starting `node utility.js`
------noConflict : _ 언더바가 다른 모듈과 쫑나면 변경가능
[Function]
------identity : 복사
{ name: 'dowon' }
------times : 횟수만큼 수행
0
1
2
------random : min~max 사이값 랜덤 생성
10
------mixin : 모듈에 펑션을 확장시킴
Youngsik
------uniqueId : 유니크 아이디를 만들어 줌
dowon_1
------escape
dowon & young > hi <
------unescape
dowon & young > hi <
------result : 지정된 키의 값 반환
hi
------template : 템플릿 엔진 <% ... %> 기본, {{ ... }} 등으로 변경가능
hello: dowon
------chain : 객첵를 여러 메소드에 걸쳐서 수행하고 싶을 경우 최초에 한번에 넣는다
youngsik is 22
// 1) 과 2)는 동일한 표현이다
1) _.map([1, 2, 3], function(n){ return n * 2; });
2) _([1, 2, 3]).map(function(n){ return n * 2; });
<참조>
- Underscore.js 테스트 코드
- PhantomJS 설치하기
- package.json의 test 스크립트 구동하기 (Testing)
