CoffeeScript?? 넌 뭐에 쓰는 물건이냐?

CoffeeScript 를 사용하는 곳이 점점 더 많아지는 듯 하고 SPA 를 구성하는 쪽은 기본인 것처럼 표현하는 것이 대부분이라서 CoffeeScript에 대해서 알아 보도록 한다. 
 
 
<h3>
설치</h3>
 
<a href="http://coffeescript.org/" target="_blank">CoffeeScript</a>를 쉽게 설치하려면 NodeJS를 설치한 후에 NPM (Node Package Manager)를 통해서 설치하면 된다. 


 
<pre class="brush:plain;">C:\Temp> npm install -g coffee-script
... 설치과정 생략...
C:\Temp> coffee -v
CoffeeScript version 1.6.3</pre>
<h3>
기본 사용법</h3>
 
사용법은 아주 쉽다. 확장자는 *.coffee 로 만들면 되고, coffee 명령으로 실행 또는 js 파일로 컴파일을 할 수도 있다. 
 
그럼 일반적인 코딩 방식의 차이점을 알아보도록 하자. 
 
아래의 코드는 일반 js 코드 방식이다. 
<pre class="brush: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 arr = makeArray(4);
console.log(arr);</pre>
 아래의 코드는 동일한 내용을 Coffee 방식으로 변환한 것이다. 
<pre class="brush:js;">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</pre>
 실행된 결과는 동일하다. 단지 위의 문법 차이에서 볼 수 있는 것과 같이 몇 가지 특징을 가지고 있다. 
 
<ul>
<li>자바스크립트를 위한 고급 언어라고 생각하면 된다. (적당한 표현인지 모르겠다)</li>
<li>자바스크립트의 애매한 문법의 단점을 보완하고 실수할 수 있는 부분을 최소화한 것이다. 위의 코드에서도 세미콜론(';') 이 없다.</li>
<li>Scope 을 위한 Block 의 범위는 Indent 를 기준으로 판단한다.</li>
<li>코드가 보다 직관적이고 간결해 진다. (가끔은 너무 축약이 아닌지 싶지만)</li>
<li>익숙해지고 난 후에는 가독성이 좋다. (더욱이 Indent 로 코드가 깔끔하다)</li>
<li>자바스크립트의 prototype을 이용한 OOP 유사 케이스 구현을 Coffee에서는 좀 더 그럴듯하게 사용 가능하다.</li>
</ul>
<div>
 
아마도 Python 이나 Ruby를 사용한다면 문법이나 특징이 많이 비슷한 점을 느낄 수 있을 것이다. 
 
 
<h3>
기본적인 명령어들</h3>
<pre class="brush:plain;"><< 실행 명령 >>
C:\Temp> coffee test.coffee
<< 컴파일 명령 >>
C:\Temp> coffee -c test.coffee
<< watch 옵션 설정 >>
C:\Temp> coffee -cw test.coffee // 해당 파일이 변경된 후에 저장되면 자동으로 컴파일 한다.
<< 명령어 실행 모드>>
C:\Temp>coffee
coffee> 1 + 1
2
coffee> arr = []
[]
coffee> arr[0] = 'coffee sample'
coffee sample
coffee> arr
['coffee sample']
coffee> arr.push 'test'
2
coffee> arr
['coffee sample', 'test']</pre>
 
 
<h3>
SPA (Single Page Application) 에 Coffee 를 쓰면 좋은 이유와 문제점??</h3>
 
 
<ul>
<li>코드를 간결하게 유지할 수 있다.</li>
<li>Global Variable 등과 충돌 같은 자주 발생하는 문법 오류를 잡아낼 수 있다. (CoffeeScript 는 사용된 변수를 모두 익명 함수 내부 변수로 처리하므로 전역 변수와 충돌을 방지한다)</li>
<li>Backbone 등과 같은 front (client) framework과도 잘 어울린다. (물론 전부를 모두 검증해 본 것은 아니다)</li>
<li>컴파일 된 코드가 직접 작성한 코드보다 길다. 따라서 Minify 등의 문제가 존재하기 때문에 이를 위해서 Coffeebar 와 같은 추가적인 처리가 필요하다.</li>
<li>var 를 사용할 수 없기 때문에 자바스크립트와 다른 범위 규칙을 가지며 항상 상위에 변수가 선언되므로 전역변수와 이름이 같은 경우는 전역변수를 덮어쓴다.</li>
<li>함수는 무조건 내부에서 계산된 값을 반환하므로 return을 써줄 필요는 없지만, 이로 인해서 for, while 등의 반복문도 반환을 하는 형식이 되므로 null 이라고 마지막 문장을 추가로 써서 불필요한 반환을 제거해야 한다.</li>
<li>블록의 경계를 '{ ... }' 로 사용하지 않고 indent 로 인정하기 때문에 익명 함수를 함수의 인자로 전달할 경우는 인식되지 않는 문제가 발생한다. 따라서 이를 변수로 받아서 처리해야 한다.</li>
</ul>
 이제 커피 스크립트에 대한 기본적인 내용을 대강 정리해 보았다. 
아직은 이런 정도로 뭘 작성하고 테스트할 수 있는 수준은 아니므로 하나씩 구체적인 사례를 중심으로 정리해 보기로 한다. </div>

MSFL :: 모리스 소프트웨어 공작소

이 블로그 검색

CoffeeScript?? 넌 뭐에 쓰는 물건이냐?

태그

댓글

댓글 쓰기