Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

CoffeeScript 환경 설정하기

CoffeeScriptJeremy Ashkenas가 만든 Transpiler입니다. Transpilier라고 하면 Brendan Eich가 JSConf 2011에서 사용한 말로(Brendan이 만든 말인지 아닌지는 말 모르겠습니다.) 컴파일러와 비교되어 바이트코드로 컴파일해주는 것이 아닌 다른 언어로 컴파일되는 언어를 의미합니다. 그래서 CoffeeScript는 커피스크립트로 코드를 작성하고 컴파일을 하면 JavaScript로 결과물이 나오게 됩니다. 커피스크립트에서 제공하는 간결하고 편리하게 제공되는 문법으로 코드를 작성하면 대응되는 자바스크립트로 변환이 되고 이 자바스크립트 코드가 실행됩니다. 문법에 대한 것은 차후 보기로 하고 간단히 커피스크립트를 설치하고 사용하는 것만 보겠습니다.


CoffeeScript에 대해서...
커피 스크립트는 앞에서 말한대로 Jeremy Ashkenas가 만들었으며 Jeremy는 자바스크립트 MVC프레임워크인 Backbone.js를 만든 사람이기도 합니다.

커피스크립트의 역사는 그리 길지 않습니다. 2009년 12월 13일에 Github를 통해서 첫 커밋을 하면서 프로젝트가 시작되었으며 커피스크립트 컴파일러는 최초에는 Ruby로 작성되었다가 2010년 3월에 커피스크립트로 다시 작성되었습니다. 2010년 12월 24일에 v1.0.0을 릴리즈하고 현재 버전은 v1.1.1입니다. 비록 역사는 짧지만 node.js와 함께 2010년에 자바스크립트개발자들 사이에서 많은 인기를 누렸으며 제가 개발자진영에서는 상당히 진보적인 그룹이라고 생각하는 Ruby On Rails의 Rails 3.1에서 정식 지원이 되면서 그 인기를 증명했습니다.

커피스크립트는 짧은 코드를 지향하고 있습니다. 코드는 일반적인 펑셔날 프로그래밍 언어들이 취하고 있는 특성들을 많이 취하고 있으며 루비나 파이썬과 유사한 형태의 문법을 취하고 있습니다. 짧은 코드는 읽기 쉽고 쓰기 쉽고 수정하기 쉽습니다.(라고 커피스크립트에서 얘기하고 있습니다.) 또한 커피스크립트는 자바스크립트와 섞어서 사용할 수 있기 때문에 이질감이 크지 않습니다. (커피스크립트 내부에서 자바스크립트를 사용할 수도 있지만 권하지는 않습니다.)


CoffeeScript 설치하기
커피스크립트의 컴파일러는 커피스크립트로 작성되었기 때문에 어떤 형태의 자바스크립트 인터프리팅 환경에서도 동작이 가능합니다. 대부분은 node.js의 환경위에서 사용하고 있고 그렇게 가이드되어 있지만 node.js를 사용하는 사람이 그리 많지는 않을 것이기 때문에 일반적인 웹브라우저에서 사용하는 것부터 보겠습니다. 커피스크립트 공식페이지에서 Try CoffeeScript의 웹콘솔에서 커피스크립트를 실행해 볼 수 있습니다.


웹브라우저에서 실행하기
직접 실행을 해보려면 커피스크립트의 최신버전을 다운로드 받아서 웹페이지에서 JavaScript를 불러오듯이 불러오고 <script type="text/coffeescript"> 태그안에(text/javascript가 아니라 text/coffeescript입니다.) 커피스크립트를 작성하면 실행시킬 수 있고 아래와 같은 형태가 됩니다.

<html>
  <head>
    <title>Coffee Test</title>
  </head>
  <body>
    <script type="text/coffeescript" charset="utf-8">
      square = (x) -> x * x
      cube   = (x) -> square(x) * x
      alert cube(5)
    </script>
    <script src="coffee-script.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

다운로드 받는 것조차 귀찮으면 github에 있는 coffee-script.js를 직접 인클루드 해도 됩니다.


node.js에서 사용하기
node.js에서 커피스크립트를 사용하면(아직 첫 인상이지만 사실 컴파일이라는 과정이 필요하기 때문에 클라이언트쪽 보다는 node.js에서 사용할 때의 coffeescript가 여러가지로 더 매력적일듯 합니다.) 커맨드라인에서도 커피스크립트 명령어를 사용할 수 있습니다.

node.js와 npm은 이미 설치되어 있다고 가정하고 다음의 npm명령어를 통해서 커피스크립트를 설치할 수 있습니다.

npm install -g coffee-script

-g 옵션을 준 것은 커맨드라인에서 coffee명령어를 사용하기 위해서 글로벌로 설치한 것입니다.

CoffeeScript REPL을 사용하는 화면

이제 커맨드라인에서 coffee 명령어를 입력하면 REPL을 사용해서 커피스크립트 코드를 테스트 해 볼 수 있습니다.(다른 REPL과 달리 아무것도 입력안하고 엔터를 누르면 문법이 틀렸다고 오류가나는것 말고는 맘에 듭니다. 엔터치면 그냥 다음줄로 넘어가야지 왜 오류가.. ㅠㅠ)

이제 coffee 명령어를 이용해서 .coffee 파일을 컴파일하거나 하는 등의 명령을 실행할 수 있고 coffee 명령어에서는 다음과 같은 옵션을 사용할 수 있습니다.

  • -c, --compile : .coffee 파일을 .js파일로 컴파일합니다
  • -i, --interactive : REPL을 실행합니다
  • -o, --output [DIR] : 컴파일된 js파일이 저장될 경로를 지정합니다. --compile이나 --watch와 함께 사용합니다.
  • -j, --join [FILE] : 컴파일전에 지정된 파일을 모두 합쳐줍니다.
  • -w, --watch : 커피스크립트파일이 수정될 때마다 다시 컴파일을 합니다.
  • -p, --print : 컴파일 결과를 파일로 만드는 대신에 stdout으로 출력합니다
  • -l, --lint : Javascript List가 설치되어 있다면 컴파일시에 체크합니다.
  • -s, --stdio : 파이프로 넘겨받은 커피스크립트를 Javascript로 출력합니다.예시: cat src/cake.coffee | coffee -sc
  • -e, --eval : 커맨드라인에서 커피스크립트 코드를 바로 실행해줍니다.예시: coffee -e "console.log num for num in [10..1]"
  • -r, --require : 스크립트를 컴파일하고 실행하기 전에 필요할 라이브러리를 로드합니다.
  • -b, --bare : 최상위레벨의 랩퍼없이 컴파일합니다.(node.js모듈로 사용할때 유용합니다.)
  • -t, --tokens : 커피스크립트를 파싱하는 대신에 분석하고 토큰스크립을 출력합니다: [IDENTIFIER square] [ASSIGN =] [PARAM_START (] ...
  • -n, --nodes : 컴파일하는대신에 분석하고 파싱하고 파싱된 결과를 출력합니다:
          Expressions
            Assign
              Value "square"
              Code "x"
                Op *
                  Value "x"
                  Value "x"
  • --nodejs : node.js에서 사용할 수 있는 --debug, --debug-brk, --max-stack-size같은 옵션을 지정합니다.


윈도우즈에서 coffee 명령어 사용하기
더이상 아래 내용을 사용할 필요가 없습니다. Windows에서 CoffeeScript 사용하기를 참고하세요.

웹브라우저에서 커피스크립트를 사용할 수 있기는 하지만 제대로 사용하려면 커맨드라인에서 사용해야 하는데 기본적으로 node.js는 윈도우즈에서는 사용할 수 없습니다. 대신에 CoffeeScript-Compiler-for-Windows라는 툴을 Alexey Lebedev가 만들어서 제공하고 있습니다.

윈도우즈용 컴파일러의 폴더구조

다운로드 받아서 압축을 풀면 위와같이 나타납니다.

윈도우즈 컴파일러를 사용하는ㅎ ㅗㅗㅏ면

커맨드창에서 해당 위치에 가서 coffee 명령어를 치면 커피스크립트를 사용할 수 있습니다. REPL은 제공되지 않는듯 합니다. 간단히 컴파일은 해보니 정상적으로 컴파일이 되기는 하는데 해당 프로젝트에서 가이드아는데로 본격적으로 쓰려면 node.js환경에서 하기를 권하고 있습니다. 커피스크립트를 최신버전으로 업데이트하려면 src폴더 안에 있는 coffee-script-builtin.js파일을 새버전으로 교체해 주면 됩니다.


Conclusion
저같은 경우는 이런 형태의 프레임워크류는(커피스크립트는 프레임워크라고 보기에는 무리가 있지만...) 과거에는 그다지 좋아하지 않았습니다. 구체적으로 말하면 어떤 언어나 플랫폼을 더 쉽게 사용할 수 있도록 제공되는 중간단계의 무언가를 사용하는 것을 별로 좋아하지 않았습니다.(단순 랩핑되거나 재사용을 위한 라이브러리와는 다릅니다.) 제가 안좋아했던 이유는 사실 이렇게 제공되는 것이 )그동안은...)그다지 편리하지도 않은 느낌이었고 이런 걸 너무 사용할 경우 타겟이 되는 언어나 플랫폼에 대한 지식을 쌓을 수 없기 때문입니다.(jquery만 쓰다보면 javascript를 잘 못하는 거랑 비슷하다고 할 수 있죠. jquery를 안좋아한다는건 아니지만요 ㅎ)

그러다가 최근에는 이런 류의 것들을 많이 써보면서 약간 생각이 달라졌습니다. css로 변환해 주는 stylus나 html로 변환해주는 Zencoding이나 jade같은 경우가 비슷한 경우라고 할 수 있는데 언어에 대한 것은 아니지만 상당히 편리한 느낌을 받으면서 잘 사용하고 있기 때문에 전보다는 좋게 보고 있습니다.(그동안 이런류의 것들이 더 좋아져서 그런것도 있겠지만요 ㅎ) 또한 앞에 언급한 것들은 대부분 축약 문법을 사용하고 있는데 Scala를 배우면서 세미콜론(;)이 코드를 읽는데 방해가 된다거나 {}이나 ()를 사용하지 않는 문법이 코드 작성시 꽤 편리함을 준다는 것을 느끼고 있는 터라 아직 제대로 사용해보진 않았지만 비슷한 컨셉의 커피스크립트를 좋게 보고 있습니다.(대신 익숙해 지기 전에는 암호처럼 보이는 효과가 있지요) 좀 사용을 해봐야 괜찮은지 감이 올 듯 합니다.


updated: 2012-01-08
2011/08/08 00:20 2011/08/08 00:20