node.js 를 이용해서 개발한지가 몇개월 지났습니다. 그동안 언어 배우느라 (자바스크립트를 할 줄 몰랐음) - 사실 언어 자체는 어려울게 하나도 없더군요. - 개발 환경에 익숙해 져야 해서 좀 더 나에게 맞는 편리한 환경을 만들 여력이 없었으나 이제는 어느정도 익숙해 져서 개발 환경쪽에 신경이 쓰이더군요. (사실은 웹일을 하기 싫어서 딴 짓을 하고 있..)
제가 설명드리는 기준은 OSX 입니다. (우분투를 사랑하지만 제 개발 환경은 OSX 라..)
avascript 개발하는데 있어서는 완전 필수입니다. 문법 체크까지 해서 이상한 거는 빨간 밑줄을 그어주더군요. (빨간펜 선생님?!!)
설치법 입니다.
$ svn checkout http://js2-mode.googlecode.com/svn/trunk/ js2-mode
$ cd js2-mode
$ emacs --batch -f batch-byte-compile js2-mode.el
$ cp js2-mode.elc ~/.emacs.d/
이러면 설치 끝입니다. 일단 설치만 하고 나중에 설정을 하기로 합니다.
yasnippet
TextMate 의 함수 템플릿 기능을 보고 만든 Minor 모드 입니다. 이런 것이 이맥스의 가장 큰 장점입니다. 필요하면 만들면 된다!!
이것의 사용법은 쉽습니다. 예를 들면 자바스크립트 코딩할 때 함수 선언할 일이 필요하다면
fun 입력하고 TAB 을 누르면 함수의 템플릿이 자동으로 생성됩니다.
/** */
function my_function( args ){
}
이런식으로 그러면 함수 설명과 my_function 과 args 부분을 적어주기만 하면 됩니다.
https://github.com/capitaomorte/yasnippet 여기에 잘 정리가 되어 있습니다. 설치법도 있지만 퍼 와서 보자면
$ cd ~/.emacs.d/plugins
$ git clone https://github.com/capitaomorte/yasnippet
.emacs 파일의 한 구석에
(add-to-list 'load-path
"~/.emacs.d/plugins/yasnippet")
(require 'yasnippet)
;; (yas-global-mode 1)
(yas-global-mode 1) 는 필요할 때만 쓰게 일단은 커멘트 처리 해 둡니다.
js2-mode 인덴테이션(indentation) 수정
js2-mode 를 쓰거나 아니면 이클립스에서 개발을 하거나, 가장 문제가 되는 것이 바로 이 인덴테이션이더군요. 정말 그지 같은 인덴테이션 아닌가요? 탭 (tab) 한번 누르면 화면의 1/3 정도 지나쳐서 커서가 위치하는 것을 보면 한숨이 나오더군요. 그런데 역시 세상에는 같은 고민을 가지고 있으면 해결할려고 하는 사람도 있는 법입니다.
바로 여기 입니다. 여기에 보면 수정하는 방법이 잘 정리가 되어 있습니다. js2-mode 는 이미 설치를 했기 때문에 중간에서 설명하고 있는 에스프레소(espresso) 를 설치해줍니다. (java 가 커피라 그런지 에스프레소 등등의 네이밍들이 요즘 눈에 띄는군요 ㅎㅎ)
여기서 받아주면 됩니다. 이 모드를 설치해 주는 이유는 인덴테이션이 좋기 때문이라고 글쓴이가 설명하고 있더군요. 참고로 저는 저 파일을 ~/.emacs.d/ 밑에 복사해 뒀습니다. 역시 설치만 하고 설정은 나중에 하는 걸로 합니다. 여기까지 설치가 됐으면 이제 글쓴이가 만든 함수 부분이 기니까 한꺼번에 설정하겠습니다.
~/.emacs.d/ 에 파일 한개를 만들어 줍니다. (제 경우에는 cr-js.el 이였습니다)
그러면 cr-js.el 이라고 가정을 하고 다음 과 같은 내용을 추가 해 줍니다. 그리고 다음과 같이 파일은 만들어 줍니다.
그리고 .emacs 파일에
(require 'cr-js)
한줄만 추가해 주면 됩니다.
내친김에 다른 것도 손을 좀 볼까요?
node.js 에서 웹을 개발할 때 쓰는 view 엔진이 여러개가 있습니다. (정확히는 express) 기본적으로 jade 가 쓰이고요. 디자이너들과 공동 작업을 할 때는 ejs 가 많이 쓰인다고 합니다. ejs 를 쓸때 마땅한 모드가 없더군요. 그런데 ruby on rails 에서 사용하는 rhtml 이 문법이 거의 비슷하더군요. 그래서 rhtml-mode 를 설치해 주기로 합니다.
요게 다른 모드랑 연계해서 동작하지 않고 독자적으로 rhtml 을 처리하더군요. 맘에 들어서 설치해줬습니다.
$ cd ~/.emacs.d
$ git clone git://github.com/eschulte/rhtml.git
그리고 .emacs 에
(add-to-list 'load-path "~/.emacs.d/rhtml")
(require 'rhtml-mode)
(add-to-list 'auto-mode-alist '("\\.ejs$" . rhtml-mode))
(add-hook 'rhtml-mode-hook
(lambda ()
(yas-global-mode 1)))
이렇게 추가해 주면 됩니다. 한가지 이상한 점이 있지요? rhtml 도 yas 모드가 있는지 궁금하실 것입니다. (설정에 보면 있는 것처럼 하는데) 그래서 설치해 주기로 합니다.
rails 용 snippet 을 모아둔 것들입니다. 당장은 rails 개발을 안할꺼기 때문에 rhtml 용만 떼어 오기로 합니다.
$ cd ~/
$ mkdir temp
$ cd temp
$ git clone git://github.com/eschulte/yasnippets-rails.git
$ cd yasnippet-rails
$ cd rails-snippets
$ cp -r rhtml-mode ~/.emacs.d/plugins/yasnippet/snippets/
이렇게 해주면 snippet 이 설치가 됩니다. 이제 편하게 코딩을 하시면 됩니다.
ps.
js2-mode 용 snippet 도 설치를 하셨다면 node.js 에서 자주 쓰이는 prototype method 선언하는 템플릿을 만들어 두면 편합니다. 제가 만들어 쓰는 것을 공개합니다.
js2-mode 용 snippet 도 설치를 하셨다면 node.js 에서 자주 쓰이는 prototype method 선언하는 템플릿을 만들어 두면 편합니다. 제가 만들어 쓰는 것을 공개합니다.
# -*- mode: snippet -*-
# name: protf
# contributor: Wolfgang crazia <crazia@gmail.com>
# --
/** $1 */
${2:my_class}.prototype.${3:method_name} = function ( ${4:args} ){
$0
}
이 파일 이름을 (확장자 없이) protf 로 만들고
~/.emacs.d/plugins/yasnippet/snippets/js2-mode/protf
로 저장하면 나중에 자바스크립트 파일 편집중에 protf 라고 입력하고 탭 (tab)키를 누르시면 자동으로 템플릿이 완성됩니다.
