블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2013. 3. 11. 17:13 Backbone.js

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 &amp; young &gt; hi &lt;

------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)


posted by 윤영식