What is this? 가 이것은 무엇인가요가 아닌  this 란 무엇인가요? 라는 말 장난을 쳐 둔 포스트의 내용이 있습니다. 



객체지향 프로그래밍 (Object Oriented Programming) 언어에 보면 this 라는 애가 등장합니다. 여기서의 this 는 간단해서 Object 자신을 가르키고 있습니다. 

다만 Javascript 의 this 는 이와 달라서 class 내에 선언된다고 해도 꼭 그 class 객체를 지정하지는 않습니다. 이 알송 달송한 javascript 의 this 를 체계적으로 잘 설명한 글 입니다.


왠만하면 번역을 해서 편하게 설명할 까 했는데 너무 양이 많아서 엄두가 나지 않는군요 ㅎㅎ;; 대신 결론 부분만 조금 언급을 하자면 this 는 실행 범위 (scope) 의 영향을 받는 다는 것입니다. 

1. 새로운 실행범위를 만드는 유일한 길은 function 키워드를 이용해서 입니다. 

2. var 용법은 현재 범위에만 통용되는 변수를 만들게 해줍니다. 만약 local 범위에서 var 를 이용해서 변수를 만든다면 그 변수는 외부에서 선언된 같은 이름의 변수를 덮어버립니다. 

3. this 와 argument 를 제외한 모든 변수들은 lexical 범위를 따릅니다. (이 뜻이 뭔고하니 함수나 파일 안 같은 물리적인 범위를 말합니다)

4. this 와 argument 는 (일반적인 OOP 와는 다르게) 각각의 불려지는 Context 환경에 따라 다릅니다. 얘네들을 클로져 (closure) 안에 포함시키고 싶다면 참조 (reference) 시키는 코드를 작성해야 합니다. 

5. this 의 값은 함수가 어떻게 불려지느냐에 따라 정의됩니다. 이것을 조절하고 싶다면 call 이나 apply 를 이횽해야 합니다. 


만약 OOP 에서 사용되는 this 의 용법을 구현하려고 하면 좀 복잡한 방법을 써야 한다고 합니다. 그런데 그렇게 구현하는 방법을 고심할 바에는 javascript 의 문법에 익숙해지는 것이 낫다는 충고를 줍니다.

자세한 내용은 본문에 예제와 함께 잘 정리되어 있습니다. 

전통적인 프로그래밍 언어들에 있어서 프로그래밍 방식이란 순차적으로 실행되는 형식을 취합니다. 쉽게  말해서 

var a = FunctionA () ; // 10 초 걸림
var b = FunctionB () ; // FunctionA 가 실행된지 10초 후에 실행됨 


이러한 방식으로 앞에 실행된 것(FunctionA)이 완벽하게 끝나야지만 다음 것(FunctionB)이 실행됩니다.
너무나 당연한가요? 사실 순차적으로 실행되는 것은 Node.js 에서도 일반적인 방식입니다. 다만 약간의 차이가 있을 뿐입니다. 

Node.js 에서 위 함수가 실행되는 방식을 알아보기로 할까요? 

var a = FunctionA () ; // 10 초 걸림
var b = FunctionB () ; // FunctionA 가 실행된후 바로 실행됨 


FunctionA 는 실행이 완료되기 까지 10초가 걸리지만 바로 리턴됩니다. (어딘가에서는 실행이 계속 되고 있겠지요?) 그리고 FunctionB 가 바로 실행이 됩니다. 

이렇게 실행되는 방식이 Asynchronous 하게 실행된다고 합니다. 또 이렇게 실행되는 이유는 Node.js 가  Event-Driven 방식이기 때문입니다. 

여기서 잠깐..

 
만약 전통적인 프로그래밍 방식에서 FunctionA 와 FunctionB 가 동시적으로 실행되게 할려면 어떻게 할까요? Thread 프로그래밍을 통해서 두 함수가 동시적으로 실행되게 할수 있습니다. 

반면 실행 자체가 Event-Driven 이어서 Asynchronous 하게 실행이 되지만 Node.js 에서는 Concurrency 문제가 없습니다. (Lock/Mutex 개념을 신경 쓸 필요가 없습니다)


그러면 Node.js 에서 Synchronous 하게 실행하려면 어떻게 해야 할까요? 즉 FunctionA 가 실행이 완료된 후에 FunctionB 가 실행이 되게 할려면? 

이래서 CallBack 이라는 개념이 등장합니다. 제 기억에서 콜백(Callback) 개념은 윈도우 프로그램을 할 때 등장합니다. OS 가 불러주는 개념으로 배웠었는데 여기에서는 어떤 단위함수가 작업을 끝마치고 불러주는 개념으로 통합니다. 

Node.js 의 Asynchronous 형식의 함수들은 100% Callback 함수를 인자로 받아들이게 되어 있습니다. 

FunctionA ( FunctionB ()); // 10초 걸림
var c = FunctionC () ;


이런 형식으로 부르게 됩니다. 위 코드는 FunctionA 를 실행하고 바로 리턴되서 FunctionC 를 실행합니다. 그리고10초 있다가 (FunctionA 가 끝날 때 까지 걸리는 시간) FunctionB 가 실행됩니다. 

이게 일반적인 Node.js 의 Asynchronous 방식입니다. 

그러면 끝으로 Node.js 에서 Synchronous 형식으로 되어 있는 함수와 Asynchronous 형식으로 되어 있는 함수의 차이를 살펴보고 리턴값을 어떻게 처리하는 지 살펴보겠습니다. 중요한 부분이라 꼭 이해하고 넘어가야 합니다. 

fs.readFile(filename, [callback]);

이라는 함수가 있습니다. 파일 이름과 callback 함수를 인자로 받습니다. Asynchronous 함수입니다. callback 을 받으니 당연하겠지만, 그리고 non-blocking 함수 입니다. 이 말인 즉슨 실행하고  바로 리턴한다는 뜻입니다. 

fs.readFileSync(filename);


이라는 함수가 있습니다. Asynchronous 함수에 Sync 가 붙어 있고 callback 함수를 인자로 받아들이지 않습니다. Synchronous 함수란 뜻입니다. 그리고 함수가 다 실행될 때까지 다음 것이 실행되지 않으니 blocking 함수입니다.

Synchronous 함수는 결과를 리턴합니다. 

var data = fs.readFileSync('/etc/passwd');


반면 Asynchronous 함수는 결과를 Callback 함수에게 넘겨 줍니다. 

fs.readFile('/etc/passwd' , function(err, data) { .. });


Sync 방식의 함수에서의 Return 값인 data 가 Async 방식에서는 Callback 함수의 인자로 넘겨지는 것을 확인할 수가 있습니다. 

이런 방식이 주는 혼란점은 나중에 다뤄 보기로 하겠습니다. 



지금 하고 있는 간단한 App 서버를 만들기 위해서 Node.js 를 사용해 보고 있는 중입니다. 빠르고 간단하고 아주 쉽게 App 서버를 만들 수 있는 강력한 툴이지만, 조금만 깊이 들어가면 골치 아픈 구조더군요. 

Async Hell 이라고 불리는 CallBack 이 CallBack 을  부르고 , 또 부르고 부르고 부르고.. 한 5단계 내려가게 되면 환장하겠더군요 

지금까지 제가 익숙하게 다뤄온 언어들이 대부분 Event-Driven 방식이 아니라서 그런지 적응하는데 시간이 좀 걸릴거 같습니다.

 
몇년전에 ROR (Ruby on Rails)이 이슈화 될때의 유명한 ScreenCast 가 생각납니다. '15분만에 블로그' 만들기 였는데, 그 뒤로 새로운 언어나, 새로운 웹프레임워크의 강력함을 설명하기 위해서 항상 블로그를 얼마만큼 빠르게 만들어 낼 수 있는가가 그 척도가 되는 듯 합니다. 

Node.js
도 예외는 아닌듯 싶은데, 실제로도 빠르게 만들어 볼 수가 있으며, 사용하는 사람에게 프로그램을 짜는 즐거움까지 전달합니다. 

제가 예전에 정리한 포스트 에서 마지막에 실전 예제라고 소개하는 직접 블로그 만들기에 관한
 예제입니다. 소스가 예전 버젼에 맞춰져 있기 때문에 현행화를 조금 거쳤습니다. 

환경
    

    OSX Mountain Lion 
    Node.js v0.8.14 
    express 3.0.1
    jade 0.27.7


입니다. 그 외 소소한 것은 Default 를 쓴다고 해도 별 무리는 없을 듯 합니다. (OSX 에서 node.js 와 
npm 설치 방법은 여기 참조 하시면 됩니다)

1. express 를 설치해 줍니다.
    
   

 $ sudo npm install -g express 

       
express 를 전역으로 설치해 주라는 명령입니다. 전역은 별 다른 차이가 없다고 보시고 다만 명령행이 존재한다면 그 명령을 command line 상에서 사용할 수 있다는 점이 다르다고 보면 됩니다. 

2. 프로젝트를 만들어 줍니다. blog 라는 이름이 좋아보이는 군요. 

       $ cd ~/work
       $ mkdir blog
       $ cd blog
       $ express -c stylus
       $ npm install -d 


프로젝트를 만들고 연관된 하위 라이브러리들을 전부 설치해 주라는 명령입니다. 

3. nodemon 을 설치해줍니다. 

       $ sudo npm install nodemon


express 로 코딩을 하다보면 뭐 변경될 때마다 Ctrl-c 누르고 '화살표 위'를 누르는 횟수가
 비약적으로 많아집니다. nodemon 은 js 파일이 변경될 때마다 자동으로 파일을 재구동해주는 편리한 툴입니다. 손가락에 병 생기기 전에 미리 미리 깔아줍시다. 

4. 기본 템플릿으로 만들어진 것을 구동시켜 봅니다. 

       $ cd ~/work/blog
       $ nodemon app.js


구동시키면 다음과 같은 에러가 발생합니다. 

`doctype 5` is deprecated, you must now use `doctype html`
(예전하고 변경됐군요.)
       
 ~/work/blog/views/layout.jade 파일을 열어서 에러메시지처럼 변경해줍니다. 

 doctype 5 -> doctype html 


 로 변경해줍니다. 

http://localhost:3000 을 브라우져에 입력하면 아무것도 안했지만 자동으로 만들어진 내용들이 화면에 출력됩니다. 

5. 데이타베이스를 만들어 봅니다. 나중에는 Mongodb 와 연결할 것입니다. 하지만 처음에는 메모리에
 간단한 타입으로 만들어서 테스트 해 볼것입니다. 

       $ cd ~/work/blog
       $ emacs articleprovider-memory.js 



자 수많은 callback 들하고 higher-order function 들이 난무하기 때문에 정신 사납지만 조금만 익숙해지면 쉽게 볼 수가 있을 것입니다. 사실 고백하자면 Synchronous 방식에 익숙해져 있다면 Node.js 의 거의 대부분을 이루고 있는 Asynchronous 방식이 많이 혼동될 수가 있습니다. 언젠가 언급을 하겠지만 미리 소스를 읽기 쉽게 가볍게 설명을 드리면 

- Callback 함수는 소스 볼 때 잊어버리는 것이 편하다. 
  Callback 은 Asynchronous 일 때 함수의 원하는 행동이 끝나고 나서 추가로 동작하는 방식으로 구동됩니다. function A (id , callback ) ; 이라는 함수가 있다면 A 의 내용이 수행되고 그 다음에 차례로 callback 이라는 함수가 실행된다고 보는 것이 편합니다. 

- function A (id, function (err, result) {..}) ; 와 같은 형식으로 선언이 되어 있다면 
  A 를 실행하기 위해서 파라미터로 id 가 필요하고 그 결과가 err 와 result 로 나온다 라고 보시면 편하게 이해되실 수 있습니다. 

드릴 말씀이 많지만 이 부분을 기억하시고 소스를 보시는 것이 마음 편하게 이해되실 듯 합니다. 


6. 5 에서 만들어준 방식과 app.js 와 연동 시켜보는 작업을 해 줍니다. 

       app.js 를 열어서 

       var express = require('express')
          , routes = require('./routes')
 , user = require('./routes/user')
 , http = require('http')
 , path = require('path');


의 아래에 
       

       var ArticleProvider = require('./articleprovider-memory').ArticleProvider;


과 같이 추가해 줍니다. 

       // app.get('/', routes.index);


기존의 소스를 커멘트 처리 해주시고 
       
그 위에다가 
 


을 추가해 줍니다. 

부연 설명을 드리자면 GET 방식으로 들어온 요청 '/' 에 대해서 function (req, res) 을 수행하라는 내용입니다. 그리고 다시 그 안으로 들어가 보면 articleProvider.findAll 을 수행하고 난 뒤에 function (error, docs) 를 수행하라는 뜻입니다. articleProvider.findAll 의 결과는 error, docs 가 되겠지요? 이 부분을 확실하게 이해를 하는 것이 좋을 것입니다. 거의 대부분이 이런 형식으로 이루어져 있습니다. Asynchronous 방식과 higher-orders function (함수를 입력 파라미터로 넘겨 받는 방식) 그리고 Anonymous function 이 섞여있는 Node.js 의 전형적인 방식의 함수 모습입니다. 

app.get 은 URL 로 넘겨온 값을 '매칭' 하는 함수이고 그것을 실행한 결과를 function (req, res) 로
 넘기고, articleProvider.findAll 은 articleprovider-memory.js 에서 선언한 함수입니다. 저장된 데이터를 전부 가져오고 난 뒤에 파라미터로 선언된 Anonymous function 인 function (error, docs) 를 실행하고 그 결과값 - 저장된 데이터 - 가 docs 로 넘겨집니다. 

http://localhost:3000 에 다시 잘 동작하는 지 확인해 봅니다. 

7. 이제 포장 작업을 해줄 차례입니다. 

       $ emacs ~/work/blog/views/index.jade


로 기본 화면 구성을 열어줍니다. 


jade
 라고 불리는 HTML 엔진입니다. 위 처럼 써주면 대응되는 HTML 코드로 바꾸어 줍니다. 자세한 것은 따로 공부를 하시면 됩니다. (저도 뭐 HTML 은 고수가 아니라서..)

extends layout 이라는 것은 layout.jade 로 부터 확장한다는 뜻입니다. 기초적인 설정은 전부 그곳에
 있다고 해도 과언이 아니겠지요? 

       $ emacs ~/work/blog/views/layout.jade 


로 열어줍니다. 



body 부분에 쓰여져 있는 block content 가 index.jade 의 block content 와 대응되리라는 것을 쉽게
 알 수가 있습니다. (응?..)

8.
jade 파일이 준비가 됐다면 app.js 에서 바꾸어 줄 필요가 있습니다. 


여기서 res.send 는 기본적인 내용을 전달하는 것이므로 (그래서 json 기반의 app 서버 작성시 편합니다) 렌더링 해주는 함수로 변경해줘야 합니다. 위 내용을 


index.jade 를 기본으로 삼되, title 에는 'Blog' 값을 넘기고 , articles 에는 docs 를 넘기라는
 내용입니다. 

9. 이쁘장 (?) 하게 바꾸어줄 시간입니다. (It's CSS Time!!)

귀찮으니까 나중에 쓸 내용까지 전부 CSS 로 밀어 넣기로 합니다. 참 이 내용은 stylus 라는
 라이브러리를 이용합니다. 

       $ emacs ~/work/blog/public/stylesheets/style.styl





인덴테이션이 중요합니다. 이 파일을 작성하면 이 파일에서 style.css 를 자동으로 생성하는 것 같습니다. (자세히는 모르겠음..)
        
여기까지 작성이 완료 됐다면 http://localhost:3000 으로 확인 바랍니다. 색.. 색깔이 나올것입니다. 

10. 새로 글 작성하는 기능을 추가해 보겠습니다. MVC 모델에 따라서 , M 은 이미 작성되어 있고
 (articleprovider-memory.js) 로 , V 에 해당하는 부분을 작성해 줍니다. 

$ emacs ~/work/blog/views/blog_new.jade



음.. 암호 같지요? 저한테도 암호 같습니다. 당분간 외워서 하는 수밖에 없을 듯합니다. 

11. 10 에 대응되는 C (controller) 부분을 추가해 줍니다. 2개의 라우팅 부분을 추가해 줍니다. 

$ emacs ~/work/blog/app.js



app.get 은 GET 방식 , app.post 는 POST 방식입니다. app.get 방식으로 '/blog/new' 로 브
라우져에서 접속하면 blog_new.jade 를 렌더링 하고 , 그 렌더링 페이지에서 내용을 입력하고 Send 버튼을 클릭하면 articleProvider.save 함수를 호출하고 res.redirect 함수로 '/' 에 돌아간다는 내용입니다. http://localhost:3000/blog/new 로 이동해서 테스트 해보기 바랍니다. 

12. 이제 mongodb 를 붙일 시간입니다. 지금까지 만들어온 메모리 버젼은 소스 변경하면 (nodemon 이
 알아서 app.js 를 재구동하니..) 작성하고 테스트 한 내용이 날라가버립니다. 그런 귀찮음을 제거하고자 mongodb 를 연동하는 것입니다. 

먼저 mongodb 모듈을 설치해야 합니다. . 

$ emacs ~/work/blog/package.json




에 위와 같이 "mongodb": "*" 를 추가해 주고 

$ cd ~/work/blog
$ npm install -d 


를 실행 합니다. 
 

13. 이제
mongodb 와 연결해서 포스트 관리해 주는 articleprovider-mongodb 를 제작할 시간입니다.

$ cd ~/work/blog
$ emacs articleprovider-mongodb.js 




14. memory 에서 articleprovider-mongodb 로 바꼈기 때문에 연관된 부분을 app.js 에서 수정할 필요가 있습니다. 

$ cd ~/work/blog
$ emacs app.js


아래와 같이 변경 해줍니다. 

var ArticleProvider = require('./articleprovider-mongodb').ArticleProvider;
//var ArticleProvider = require('./articleprovider-memory').ArticleProvider;


 
메모리를 로딩하는 부분을 comment 처리해주고 그 위로 내용을 추가해 줍니다. articleprovider 를 mongodb 기반으로 바꾸어 준다는 내용입니다. 

var articleProvider = new ArticleProvider('192.168.0.87', 27017);
// var articleProvider = new ArticleProvider();


이 내용은 192.168.0.87 서버에 mongodb 가 띄어져 있고 27017 port 로 접속한다는 이야기
 입니다. 제 경우는 머신이 두대 있을 경우에 쓰는 방법이고 대부분 한 서버에서 같이 동작시킬 때는 192.168.0.87 대신 localhost 라고 입력해 주시면 됩니다. 

또 저와같이 다른 머신에 mongodb 데몬을 띄워논 경우에는 그 머신의 mongodb.conf 파일을 열어서 bind_ip 부분을 comment 처리 하거나 

bind_ip = 192.168.0.* 


으로 같은 대역대에 있는 접속을 허용하는 식으로 변경해 주어야 외부에서 접속이 됩니다. 물론 내부는 세팅해 줄 필요가 없습니다. mongodb.conf 파일은 ubuntu 경우에는 /etc/mongodb.conf 존재합니다. 

15. index 페이지에서 개별 개별 포스트를 클릭했을 때 , 내용을 상세하게 보여주는 페이지 부분에 대한 작성 입니다. 

먼저 V (views) 부분에 대한 처리입니다. 

$ emacs ~/work/blog/views/blog_show.jade



jade 는 꼭 시간을 들여서 익히셔야 합니다. (저도..) 웹 개발이 빨라집니다. 

16. index 페이지에서 개별 개별 포스트를 클릭했을 때 , C (controller) 에 해당하는 라우팅 하는
 부분을 app.js 에 추가해줍니다. 

$ emacs ~/work/blog/app.js




http://localhost:3000 으로 화면을 띄우고 개별 Post 를 클릭하셔서 제대로 동작되는 지 확인하시면 됩니다. 

17. 이제 개별 Post 에 댓글 기능을 추가해 보겠습니다. 16 에서 열어둔 파일에 마저 작업을 해
 줍니다. POST 방식으로 댓글을 Post 에 추가하는 로직입니다. 

$ emacs ~/work/blog/app.js



을 추가해 줍니다. View 에 해당하는 것은 언제 추가해 주냐고요? 15 에서 추가해 줬습니다. 자 이제 모든 것이 완성 됐습니다. http://localhost:3000 에서 확인해 주시기 바랍니다. 

원문 은 여기서 확인 가능합니다. 구버젼 node.js 와 express 로 되어 있어서 현행화 이슈가 있었기에 제가 정리하는 김에 현행화를 한 것입니다. 

제가 현행화한 모든 소스는 https://github.com/crazia/nodejs-mongodb 여기에서 다운 받을 수
 있습니다. 

$ cd ~/work
$ git clone git://github.com/crazia/nodejs-mongodb.git 
$ cd nodejs-mongodb
$ npm install -d 
$ node app.js 


하시면 쉽게 완성된 형태를 따라하실 수 있습니다. 

Node.js 와 Node.js 를 잘 활용하기 위한 웹 프레임워크까지 쭈욱 따라하기 식으로 하루만에 쫓아갈 수 있는 훌륭한 튜토리얼이 정리되어 있습니다. 비록 영어이긴 하지만 신기술은 번역되어 있는 것을 구하기 힘드니 여기서 쭈욱 따라가시면서 이해만 하시면 충분히 node.js 로 바로 웹 사이트 하나 만들 수 있는 실력을 구비하실 수 있을 것입니다. 

Node.js 설치하기 는 예전 제 포스트를 참조하시면 됩니다. 

기본 (The Basics) (1-2 시간 소요)


기본적인 문법과 Asynchronous 코딩에 대한 기본을 설명해주고 있는 훌륭한 책입니다. 정말 쭈욱 따라하시면 됩니다. 

더 깊게 들어가기 (Going Deeper) (1 시간 소요)

chapter7 Asynchronous 한 Control Block 에 관한 개요와 설명입니다. 꼭 읽어볼만한 부분입니다. 
추가로 chapter9 , chapter10 , chapter11 도 보시면 좋습니다. 

익스프레스 웹 프레임워크 (The Express Web Framework) (45 분 정도 소요)

아쉽게도 현재 동영상 서비스를 중단한 상태더군요. nodetuts.com 에서 서비스 되고 9, 10, 11  편입니다. 빨리 서비스 재개가 됐으면 좋겠습니다.

정말 간단하고 빨리 웹 개발을 할 수 있는 Express 프레임워크에 대한 설명입니다. 간단한 app server 만들기에 거의 최적화 되어 있다고 보면 됩니다. 비디오로 되어 있고 3편입니다. 

실제 예제 (A Real Example) (1 시간 소요)

express-mongodb 익스프레스와 몽고디비를 연결해서 구현하는 방법에 관한 실전 예제입니다. 

참조 사이트 : http://project70.com/nodejs/beginners-tutorial-node-js/ 


Slime 이 무엇인지 Emacs 를 사용하시는 분들은 대충 아시리라 봅니다. REPL (Read Eval Print Loop)형태를 지원하는 언어에 대한 최적의 개발 환경이라고 보시면 됩니다. (물론 부정하는 분들도 많습니다) 

저는 Common Lisp , Clojure 등을 Slime 을 이용해서 개발환경을 구축해 두었습니다. 이번에 프로젝트를 Node.js 로 진행하게 되어서 (Node.js 또한 REPL 을 지원합니다) Emacs + Slime 으로 환경을 구축할려고 알아보았습니다. 

역시나 괜찮은 솔루션이 하나 등장하더군요. https://github.com/swank-js/swank-js

Slime 은 Swank 라는 방식으로 각기 언어별로 소켓 접속이 가능한 방식으로 서버를 띄우면 Emacs 에서 slime-connect 를 이용하여 서버에 붙어서 정보를 가져오고 전달하는 방식으로 구동됩니다. 이러한 점 때문에 원격에 swank 서버를 띄워도 마치 local 에 붙는 것처럼 붙어서 동작할 수가 있습니다. 

설치하는 방법 (OSX - Mountain Lion 기준 입니다)

1. Node.JS 와 npm 을 설치합니다. (Ubuntu 설치는 예전 포스트 참조 )

     

 $ sudo port install nodejs 
 $ sudo port install npm 


2. swank-js 설치 합니다. 
       

 $ sudo npm install -g swank-js 


swank-js 는 node.js 로 만들어진 swank 모듈입니다. 위에서 잠깐 언급한 slime 이 접속할 수 있는 서버를 띄워주는 모듈입니다. npm install 시에 -g 옵션을 주면 전역으로 설치하라는  명령입니다. 이제 어디서나 swank-js 명령으로 swank 서버를 띄워줄 수가 있습니다. 

3. SLIME 을 설치해야 할 시간입니다.

$ cd ~/.emacs.d/
$ cvs -d :pserver:anonymous:anonymous@common-lisp.net:/project/slime/cvsroot co slime


위와 같은 방식으로 다운 받는 것이 속도가 가장 빠르더군요. git 사이트는 생각보다 많이 느립니다. 


4. js2-mode 를 받아야 합니다. 

http://code.google.com/p/js2-mode/ 에서 js2-20090723b.el 을 다운 받아서 js2-mode.el 로 이름 변경해서 적당한 곳 (저는  ~/.emacs.d/ 밑에다 가져다 뒀습니다) 에 옮겨두고 byte-compile-file 을 해줍니다. 

Emacs 를 실행하고 
       

M-x byte-compile-file 


로 js2-mode.el 을 지정하면 됩니다. 이때 꼭 명심해야 할 사항은 절대 js2-mode.el 을 버퍼에 올려둔 상태로 컴파일 진행하면 안된다는 것입니다. (올려둔 상태로 컴파일 하면 에러가 발생함)

.emacs 파일을 열고 다음과 같은 내용을 추가해 줍니다. 

       (autoload 'js2-mode "js2-mode" nil t)
       (add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))



5. 적당한 곳에 swank-js 프로젝트를 다운 받습니다. 
       
     

 $ cd ~/work
 $ git clone git://github.com/swank-js/swank-js.git



6. slime-js.el 의 심볼릭-링크 를 만들어 줍니다. 

$ cd ~/.emacs.d/slime/contrib
$ ln -s ~/work/swank-js/slime-js.el slime-js.el
$ cd ~/.emacs.d/
$ ln -s ~/work/swank-js/slime-js.el slime-js.el


7. .emacs 에 slime-js.el 을 require 해주고, 몇가지 추가 설정을 더 해줍니다. 

       (require 'slime-js)
       
       (add-hook 'js2-mode-hook
          (lambda ()
            (slime-js-minor-mode 1)))
       
       (add-hook 'css-mode-hook
          (lambda ()
            (define-key css-mode-map "\M-\C-x" 'slime-js-refresh-css)
            (define-key css-mode-map "\C-c\C-r" 'slime-js-embed-css)))



8. Emacs 를 다시 띄우고 Terminal.app 를 실행하시고 node.js 프로젝트 만들려고 마음 먹은 곳 위치에서 

$ cd ~/work
$ mkdir node-projects
$ cd node-projects
$ swank-js


이렇게 해주면 swank-js 서버가 구동됩니다. swank-js 명령만 쳐도 되는 것은 'sudo npm install -g swank-js' 해 줬기 때문입니다. 

Emacs 에서 

M-x slime-connect


해 주고 기본적으로 127.0.0.1 과 4005 번 포트로 접속 하는 것을 선택해 주시면 됩니다. (Enter x 2 번)

추가로 어떤 기능이 되는지는 https://github.com/swank-js/swank-js 사이트 참조하시면 됩니다.  
http://attractivechaos.github.com/plb/ 

위 주소가 원문이 있는 사이트고 저는 거기서 그림만 가져왔습니다. 사이트의 내용은 각기 어떠한 기준으로 테스트를 하는지에 관한 설명이 있습니다. 그렇지만 역시 그림을 보는것이 편하겠지요? 

 


몇가지 특이할만한 사항이 있습니다. 

1. 자바 (Java) 무지 빨라졌습니다. 
2. 제이루비 (JRuby)는 자바 버프 빨인지 무지하게 빠릅니다. 심지어 오리지널 루비보다 빨라 보입니다. 
3. 자이썬 (Jython)은 다만 자바 버프를 못 받았는지 많이 느린것 처럼 보입니다. 
4. V8:JS 의 속도를 보십시오!! 이걸 보니 Node.js 가 대체 얼만큼 빠른것인지 알 수가 있습니다. 



Node.js 에서 쓰이는 자바스크립트(Javascript)는 언어로서 완성도도 높은데, 속도마저 시스템 언어에 근접했다니 진짜 놀라울 따름입니다. 대체 왜 Node.js 가 대세가 되 가는지 이해가 갑니다. 



+ Recent posts