Skip to content

COFFEESCRIPT Study #2 : 커피스크립트 설치하기

2013년 7월 4일

커피스크립트를 사용해 개발하려면 어떻해야 할까요?

일단 커피스크립트를 사용할 수 있는 환경설정을 해야합니다. 커피스크립트는 서버에 Javascript (이하JS)파일로 컴파일 해서 올려야 하기 때문에 컴파일 할 수 있는 환경이 중요합니다.

물론 일반 편집기로 작성한 뒤 Coffescript (이하 CS) 인터프리터로 컴파일 하면서 작업할 수도 있지만, IDE개발 환경에 익숙해진 우리내 개발자들은 이젠 더이상 그런 형태로는 개발할 수 없겠죠.

안타갑게도 CS는 역사가 그리 깊지 않아 개발환경이 제한되어 있습니다. 하지만 제공되있는 형태로 사용하게되면 이보다 편할 순 없을 것 같습니다.

일단 환경설정 개요를 알려드릴게요.

1. IntelliJ : IDE개발툴

2. FileWatcher : IntelliJ에서 활용하는 플러그인

3. Coffeescript Watcher : FileWatcher에서 사용할 Watcher 플러그인

위 세개를 설치하시면 됩니다.

지면관계상 IntelliJ 설치는 생략하겠습니다.

IntelliJ를 설치하시면 이러한 화면을 보실 수 있습니다.

스크린샷 2013-07-04 오후 6.05.37

이미 상당히 많은 커피스크립트 파일이 작성되어 있습니다.

그다음 파일 와처를 설치합니다.

IntelliJ 파일 와처 다운로드 링크 :  http://plugins.jetbrains.com/plugin/7177?pr=idea

일로 들어가셔서 다운로드 받습니다. 받아서 그냥 설치하시면 됩니다.

스크린샷 2013-07-04 오후 6.11.44

설치하시면 설정에 이러한 부분이 생깁니다.

이제 여기에 Coffeescript Plugin을 추가하시면 됩니다.

밑에 + 버튼이 있죠? 이것을 눌러 플러그인을 추가하시면 됩니다.

플러그인은 보이는 것 처럼  Coffeescript를 추가해 Check해 주시면 끝입니다.

일단 많은 과정을 생략했는데요. 위에 대략적으로 세가지 과정을 마치시면 된다고 보시면 됩니다.

설치를 완료하면 이러한 기능들이 생깁니다.

스크린샷 2013-07-04 오후 6.14.47

coffee라는 확장명으로 파일을 작업하면 자동으로 js파일로 컴파일 됩니다.

간단하게 이렇게 코딩해 봅시다.

————————————————————

jQuery ->
   class Test

————————————————————

위와같이 코딩하면 Test라는 클래스를 만드는 내용입니다. 플러그인은 jQuery 로 활용하고 있구요. 이것은 나중에 설명해 보겠습니다.

아무튼 이렇게 쓰고 저장하면 컴파일된 파일을 볼 수 있습니다. 어떠세요?

마치 전문가가 코딩한 듯한 Javascript가 생성되지 않았나요?

설치를 마치셨으면 절반을 하신 거나 다름이 없습니다.

고생하셨습니다.

Advertisements

From → Development

댓글 남기기

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: