CoffeeScript 시작하기

CoffeeScript 란 ?

 CoffeeScript 는 복잡한 문법을 가지고 있는 자바스크립트 언어의 특성 때문에 나오게된 일종의 언어 입니다. 좀더 자세히 설명하자면 커피스크립트로 작성된 파일은 자바 스크립트로 변환되어 사용 되지만 좀더 간단한 문법으로 스크립트를 작성할수 있도록 해줍니다.

 사용의 용도는 당연히 Javascript 문서를 더욱 간결하게 작성하기 위해서 입니다. 간단한 예제를 아래의 코드로 확인해 보시기 바랍니다. 아래의 코드는 Coffeescript.org 에서 확인하실수 있습니다. 

CoffeeScript GitHub

CoffeeScript 코드

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

Javascript 코드

var cubes, list, math, num, number, opposite, race, square,
  slice = [].slice;

number = 42;

opposite = true;

if (opposite) {
  number = -42;
}

square = function(x) {
  return x * x;
};

list = [1, 2, 3, 4, 5];

math = {
  root: Math.sqrt,
  square: square,
  cube: function(x) {
    return x * square(x);
  }
};

race = function() {
  var runners, winner;
  winner = arguments[0], runners = 2 <= arguments.length ? slice.call(arguments, 1) : [];
  return print(winner, runners);
};

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

cubes = (function() {
  var i, len, results;
  results = [];
  for (i = 0, len = list.length; i < len; i++) {
    num = list[i];
    results.push(math.cube(num));
  }
  return results;
})();

 사용 환경은 크게 2가지로 나눌수 있습니다. 웹 환경에서 사용하거나 NodeJS 상에서 coffeescript를 이용할 수 있습니다. 제 경우 NodeJS 에서 사용하기 위해서 학습 중 이긴 하지만 여기서는 우선 웹에서 사용하는 2가지 방법 우선 설명 드리겠습니다. 

1. 웹 문서에서 직접 coffeescript 사용하기

 웹에서 직접 사용 하는 방법은 coffee-script.js 를 javascript 를  불러오듯 type="text/javascript" 를 이용하여 불러 온 후 type="text/coffeescript"를 이용하여 *.coffee 스크립트를 불러 오거나 문서 내에 직접 스크립트를 작성하실 수 있습니다. 

<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script>
<script type="text/coffeescript">
  # 커피스크립트 코드
score = 76
grade = switch
  when score < 60 then 'F'
  when score < 70 then 'D'
  when score < 80 then 'C'
  when score < 90 then 'B'
  else 'A'
# grade == 'C'
</script>

2. 웹에서 coffeescript 를 이용하기전 js 로 변환하여 사용하기

 

 두번째 방법 은 npm 에 coffeescript 를 설치 후 *.coffee 를 작성한 후 js 로 컴파일 하여 사용하는 방법입니다. coffeescript 에서도 1 번 방법 보다는 2 번 방법을 추천하니 알아 두시기 바랍니다.

  우선 npm 에 -g 옵션을 이용하여 coffee-script 를 설치하여 주시기 바랍니다. ( npm 은 Nodejs 패키지 관리 툴로 NodeJS 설치해주셔야 합니다. 링크를 참고하시기 바랍니다. )

2015/03/02 - [Programming Language/NodeJS] - Windows 에 NodeJS 설치하기

2015/03/06 - [Programming Language/NodeJS] - Ubuntu 에서 Node JS 시작하기

2015/03/08 - [Programming Language/NodeJS] - NodeJS 업데이트 하기

2015/03/08 - [Programming Language/NodeJS] - Nodejs 글로벌 ( Global ) 패키지 설치 및 npm package.json 관리

npm 을 설치하셨다면 아래의 명령어로 coffeescript 의 설치가 가능합니다.

npm install -g coffee-script

 이제 1 번 방법에서 사용된 예제 코드로 *.coffee 문서를 하나 작성하도록 합니다. 그리고 아래의 명령어로 coffeescript 를 javascript 문서로 변경하여 보시기 바랍니다.

coffee -c test.coffee

 -c 는 컴파일 옵션으로 coffee 를 이용하여 *.coffee 파일을 js 파일로 변경해주는 역할을 합니다. 아래는 1 번 방법에서 사용된 코드를 js 파일로 변경한 결과 입니다.

// Generated by CoffeeScript 1.10.0
(function() {
  var grade, score;

  score = 76;

  grade = (function() {
    switch (false) {
      case !(score < 60):
        return 'F';
      case !(score < 70):
        return 'D';
      case !(score < 80):
        return 'C';
      case !(score < 90):
        return 'B';
      default:
        return 'A';
    }
  })();

}).call(this);

이제 변경된 js 파일을 웹에서 javascript 와 같이 이용하시면 됩니다.

만약 coffeescript 파일을 그대로 실행하고 싶으시다면 위의 명령어에서 -c 를 제거하시면 됩니다.

coffee test.coffee

문법이나 coffee 의 사용법에 관해서는 뒤에서 설명 드리도록 하겠습니다.