기본 콘텐츠로 건너뛰기

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 로 인정하기 때문에 익명 함수를 함수의 인자로 전달할 경우는 인식되지 않는 문제가 발생한다. 따라서 이를 변수로 받아서 처리해야 한다.

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

태그

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

OData 에 대해서 알아보자.

얼마 전에 어떤 회사에 인터뷰를 하러 간 적이 있었다. 당시 그 회사는 자체 솔루션을 개발할 기술인력을 찾고 있었고 내부적으로 OData를 사용한다고 했다. 좀 창피한 이야기일 수도 있지만 나름 기술적인 부분에서는 많은 정보를 가지고 있다고 했던 것이 무색하게 OData란 단어를 그 회사 사장님에게서 처음 들었다. 작고, 단순한 사이트들만을 계속해서 작업을 하다 보니 어느덧 큰 줄기들을 잃어버린 것을 느끼기 시작했다. 명색이 개발이 좋고, 기술적인 기반을 만들려고 하는 인간이 단어조차도 모른다는 것은 있을 수 없는 것이라서 다시 새로운 단어들과 개념들을 알아보는 시간을 가지려고 한다. OData (Open Data Protocol) 란? 간단히 정리하면 웹 상에서 손쉽게 데이터를 조회하거나 수정할 수 있도록 주고 받는 웹(프로토콜)을 말한다. 서비스 제공자 입장에서는 웹으로 데이터를 제공하는 방식으로 각 포탈 사이트들이 제공하는 OPEN API 포맷을 독자적인 형식이 아니라 오픈된 공통규약으로 제공 가능하며, 개발자는 이 정보를 다양한 언어의 클라이언트 라이브러리로 어플리케이션에서 소비할 수 있도록 사용하면 된다. 공식 사이트는 www.odata.org 이며 많은 언어들을 지원하고 있다. 좀더 상세하게 정의를 해 보면 OData는 Atom Publishing Protocol  (RFC4287) 의 확장 형식이고 REST (REpresentational State Transfer) Protocol 이다. 따라서 웹 브라우저에서 OData 서비스로 노출된 데이터를 볼 수 있다. 그리고 AtomPub 의 확장이라고 했듯이 데이터의 조회만으로 한정되는 것이 아니라 CRUD 작업이 모두 가능하다. Example 웹 브라우저에서 http://services.odata.org/website/odata.svc 를 열어 보도록 하자. This XML file does not appear to have any style in...
댓글 6개
자세한 내용 보기

C# 에서 Timer 사용할 때 주의할 점.

예전에 알고 지내시던 분의 질문을 받았다. Windows Forms 개발을 하는데, 주기적 (대략 1분)으로 데이터 요청을 하는 프로그램을 작성하기 위해서 Timer 를 사용하는데, 어떤 기능을 처리해야 하기 때문에 Sleep 을 같이 사용했다고 한다. 여기서 발생하는 문제는 Sleep 5초를 주었더니, Timer 까지 5초 동안 멈춘다는 것이다. Timer 라는 것은 기본적으로 시간의 흐름을 측정하는 기능이기 때문에 Sleep 을 했다고 해서 Timer 가 멈추는 일은 생겨서는 안된다. 그러나 실제 샘플을 만들어 보면 ... Timer 가 Sleep 만큼 동작이 멈추는 것을 확인할 수 있다. Windows Forms 는 UI Thread 를 사용하는 것으로 최적화 되어 있으며 여기서 Timer 를 쓰면 UI Thread 에 최적화된 System.Windows.Forms.Timer 가 사용된다. 여기서 문제의 발생이 시작되는 것이다. Sleep 을 사용하게 되면 UI Thread 가 Sleep 이 걸리기 때문에 여기에 속한 Timer 까지도 멈추는 것이다. 이런 문제를 해결하기 위해서는 System.Threading.Timer 를 사용해야 한다. 이 Timer 는 별도의 Thread 에서 동작하기 때문에 Sleep 의 영향을 받지 않는다. 언뜻 보면 쉬운 해결 방법인 것 같지만 Thread 가 분리되었기 때문에 Timer 가 돌아가는 Thread 에서 UI Thread 의 메서드나 컨트롤에 접근하기 위해서는 별도의 명령을 사용해야 하는 문제가 존재한다. 자~ 그럼 여기서 Timer 에 대해서 다시 한번 정리해 보도록 하자. .NET 에서 제공하는 Timer 들 .NET 에서는 기본적으로 3가지 Timer를 제공하고 있다. (MSDN) System.Windows.Forms.Timer - 사용자가 지정한 간격마다 이벤트를 발생시키며 Windows Forms 응용 프로그램에서 사용할 수 있도록 최적화 되어 있다. System...
댓글 7개
자세한 내용 보기

[Logging] NLog 사용법 정리...

SCSF 에는 기본적으로 Enterprise Library가 사용된다. 예전에도 그랬지만 기능은 훌륭하고 많은 부분에서 최적화(?)된 것일지도 모르지만, 역시나 사용하기에는 뭔가 모르게 무겁고, 사용하지 않는 기능이 더 많다라는 느낌을 지울수가 없다. 이번 프로젝트도 SCSF를 기반으로 하고 있지만, Enterprise Library를 걷어내고 각 부분에 전문화된 오픈 소스를 사용하기로 하였다. 예전에는 Log4Net을 사용했지만, 대량 사용자 환경에서는 메모리 누수와 기타 문제점이 존재한다는 MS 컨설턴트(?)의 전해진 말을 들은 후로는 사용하지 않는다. 대안으로 사용하는 것이 NLog 이다. 조금 후에는 3.0 버전도 나온다고 홈 페이지에 기재되어 있지만, 그 때가 되면 프로젝트는 끝나기 때문에 현재 2.1.0 버전을 사용하기로 했다. [원본 출처] http://cloverink.net/most-useful-nlog-configurations-closed/ 위의 참조 자료에는 다양한 정보들이 존재하므로 꼭 링크를 통해서 관련된 정보를 확인하고 이해하는 것이 좋을 듯 하다. 여기서는 당장 필요한 부분만을 정리하도록 한다. [ Logger 찾기 ] 기본적으로 Logger가 존재하는 클래스를 기반으로 Logger 정보를 구성한다. Logger logger = LogManager.GetCurrentClassLogger(); 주로 Namespace 기반으로 Logger를 설정하는 경우에 유연하게 사용할 수 있다. 또 다른 방법으로는 지정한 문자열로 특정 Logger를 직접 선택하는 방법도 제공된다. 이를 혼용해서 Namespace와 직접 지정 방식을 같이 사용할 수도 있다. 물론 Logger 환경 설정에서 Wildcard (*)를 지정할 수도 있다. Logger logger = LogManager.GetLogger("Database.Connect"); Logger logger = LogManager.Get...
댓글 1개
자세한 내용 보기