<< Pivot Thinking | Home | 디스크 IO 성능 - I/O 스케줄러 >>

JavaScript/HTML/CSS로 코딩 내용을 실시간 확인 가능한 Meteor에 대해

Meteor란? 그리고 설치 방법..

Meteor는 Web응용 프로그램을 개발하기위한 프레임 워크와 실행 환경을 제공해서 JavaScript/HTML/CSS 코딩 내용을 바로 확인해 주는 플랫폼이라고 이해하면 된다.

설치 방법은?
빠른 설치 방법도 있지만, 여기서는 컴파일 설치 방법으로 진행한다.

> git clone git://github.com/meteor/meteor.git
> cd meteor
> ./admin/generate-dev-bundle.sh
> ./install.sh
> meteor create --example leaderboard
> cd leaderboard
> meteor
[[[[[ ~/meteor/leaderboard ]]]]]

Initializing mongo database... this may take a moment.
Running on: http://localhost:3000/


내부 dependencies는 node.js, npm, mongodb 등의 패키지들이 엮여 있다.

위의 설치 과정에서 Leaderboard 샘플 프로젝트를 생성한 다음 meteor를 구동하게 되면 아래와 같은 테스트 결과 화면이 나타난다.호출 URL은 http://localhost:3000/이니 참고하고 화면이 안보인다면 방화벽에 해당 포트를 열어 줘야 한다.



서버의 코드 변경으로 Web 브라우저에서 실시간 확인이 가능하다.

> meteor create helloworld
> cd helloworld
> meteor
[[[[[ ~/meteor/helloworld ]]]]]

Initializing mongo database... this may take a moment.
Running on: http://localhost:3000/

Hello World를 최초 찍는 테스트 화면이다.



왼쪽 터미널에서 서버에서 helloworld.html을 수정해서 Hello World를 Hello Meteor로 수정했는데 아래 그림처럼 자동 웹 브라우저에 반영되는 것을 확인할 수 있다.


HTML뿐만 아니라 JavaScript를 변경하는 경우에도 마찬가지로, 서버에서 JavaScript 코드를 변경하면 코드가 자동으로 Web 브라우저에 전송되어 즉시 반영된다.

Web 브라우저에서 데이터 변경 또한, 서버로 실시간 반영이 가능하다.

다음은 Web 브라우저에서 Blue, Green, Red 등 색상의 이름을 표시하고 원하는 색상으로 투표한느 샘플이다. 샘플 프로그램은 JavaScript, HTML, CSS로 구성되어 있다.

> meteor create firstApp
> cd firstApp/

> cat firstApp.js
Colors = new Meteor.Collection("colors");

if (Meteor.is_client) {
 Template.firstApp.colors = function() {
    return Colors.find({}, {sort: {likes: -1, name: 1}});
 };
}

if (Meteor.is_server) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}
> meteor

firstApp.js의 첫번째 행은 Colors라는 컬렉션(Collection)을 선언하면 Colors를 저장하는 테이블이 서버 데이터베이스인 MongoDB에 만들어 진다.
세 번째 줄의 if 문은 만약 Web 브라우저에서 코드가 실행되고 있으면, HTML 템플릿 firstApp에 대해 Colors 컬렉션의 내용을 전체 검색(Colors.find)하고 정렬해서 리턴한다. 여기에 사용된 템플릿 엔진은 Handlebars가 사용되고 있다.
최초의 실행 화면은 아래와 같이 된다.


크롬에서 개발 도구를 통해 웹에서 데이터 추가를 아래 커맨드처럼 실행을 한다.

Colors.insert({name: "red"});
Colors.insert({name: "blue"}); 
Colors.insert({name: "green"}); 

그러면 웹에서 실행된 데이터는 Colors 컬렉션(MongoDB)에 데이터가 추가 되고 아래 화면처럼 지속적으로 MongoDB에서 데이터를 가져오기 때문에 세션이 끝나도 다른 브라우저에서도 같은 화면을 보게 된다.


Web 브라우저상에서 이용되는 데이터와 서버 데이터베이스는 항상 실시간으로 동기화하도록 되어 있는 것이 Meteor의 큰 특징의 하나다.

한 Web 브라우저에서 데이터 변경이 다른 Web 브라우저로 실시간 동기화도 가능하다.

데이터가 실시간으로 동기화하는 것을 확인하기 위해서 아래와 같이 Leaderboard 샘플을 참고로 하여 Like 버튼을 코드에 추가한다. 아래는 firstApp.js 코드이다.
<template name="firstApp">
  <div class="firstApp">
  {{#each colors}}
      {{> color_info}}
  {{else}}
    No colors yet.
  {{/each}}
 </div>
    {{#if maybe_selected}}
  <div class="details">
    <input type="button" class="inc" value="Give 1 points" />
  </div>
  {{/if}}

  {{#unless maybe_selected}}
  <div class="none">Click a color to select</div>
  {{/unless}}
</template>
<template name="color_info">
 <div class="color_info {{selected}}">
    <span class="likes">{{likes}} people like </span>
    <span class="name">{{name}}</span>
 </div>
</template>

아래 실행 결과 화면을 보면 왼쪽의 Web 브라우저 Like 버튼을 누르면 선택한 색상의 포인트가 증가와 동시에 다른 Web 브라우저에서 동일하게 포인트가 증가하고 있는 것을 볼 수 있다.



이런 프로그래밍은 개발하는데 특별한 노력없이도 가능하다는데 중요한 의미가 있을 듯 하다.

Troubleshooting

Error: watch EMFILE 오류 메세지가 발생했을 경우
cat /etc/sysctl.conf(root)
# inotify
fs.inotify.max_user_watches = 16384
fs.inotify.max_user_instances = 256
fs.inotify.max_queued_events = 32768

sysctl -a | grep fs.inotify #확인

Error: watch ENOSYS 오류 메세지가 발생했을 경우
node.js의 버그이므로 최신 버전을 설치하세요. v0.6.13 이상.

[참고 사이트]



Add a comment Send a TrackBack