기본 콘텐츠로 건너뛰기

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

CoffeeScript 를 사용하는 곳이 점점 더 많아지는 듯 하고 SPA 를 구성하는 쪽은 기본인 것처럼 표현하는 것이 대부분이라서 CoffeeScript에 대해서 알아 보도록 한다.


설치


CoffeeScript를 쉽게 설치하려면 NodeJS를 설치한 후에 NPM (Node Package Manager)를 통해서 설치하면 된다.

C:\Temp> npm install -g coffee-script
... 설치과정 생략...
C:\Temp> coffee -v
CoffeeScript version 1.6.3

기본 사용법


사용법은 아주 쉽다. 확장자는 *.coffee 로 만들면 되고, coffee 명령으로 실행 또는 js 파일로 컴파일을 할 수도 있다.

그럼 일반적인 코딩 방식의 차이점을 알아보도록 하자.


아래의 코드는 일반 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);

아래의 코드는 동일한 내용을 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

실행된 결과는 동일하다. 단지 위의 문법 차이에서 볼 수 있는 것과 같이 몇 가지 특징을 가지고 있다.

  • 자바스크립트를 위한 고급 언어라고 생각하면 된다. (적당한 표현인지 모르겠다)
  • 자바스크립트의 애매한 문법의 단점을 보완하고 실수할 수 있는 부분을 최소화한 것이다. 위의 코드에서도 세미콜론(';') 이 없다.
  • Scope 을 위한 Block 의 범위는 Indent 를 기준으로 판단한다.
  • 코드가 보다 직관적이고 간결해 진다. (가끔은 너무 축약이 아닌지 싶지만)
  • 익숙해지고 난 후에는 가독성이 좋다. (더욱이 Indent 로 코드가 깔끔하다)
  • 자바스크립트의 prototype을 이용한 OOP 유사 케이스 구현을 Coffee에서는 좀 더 그럴듯하게 사용 가능하다.

아마도 Python 이나 Ruby를 사용한다면 문법이나 특징이 많이 비슷한 점을 느낄 수 있을 것이다.


기본적인 명령어들

<< 실행 명령 >>
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']


SPA (Single Page Application) 에 Coffee 를 쓰면 좋은 이유와 문제점??



  • 코드를 간결하게 유지할 수 있다.
  • Global Variable 등과 충돌 같은 자주 발생하는 문법 오류를 잡아낼 수 있다. (CoffeeScript 는 사용된 변수를 모두 익명 함수 내부 변수로 처리하므로 전역 변수와 충돌을 방지한다)
  • Backbone 등과 같은 front (client) framework과도 잘 어울린다. (물론 전부를 모두 검증해 본 것은 아니다)
  • 컴파일 된 코드가 직접 작성한 코드보다 길다. 따라서 Minify 등의 문제가 존재하기 때문에 이를 위해서 Coffeebar 와 같은 추가적인 처리가 필요하다.
  • var 를 사용할 수 없기 때문에 자바스크립트와 다른 범위 규칙을 가지며 항상 상위에 변수가 선언되므로 전역변수와 이름이 같은 경우는 전역변수를 덮어쓴다.
  • 함수는 무조건 내부에서 계산된 값을 반환하므로 return을 써줄 필요는 없지만, 이로 인해서 for, while 등의 반복문도 반환을 하는 형식이 되므로 null 이라고 마지막 문장을 추가로 써서 불필요한 반환을 제거해야 한다.
  • 블록의 경계를 '{ ... }' 로 사용하지 않고 indent 로 인정하기 때문에 익명 함수를 함수의 인자로 전달할 경우는 인식되지 않는 문제가 발생한다. 따라서 이를 변수로 받아서 처리해야 한다.

이제 커피 스크립트에 대한 기본적인 내용을 대강 정리해 보았다.
아직은 이런 정도로 뭘 작성하고 테스트할 수 있는 수준은 아니므로 하나씩 구체적인 사례를 중심으로 정리해 보기로 한다.

댓글