자바스크립트기반 웹플랫폼 Meteor.js 란 무엇인가

자바스크립트 기반 웹 프레임워크 Meteor 에 대해 소개합니다.

Meteor is an ultra-simple environment for building modern websites. What once took weeks, even with the best tools, now takes hours with Meteor.

Meteor 는 2012년 4월 0.3.2 버전을 시작으로 꾸준히 업데이트를 진행하고 있는 자바스크립트 기반 웹 프레임워크입니다. (6월초 현재는 0.3.6 버전) 꽤 흥미로운 요소들이 많이 있는데, 빠르게 웹 개발을 해주고, 최초 진입장벽을 낮추어 개발자들이 쉽게 접근할 수 있게 만들어져 있습니다.

흥미로운 사실은, 클라이언트와 서버의 구분없이 모두 자바스크립트 언어를 사용한다는 점이고, 데이터베이스접근 API 까지도  클라이언트에서 동일하게 자바스크립트로 호출해서 사용가능합니다. 즉, 클라이언트에서 DB API 호출만으로 DB insert, update, remove 가 가능합니다.

지난 주 HTML5JS공부모임을 통해 발표하게 되었는데, 발표자료를 만들면서 꽤 공부가 되어서 부족한 내용이지만 공유해 보고자 블로그에 남겨봅니다.

발표자료 링크 : http://www.slideshare.net/juntai811/meteor-036-preview

Meteor 공식사이트 (meteor.com) 에 나와 있는 9가지 특징입니다.

001. Pure JavaScript.
002. Live page updates.
003. Clean, powerful data synchronization.
004. Latency compensation.
005. Hot Code Pushes.
006. Sensitive code runs in a privileged environment.
007. Fully self-contained application bundles.
008. Interoperability.
009. Smart Packages.

서버와 클라이언트 모두 순수 자바스크립트 언어를 사용하고, 서버든 클라이언트든 둘 다 모두 동일한 API 를 사용합니다. 게다가 DB API 까지도 동일하게 사용할 수 있습니다. 서버와 클라이언트를 동일 구조화(isomorphic) 해서 개발이 가능합니다.

기본적으로 템플릿 언어를 사용하고 있으며, 현재는 Handlebar (http://handlebarsjs.com/) 만 지원하고 있습니다. (HandleBar 는 Mustache 라는 템플릿 언어에 영감을 얻어, 확장시켜 만들었다고 합니다.) 그리고 Meteor 기반의 모든 페이지는 소스 수정시에 자동으로 업데이트 되고, 데이터가 변경되어도 모든 클라이언트의 페이지를 자동으로 업데이트 시켜 줍니다. (클라이언트의 유저가, 직접 웹을 새로고침할 필요가 없이, 자동으로 업데이트되어 보여집니다.) 살아있는 웹 (Live WEB) 을 지향하고 있고, 이는 Reactive Programming 의 특징이기도 합니다.

Meteor 의 Server 구조를 살펴보면 Node.js 기반으로 되어 있고 fiber 엔진(node-fibers on npm) 을 사용합니다. fiber엔진은 Node.js 의 비동기 콜백방식을 사용하지 않고, 일반적인 single thread per request 방식을 사용합니다. 서버쪽의 소스는 기본적으로 /app/server/ 밑에 있는 js 가 돌아가게 되어 있고, 클라이언트쪽 소스는 /app/client/ 밑에 있는 js 가 돌아가게 되어 있습니다. 다만, 동일구조를 가지고 있기 때문에 /app/ 밑에 있는 JavaScript 소스라면, 아래와 같이 Meteor.is_client 또는 Meteor.is_server 변수를 이용해서 클라이언트 또는 서버에서 동작하도록 조건을 줄 수 있습니다.

if (Meteor.is_client) {
  //client code
}
 
if (Meteor.is_server) {
  //server code
}

또 한가지 새로운 특징은 Meteor Client 에는 inMemory cache 를 가지고 있다는 점인데 이 클라이언트 캐쉬는 서버데이터와 동기화가 발생하고, 캐쉬 데이터의 변경 (insert, remove, update) 이 발생했을 때 서버데이터와의 자동 동기화를 통해 서버 데이터가 업데이트되는 형태로 이루어지고 있습니다. 고로 일반적인 웹 개발 처리 방식인, 서버단에서 DB 처리를 하고, 웹-클라이언트-에서 호출하는 방식이 필요없고 클라이언트에서 바로 DB 처리가 가능하다는 점입니다. (게다가 변경된 데이터는 바로 모든 클라이언트에 자동으로 리로드 처리를 해줍니다.)

설치부터 ~ 서버실행까지 간단한 명령어로 바로 바로 실행해 볼 수 있습니다.

설치 $ curl install.meteor.com | /bin/sh

새로운 프로젝트 생성 $ meteor create my_app

로컬에서 서버띄우기
$ cd my_app
$ meteor
Running on: http://localhost:3000/

바로 로컬에서 기본적으로 만들어진 템플릿 페이지를 띄울 수 있습니다. Meteor 에서는 간단한 웹 어플리케이션 예제도 제공해 주고 있는데, 아래 명령을 통해 간단한 todo 앱을 생성해 볼 수 도 있습니다.

todo앱 예제생성 $ meteor create –example todos

만들어진 소스는 deploy 명령을 통해 meteor.com 의 공개 무료호스팅을 이용해 배포할 수도 있습니다.
$ meteor deploy rkjun.meteor.com

또한, bundle 명령을 통해 Node.js 기반 어플리케이션으로 만들어서 (tar.gz) heroku 등의 Node.js 기반 호스팅에 올려 서비스할 수도 있다고 합니다.

Meteor 는 기본적으로 다른 패키지를 개발자가 임의로 추가할 수 있는 형태가 아닌, 모든 걸 다 가지고 있는 형태로 되어 있어서, 원하는 패키지는 meteor add 명령으로 추가할 수 있습니다. (현재는 지원하는 패키지에 한계가 있기는 하지만 jquery, bootstrap, sass, less, coffeescript 등 나름 꽤 많은 패키지를 지원하고 있고 점차 더 늘려간다고 합니다.)

정리하자면,
Meteor 는 간편하고 빠르게 개발 할 수 있는 환경을 제공해주는 웹개발 플랫폼으로, 자바스크립트 기반이며 서버와 클라이언트가 동일구조 (isomorphic) 로 되어 있고, 이는 DB api 역시 마찬가지로 적용됩니다. Node.js 와 HTML템플릿엔진, MongoDB 를 내장하고 있고 기본적으로 reactive programming 방식을 지원하며 hot code push 를 통해 모든 수정/변경이 모든 클라이언트에 자동으로 적용되게 하고 있습니다.  설치,생성,배포가 명령어 한번만으로 간단하게 이루어지므로 개발자 입장에서는 환경설정에 시간을 뺏기지 않고 웹 개발에 전념할 수 있습니다.

다만, Meteor 의 한계도 분명히 있는데,
일단 버전이 낮으므로 안전성이 크게 확보된 상태라 볼 수 없고 특히 Client 를 통한 DB 접근은 보안을 중요시하는 웹사이트에서는 달갑지 않을 수도 있습니다. (민간함 코드는 권한에 따라 실행할 수 있게 되어있다고 하는데 아직 어떻게 처리하는지는 잘 모르겠음 -_-; ) 그리고 아직까지는 UNIX (리눅스나 맥) 계열에서만 사용가능한 점도 한계점이긴 합니다. 이미 Node.js 는 윈도에서도 설치가 가능한데 말이죠.

그래도 쉽고 빠르다 는 특징을 전면에 내세우고 있고, 간단하게 Live WEB 환경을 제공해 준다는 점은 큰 매력이자, 앞으로의 웹 개발 플랫폼의 갈 길이 아닌가 생각해 봅니다.

여기까지 공부한 내용을 정리해봤습니다. 혹시 틀린 내용이 있다면, 가차없이 댓글 남겨주시면 수정하겠습니다.

참조링크

Meteor 공식 사이트 : meteor.com
미물님의 Meteor 에 대한 글 링크 : http://www.mimul.com/pebble/default/2012/05/09/1336558985350.html
Meteor 소개 관련글 (영문) : http://devblog.hedtek.com/2012/04/meteor-js.html
Meteor JS 로 문서공유사이트 만들기 (영문) : http://www.skalb.com/2012/04/16/creating-a-document-sharing-site-with-meteor-js/
Meteor JS 소개관련글 (일본어) : http://d.hatena.ne.jp/naoya/20120422/1335109615