CoffeeScript?? 넌 뭐에 쓰는 물건이냐? 토요일, 7월 27, 2013 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 로 인정하기 때문에 익명 함수를 함수의 인자로 전달할 경우는 인식되지 않는 문제가 발생한다. 따라서 이를 변수로 받아서 처리해야 한다. 이제 커피 스크립트에 대한 기본적인 내용을 대강 정리해 보았다. 아직은 이런 정도로 뭘 작성하고 테스트할 수 있는 수준은 아니므로 하나씩 구체적인 사례를 중심으로 정리해 보기로 한다. 공유 공유 링크 만들기 Facebook X Pinterest 이메일 기타 앱 태그 CoffeeScript 공유 공유 링크 만들기 Facebook X Pinterest 이메일 기타 앱 댓글
댓글
댓글 쓰기