[CoffeeScript] 설치하고 간단 사용하기

CoffeeScript를 설치하고 사용해 보자 

1. 설치하기

  - Node.js 설치함

  - NPM(Node Package Manager) 설치함 : npm을 통하여 coffe-script 를 설치한다 

  - 참조 : http://coffeescript.org

D:\Development\javascript>npm install -g coffee-script

npm http GET https://registry.npmjs.org/coffee-script

npm http 200 https://registry.npmjs.org/coffee-script

C:\Documents and Settings\UserXP\Application Data\npm\cake -> C:\Documents and Settings\UserXP\Application Data\npm\node_modules\coffee-script\bin\cake

C:\Documents and Settings\UserXP\Application Data\npm\coffee -> C:\Documents and Settings\UserXP\Application Data\npm\node_modules\coffee-script\bin\coffee

coffee-script@1.4.0 C:\Documents and Settings\UserXP\Application Data\npm\node_m

odules\coffee-script

D:\Development\javascript>coffee -v

CoffeeScript version 1.4.0

2. Coffee 사용하기 

  - 확장자 .coffee 파일을 만든다

  - coffee 명령으로 수행할 수도 있고, js 파일로 컴파일 할 수도 있다

  - 일반적인 js 코딩 : arr.js

function makeArray(dimension) {
        var arr = [], i = 0, j = 0;
	for(; i < dimension; i++) {
		arr[i] = [];
		for( j=0; j < dimension; j++) {
			arr[i][j] = '1111';
		}
	}
	return arr;
}

var myArr = makeArray(4);

console.log(myArr);

// 결과 

D:\coffeescript>node arr

[ [ '1111', '1111', '1111', '1111' ],

  [ '1111', '1111', '1111', '1111' ],

  [ '1111', '1111', '1111', '1111' ],

  [ '1111', '1111', '1111', '1111' ] ]

- CoffeeScript 코딩 방식 : arr.coffee (coffee 확장자)

makeArray = (dimension) ->
	arr = []
	for i in [0...dimension]
		arr[i] = []
		arr[i][j] = '1111' for j in [0...dimension]
	arr
	
myArr = makeArray 4

console.log myArr	

console.log 'dowon hi'

// 결과 

D:\coffeescript>coffee arr.coffee

[ [ '1111', '1111', '1111', '1111' ],

  [ '1111', '1111', '1111', '1111' ],

  [ '1111', '1111', '1111', '1111' ],

  [ '1111', '1111', '1111', '1111' ] ]

- CoffeeScript js를 일반 js 파일로 컴파일 하기 

D:\coffeescript>coffee -c arr.coffee

// 컴파일로 생성된 arr.js 소스 파일 

// Generated by CoffeeScript 1.4.0
(function() {
  var makeArray, myArr;

  makeArray = function(dimension) {
    var arr, i, j, _i, _j;
    arr = [];
    for (i = _i = 0; 0 <= dimension ? _i < dimension : _i > dimension; i = 0 <= dimension ? ++_i : --_i) {
      arr[i] = [];
      for (j = _j = 0; 0 <= dimension ? _j < dimension : _j > dimension; j = 0 <= dimension ? ++_j : --_j) {
        arr[i][j] = '1111';
      }
    }
    return arr;
  };

  myArr = makeArray(4);

  console.log(myArr);

  console.log('dowon hi');

}).call(this);

3. Coffee Watching & REPL(레플) 사용하기

  - coffee 파일이 변경되어 저장되는 시점에 자동으로 컴파일 되도록 한다 : watch

  - w 옵션을 준다 

////////////////////////////////

// watch 옵션 주기

D:\Development\coffeescript>coffee -cw arr.coffee

17:51:59 - compiled arr.coffee

17:52:29 - compiled arr.coffee   <--- arr.coffee 파일 마지막에 새로운 내용을 넣고 저장하면 자동으로 compile 됨

////////////////////////////////

// REPL을 통하여 coffee 수행해 보기

D:\Development\coffeescript>coffee

coffee> 1 + 1

2

coffee> arr = []

[]

coffee> arr[0] = 'dowon'

'dowon'

coffee> arr

[ 'dowon' ]

coffee> arr.push 'hi'

2

coffee> arr

[ 'dowon', 'hi' ]

coffee> arr[1]

'hi'

coffee>

4. Single Page Application (SPA : 스파) 를 만들때 CoffeeScript를 사용하자

  - 코딩을 간결하게 해준다

  - global variable등의 사소한 문법오류를 잡아준다 

  - 그러나 compile된 코드는 좀 긴것 같아서 byte 수의 증가를 초래하는 듯하다

  - BackboneJS와도 잘 어울린다 

Single Page Web Applications with CoffeeScript, Backbone and Jasmine from pirelenito

<참조>

  - CoffeeScript Love