블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

2013. 5. 25. 17:11 Meteor

미티어는 Full Stack Framework를 지향한다. 미티어는 클라이언트와 서버단의 코드를 통합적으로 지원하며 Node.js와 MongoDB를 기본 스택으로 사용한다. 따라서 단일 언어로 자바스크립트를 사용한다. 미티어 개념을 이해하고 설치 사용해 본다.


1. 미티어 개념이해 

  - 사용하는 서브 프레임워크들

    + Connect, SocketJS, Handlebars, Stylus, CoffeeScript

    + Node.js, MongoDB

  - 박준태님의 파워포인트

    + 현재 버전 : v0.6.3

    + 윈도우 버전 설치 존재 



2. 설치하기 

  - 설치 : meteor를 설치하면 자체적으로 node, mongodb 의 binary가 함께 설치된다 (Linux, Mac기준)

$ curl https://install.meteor.com | /bin/sh


// 설치된 경로 : ~/.meteor 폴더 밑으로 설치됨

$ ls 

 meteor -> tools/latest/bin/meteor

 packages

 tools

 releases


// mongodb binary와 bin 밑에 node binary가 존재하여 별도로 수행한다

// 기본 포트는 node - 3000 port, mongodb - 3002 port 를 사용한다 

$ cd tools/latest && ls

LICENSE.txt examples launch-meteor mongodb tools

bin include lib share


  - 웹애플리케이션 하나 만들고 수행하기 

$ meteor --help

sage: meteor [--version] [--release <release>] [--help] <command> [<args>]


With no arguments, 'meteor' runs the project in the current

directory in local development mode. You can run it from the root

directory of the project or from any subdirectory.


Use 'meteor create <name>' to create a new Meteor project.


Commands:

   run             [default] Run this project in local development mode

   create          Create a new project

   update          Upgrade this project to the latest version of Meteor

   add             Add a package to this project

   remove          Remove a package from this project

   list            List available packages

   bundle          Pack this project up into a tarball

   mongo           Connect to the Mongo database for the specified site

   deploy          Deploy this project to Meteor

   logs            Show logs for specified site

   reset           Reset the project state. Erases the local database.

   test-packages   Test one or more packages


See 'meteor help <command>' for details on a command.


$ meteor create webapp && cd webapp

$ meteor run 또는 meteor


// 수행을 하면 어떤 프로세스가 수행이 될까?

// node 프로세스는 2개가 수행된다 (3000 port listen)

$ ps -ef | grep node

  ~/.meteor/tools/11f45b3996/bin/node /Users/nulpulum/.meteor/tools/11f45b3996/tools/meteor.js

  ~/.meteor/tools/11f45b3996/bin/node /Users/nulpulum/prototyping/meteor/webapp/.meteor/local/build/main.js --keepalive


// mongodb 가 3002 port로 webapp 수행한 위치 밑으로 mongodb file system 저장소를 자동으로 셋팅한다 

$ ps -ef | grep mongodb

~/.meteor/tools/11f45b3996/mongodb/bin/mongod --bind_ip 127.0.0.1 --smallfiles --port 3002 --dbpath /to/path/webapp/.meteor/local/db


  - 브라우져에서 http://localhost:3000/ 을 호출하면 기본 파일인 webapp.html이 수행된다 

  - 미티어가 사용하는 MongoDB쪽을 살펴보자 

// 미티어가 사용하는 

$ meteor mongo

MongoDB shell version: 2.4.3

connecting to: 127.0.0.1:3002/meteor

> show dbs

local 0.03125GB

meteor (empty)  <--- meteor 저장소가 새롭게 생성되었다 (주의 : 3번의 기존 프로그램 수정하기 해야 나옴)

> use meteor

switched to db meteor

> show collections


  - 애플리케이션을 만들고 다음과 같이 하위 디렉토리를 만들면 자동으로 파일을 인식한다 (참조)

webapp 디렉토리 밑으로 

  client      – This folder contains any JavaScript which executes only on the client.

  server    – This folder contains any JavaScript which executes only on the server.

  common – This folder contains any JavaScript code which executes on both the client and server.

  lib          – This folder contains any JavaScript files which you want to execute before any other JavaScript files.

  public     – This folder contains static application assets such as images.

  .meteor  - 미티어가 자동으로 만들어주는 폴더 

    local - build - app 밑에 webapp.js 가 존재하여 해당 파일을 사용함 

  



3. 기존 프로그램 수정해 보기 

  - 해당 동영상을 보고서 수정해 본다 


  - webapp.html 기존코드 삭제 후 수정

<head>
<title>webapp</title>
</head>
 
<body>
hi dowon
> : encoding sign sleeping
{{> color_list }}
</body>
 
<template name="color_list">
{{#each colors }}
<ul>
{{> color_info }}
</ul>
{{/each }}
 
<div class="footer">
<button>Like!</button>
</div>
</template>
 
<template name="color_info">
<li class="{{maybe_selected}}">
{{likes}} people like {{ name }}
</li>
</template>


  - webapp.js 기존코드 삭제 후 수정

// create common store collections to mongodb
Colors = new Meteor.Collection("colors");
 
if (Meteor.isClient) {
// UX Coding
Template.color_list.colors = function() {
// likes: -1 = descending
// name: 1 = ascending
// return Colors.find({},{sort:{likes:-1, name:1}});
return Colors.find({},{sort:{name:1}});
}
 
Template.color_info.maybe_selected = function() {
console.log('---> 2: ' + this._id);
return Session.equals('session_color', this._id) ? "selected" : '';
}
 
// UX event
Template.color_info.events = {
'click' : function() {
console.log('---> 1: ' + this._id);
Session.set('session_color', this._id);
}
}
 
Template.color_list.events = {
'click button' : function() {
// 정보를 업데이트하면 동시에 열려 있는 브라우져 정보가 업데이트 된다
Colors.update(Session.get('session_color'), {$inc: {likes:1}})
}
}
}
 
if (Meteor.isServer) {
// 서버를 시작한다
Meteor.startup(function () {
// code to run on server at startup
});
}


  - webapp.css 수정

.selected {
background-color: yellow;

}


 - 테스트

    + Like! 버튼을 누르면 양쪽의 브라우져로 숫자 증가값이 Multicasting 된다. 

    + 크롬의 Dev Tool에서 직접 insert 하여 테스팅. ex) Colors.insert({ likes : 1, name : 'blue' })



4. 클라우드에 배포하여 테스트하기

  - 클라우드에 배포하기 : 스마트 패키징

// xxx.meteor.com 포멧으로 자신만의 xxx를 지정한다

$ meteor deploy dowon-color.meteor.com

Deploying to dowon-color.meteor.com.  Bundling...

Uploading...

Now serving at dowon-color.meteor.com


  - 브라우져에서 dowon-color.meteor.com을 호출한다 

    + 크롬 DevTools에서 MongoDB  API와 똑같이 insert를 한다. (클라이언트에서 서버의 MongoDB로 저장!!!)

    



<참조>

  - 미티어 한글 번역 : http://docs-ko.meteor.com/

  - 미티어 디렉토리 구분하여 프로젝트 만들기

  - 채팅프로그램 만들기

  - Introduction to Meteor (필독)

  - 미티어는 이미 백본에 대해서 패키지로 통합을 하였다. AngularJS에 대한 통합은 현재 투표중이다.

     + meteor와 angularjs에 대한 통합 시도 소스

     + 미티어 로드맵에서 Wishlist에서 볼 수 있다. (Trello에서 로드맵을 추천받고 있습니다. 저도 한표. 현재 총 52표!)

     

posted by 윤영식