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

Publication

Statistics Graph

Recent Comment

2016.11.11 20:18 Meteor

미티어 스쿨에서 미티어를 다시 들여다보기 시작. 



미티어 설치 


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


프로젝트 생성


$ meteor create addressBook

 Downloading templating-compiler@1.2.1...  [====================       ] 74% 5.1s



수행하기 

  - 의존성 관리는 미티어가 알아서 한다

  - --production 옵션을 주면 여러개의 파일을 한개 파일로 번들링 해준다 

$ cd addressBook

$ meteor run 


에러 발생시 

$ meteor npm install --save babel-runtime




MongoDB


몽고디비 접근 

  - wired tiger 적용

  - 기본 3001 포트를 사용

$ meteor mongo

MongoDB shell version: 3.2.6

connecting to: 127.0.0.1:3001/meteor


local 디비 사용 

meteor:PRIMARY> show dbs

local  0.000GB

meteor:PRIMARY> use local

switched to db local

meteor:PRIMARY> show collections

me

oplog.rs

replset.election

startup_log

system.replset

meteor:PRIMARY> db.oplog.rs.find().pretty()




Meteor Shell 사용


미티어는 NodeJS위에 올라간다. 이에 대한 내용을 볼 수 있다. 

$ meteor shell



Meteor 폴더 구조


.meteor  폴더

버전 확인하기 

  .meteor/versions 파일에서 확인 가능 

$ meteor add <Module>@<version>


미티어 릴리즈 버전

  .meteor/release 에서 확인 가능

METEOR@1.4.2.1



플랫폼

  .meteor/platform

  여러 플랫폼을 지원 server, browser 또는 ios, android 등 추가 가능 

  


client

  javscript, assets 


lib

  공통 


server

  서버의 메소드를 call하고 싶을 경우, 메소드는 RPC와 유사하다 


==> client, lib, server를 자유롭게 depth로 줘서 운영이 가능하다 

posts/client

posts/lib

posts/server

house/client

house/lib

house/server


또는 


client/post

client/house

lib/post

lib/house

server/post

server/house


public 

  "/" 루트로 웹서버 구실을 한다. public을 별도의 웹서버로 올릴 수 있다. 



폴더 로딩시에 main.js파일은 가자 나중에 로딩된다. 




NPM 설치 

$ meteor npm install <module>





MongoDB 사용하기 


RDB에서의 관계에서 벗어나 도큐먼트로 표현 그리고 관계를 다시 만들어 내는 GraphDB에 관심을 가지면 종착역


  - 미티어에서는 Shard사용 안됨

  - Replica Set: Primary + Secondary1,2

  - Shard: collections을 나누어서 저장 - 키를 나누는게 중요, mongos (router)를 통해 샤드된다, 정말 큰 데이터 아닌 이상 샤드를 쓸 필요없다


GridFS


  - 바이너리 파일을 작은 Chunk단위로 쪼개서 저장한다 

  - 파일에 대한 Replication을 한다 

  - files: 파일의 정보만 존재, chunks: 실제 파일의 내용이 저장 



신고
posted by peter yun 윤영식
TAG Meteor, NPM
2015.09.07 23:05 Meteor

하루종일 회의를 하고나니 진이 빠진다. 저녁 미티어 스쿨 모임장소 가는길에 연회원 등록한 박찬호 21이라 피트니스 클럽이 있다. 



$ meteor create waggleChat

$ meteor remove autopublish

$ meteor remove insecure

$ meteor add twbs:bootstrap

$ meteor add accounts-ui

$ meteor add accounts-password : Accounts 객체를 사용할 수 있다.

$ meteor list

accounts-ui      1.1.5  Simple templates to add login widgets to an app

meteor-platform  1.2.2  Include a standard set of Meteor packages in your app

twbs:bootstrap   3.3.5  The most popular front-end framework for developing responsive, mobile fir...


lib/collection.js  : 컬렉션은 lib에 넣어서 최초에 new를 하게 하자. 

server/fixture.js : 테스트 데이터를 만든다. 

client/account.js: Accounts UI에 configuration 한다. 


waggleChat에 loginButton 넣기 


pub/sub 을 roomList로 등록한다. : 서버에 publish, 클라이언트의 템플릿의 onCreated에서 subscribe를 한다. subscribe를 하면 DDP를 통해 서버로 부터 데이터를 받고 ready를 날려준다.


insert failed: Access denied : 채팅방 만들때 에러가 발생하므로 서버에서 allow를 구현한다. allow.js


roomList.helpers의 list가 바뀌면 computation되어 template의 each로 가서 computation이 되어 최종 화면에 추가한 방목록이 나온다. 

// client/roomList.js

Template.roomList.helpers({

  list: function () {

    return Rooms.find();

  }

});


// client/roomList.html

<template name="roomList">

  &nbsp;

  {{#each list}}

    {{> roomListItem}}

  {{/each}}

</template>


Rooms.find({...}) 의 결과는 cursor 이다.  cursor.observer({ added: function(document) { ...} }); 으로 cursor의 변화에 대하여 observing 할 수 있다. observer는 서버에서도 사용할 수 있다. 컬렉션의 cursor는 Reactive DataSource 이다. 


검색은 fastophere.meteor.com



신고
posted by peter yun 윤영식
2015.09.01 17:01 Meteor

페북 미티어 스쿨의 박승현님이 스마트링크 멤버를 위해 미티어 중급강좌를 시작했다. 첫회에는 Reactivity, 선언적 프로그래밍, Meteor Way, 발행/구독 (Pub/Sub), DDP, Template/Blaze 등에 대한 기초적인 부분을  집고 넘어갔다.  






한번 훑기


- 패키지 설치하면 .meteor안에 심볼릭 링크 (npm -g 의 폴더에 실제 설치됨)

- Live Hot Push(Reload) : CSS는 hot push 이지만 소스 변경은 hot reloading으로 두가지 다 일어난다

- Pub/Sub, Method Call : WebSocket 이 기반이다. 파일 업로드(Method Call 사용)

- WebApp 기본 패키지를 이용해서 RESTful 가능

- 서버 클라이언트간 싱크에 대한 이벤트 체크 API가 존재한다. 예) ready()

- 미니몽고 - 클라이언트 자바스크립트로 구현

- 퓨전페신져 : https://www.phusionpassenger.com/ 웹서버를 사용 stick session 으로 scale out 가능하게 해 줌 

- 로보몽고 또는 몽고쉐프를 사용해라

- 폴더

  + lib > client, server, private, public 즉, lib가 가장 먼저 로드된다. 

  + private은 Assets API를 통해 : 미리 fixture로 데이터를 등록할 때 사용한다. 

  + packages폴더 : 공통 컴포넌트들





Reactivity 


엑셀의 예를 생각 하면된다. 위키의 Reactive Programming을 봐도 엑셀에 대한 예로 설명되어 있다. 엑셀에서 데이터를 넣은 셀을 미티어에서는 Reactive Data Source라고 하고 엑셀의 더하기 sum(c1, c2)를 적용한 셀을 Reactive Computation이라 한다. 

  - Reactive Computation : 쉘의 펑션 sum(c1, c2)

  - Reactive Data Source : 쉘의 밸류  c1, c2

이것을 도형으로 그리면 다음과 같이 Reactive Data Source를 Reactive Computation이 감싸서 감시를하고 변경 발생시 변경을 알리게 된다. 변경은 또한 변경을 감지하는 Reactive Computation으로 전파(Transition)되어 변경을 반영한다. 예로 하위의 Reactive Data Source를 하위 Reactive Computation에서 감지하고 다시 Template에서 변경을 감지하고 DOM을 변경한다. 




미티어에서 이야기하는 Reactive Data Source와 Reactive Computation에 대한 대표적인 예를 보면 Reactive Data Source는 Reactive Computation에 감쌓여 있어야 반응을 한다는 것이다. 

Tracker.autorun(function () { Meteor.subscribe("messages", Session.get("currentRoomId")); 

});


미티어에서의 Reactive Data Source/Computation의 종류 


- Reactive Computation

  + Templates

  + Tracker.autorun

  + Blaze.render, Blaze.renderWithData


- Reactive Data Source 

  + Session variables

  + Database queries on Collections

  + Meteor.status

  + ready() method on a subscription handle

  + Meteor.user

  + Meteor.userId

  + Meteor.loggingIn


- mini-mongo (data source) <-> template.helpers list (list도 computation 이고) -> blaze의 {{#each list}} (list의 computation이 전이되어 each computation으로 와서 변경이 이루어진다)

- 필요악 : session, mini-mongo cursor, pub/sub의 ready() 는 전부 computation이 이루어 진다.

- 데이터 소스를 직접 만들기는 ReactiveVar 를 사용한다. Computation은 Tracker.autorun으로 구현 





템플릿


미티어에서 Blaze는 기본 템플릿 엔진이지만 템플릿이 모두 컴포넌트로 바뀐다. 단순 템플릿 스트링 이기 보다. React처럼 템플릿이 인스턴스로 변환이 되고 OnCreated, OnDestroyed, OnRendered가 인스턴스별로 호출이된다. 그러나 Template.<templateName>.helpers / events / rendered : 안에서 this는 Template 이므로 주의를 한다. 


  - Blaze : 서버의 데이터 변경에 따른 화면의 변경을 보여주기 

  - {{> }} 의 > 은 인스턴스를 만드는 것이다. 

  - 템플릿 레벨에서 라우팅을 하는 것으로 패턴이 바뀜 

  - Computation의 전이(Transition)를 통해 다이나믹하게 화면을 변경할 수 있다. 





참조 


Meteor의 Reactive의 해부


중급반 샘플 사이트 공개 
http://wagglechat.meteor.com/

ㄱ. 미티어 스쿨
http://meteorschool.com

ㄴ. 오픈튜토리얼 
https://opentutorials.org/course/1591

ㄷ. digveloper 블로그
[1강] 미티어 소개 
http://digveloper.ppillip.com/?p=482

[2강] 미티어폴더구조,템플릿
http://digveloper.ppillip.com/?p=486

[3강] 템플릿리뷰, 콜렉션
http://digveloper.ppillip.com/?p=495

[4강] publish(발행)/subscribe(구독) , 비개발자의 미티어 서비스개발기
http://digveloper.ppillip.com/?p=499

[5강] Router(라우터)
http://digveloper.ppillip.com/?p=502

[6강] Accounts(로그인 및 계정)
http://digveloper.ppillip.com/?p=507


신고
posted by peter yun 윤영식
2015.08.23 17:48 React

Semantic UIReact 컴포넌트로 만들고 NPM 저장소와 Meteor 저장소인 Atmosphere에 배포해 보자. 토요일 헤커톤 모임을 갖고 스마트링크 멤버분들과 함께 진행했다. 목표는 React Bootstrap 과 같은 오픈소스 패키지를 만들어 보는 것이다. 처음엔 활짝 웃고 있는 모습!







준비 운동 


함께 개발을 진행하는 관계로 코딩 컨벤션은 에어비엔비의 React 코드 컨벤션으로 한다.  다음으로 깃헙(GitHub) 저장소를 만들었다. 소셜 코딩은 역시 깃헙이다. 깃을 사용하므로 커밋 메세지를 잘 작성하면 별도의 CHANGELOG를 작성할 필요가 없다. 따라서 Git Commit에 대한 컨벤션도 앵귤러에서 사용하는 방식을 쓴다. 그리고 정보를 찾고 공유하는 것은 슬랙(Slack)을 이용하고, 할일에 대한 보드는 트렐로(Trello)를 이용해 서로 공유하고 있다. 트렐로를 슬랙과 연동하면 슬랙에서 모든 것을 확인 할 수 있다. 


일단 npm 초기화을 초기화하고 모듈을 설치한다.  package.json 에 설치하는 모듈은 다음과 같다. 

  - ES6를 사용하기에 Babel을 통해 ES5로 트랜스파일한다. 

  - React로 설치하고, classnames는 리액트 코드안에서 클래스명을 확장해 주는 기능을 한다. 

  - fbjs는 ES7의 dectorator를 사용해 React Start Kit에 있는 withStyle을 컴포넌트별로 적용해 보려 했으나 원하는 동작이 안된다. 제거해도 좋음. 

  - *-loader는 웹팩(Webpack)을 통해 전체 패키지를 하나의 배포 파일로 번들링하기 위해 설치한다. 

package.json에 설정을 넣고 한번에 npm install 해서 설치하자

// package.json 일부 내역 


"dependencies": {

  "babel": "^5.8.21",

  "react": "^0.13.3",

  "classnames": "^2.1.3",

  "fbjs": "0.1.0-alpha.7"

},

"devDependencies": {

  "babel-core": "^5.8.22",

  "babel-loader": "^5.3.2",

  "css-loader": "^0.15.6",

  "fbjs": "0.1.0-alpha.7",

  "semantic-ui-css": "^2.0.8",

  "style-loader": "^0.12.3",

  "url-loader": "^0.5.6",

  "webpack": "^1.11.0"

}

 

다음으로 웹팩 환경파일인 webpack.config.js 를 만든다.  웹팩은 사전에 설치할 것이 있는데 홈페이지의 Getting start를 보자. 그리고 어떻게 잘 사용할지는 페북 엔지니어인 피트헌트의 Webpack Howto를 참조한다. 설정 내용은 다음과 같다. 

  - 배포 파일 명칭은 reactjs-semantic-ui.js 파일이고, /src/index.js 파일에 모든 참조 내역을 작성한다. 

  - 배포시 접근하는 네임스페이스는 RSU (React Semanctic Ui) 이다. 예로 본 패키지를 리액트 코드에서 사용하면 RSU.Button 식의 접근이다. 

  - .js 또는 .jsx 확장자는 babel-loader로 ES6를 ES5로 트랜스파일한다. 

  - 웹팩은 css 파일과 이미지 파일도 함께 번들링 하므로 style-loader 와 css-loader를 설정하고, 이미지와 폰트 관련해서 url-loader를 설정한다. 

  - react.js 관련 파일은 웹팩으로 번들링시에 제외토록 externals를 설정한다. 

// webapck.config.js 내역 


module.exports = {

entry: {

'reactjs-semantic-ui': './src/index.js'

},

output: {

path: './dist',

filename: '[name].js',

library: 'RSU',

libraryTarget: 'umd'

},

module: {

loaders: [

{

test: /\.jsx?$/,

exclude: /(node_modules|bower_components)/,

loader: 'babel-loader'

                       },

{

test: /\.css$/,

                                exclude: /\.useable\.css$/,

loader: 'style-loader!css-loader'

},

{

test: /\.(png|jpg|svg|eot|woff|woff2|ttf)$/,

loader: 'url-loader?limit=8192'

} // inline base64 URLs for <=8k images, direct URLs for the rest

                ]

},


externals: [

          {

              'react': {

                   root: 'React',

                   commonjs2: 'react',

                   commonjs: 'react',

                   amd: 'react'

             }

         }

     ]

}


Babel 사용시 주의 점은 간혹 ES7 의 decorator를 사용하거나 특정 스펙 레벨까지 적용하고 싶다면 루트에 .babelrc를 생성하고 stage를 설정해야 한다. stage 설정 가이드를 참조하자.

{

    "stage" : 0

}




 

개발 시작


환경 준비하며 문제점을 해결하는데 3시간 가까이 소비를 했다. 본격적으로 시멘틱 UI를 리액트화 하기 위해 다음과 같은 순서로 작업을 한다. 

  - src/index.js안에 작성한 컴포넌트들을 설정한다. 

  - 시멘틱 UI가 구분해 놓은 Elements, Collections, Views ... 와 같이 구분해서 폴더를 만들어 그밑으로 컴포넌트를 만든다. 

  - 시멘틱 UI의 core css는 reset.css 로 Reset 클래스를 하나 만들었다. 

  - ES6 구문을 사용한다. ES5 Features를 참조하자 

    + import ... from 

    + { key : value } 가 동일 설정이면 { key1, key2 }로 나열 

    + export default RSU 

// Globals
import Reset from './globals/Reset';

// Elements
import { Button, Buttons } from './elements/Button';
import Container from './elements/Container';
import Dimmer from './elements/Dimmer';
import Divider from './elements/Divider';
import Flag from './elements/Flag';
import Header from './elements/Header';
import Icon from './elements/Icon';
import Image from './elements/Image';
import Input from './elements/Input';
import Label from './elements/Label';
import { List, Item } from './elements/List';
import Loader from './elements/Loader';
import Rail from './elements/Rail';
import Reveal from './elements/Reveal';
import Segment from './elements/Segment';
import { Step, Steps } from './elements/Step';

// Collections
import Breadcrumb from './collections/Breadcrumb/Breadcrumb';
import BreadcrumbDivider from './collections/Breadcrumb/BreadcrumbDivider';
import BreadcrumbSection from './collections/Breadcrumb/BreadcrumbSection';
import Form from './collections/Form/Form';
import Grid from './collections/Grid/Grid';
import Column from './collections/Grid/Column';
import Row from './collections/Grid/Row';
import Menu from './collections/Menu/Menu';
import Message from './collections/Message/Message';
import Table from './collections/Table/Table';

// Views
import Card from './views/card/Card';
import CardImage from './views/card/CardImage';
import CardContent from './views/card/CardContent';
import CardHeader from './views/card/CardHeader';
import CardMeta from './views/card/CardMeta';
import CardDescription from './views/card/CardDescription';

const RSU = {
    // Elements
    Button, Buttons,
    Container,
    Dimmer,
    Divider,
    Flag,
    Header,
    Icon,
    Image,
    Input,
    Label,
    List, Item,
    Loader,
    Rail,
    Reveal,
    Segment,

    Step, Steps,

    // Views
    Card,
    CardImage,
    CardContent,
    CardHeader,
    CardMeta,
    CardDescription,

    // Collections
    Breadcrumb,
    BreadcrumbDivider,
    BreadcrumbSection,
    Form,
    Grid,
    Row,
    Column,
    Menu,
    Message,
    Table
}
 

export default RSU;


리액트 컴포넌트는 다음과 같이 만든다. 1주차엔 시멘트 UI의 css를 적용해서 잘 나오는지만 확인하는 것으로 리액트 컴포넌트의 라이프사이클 메소드를 전부 설정해서 넣는다. 

  - 어빈앤비의 리액트 코딩 컨벤션에 따라 작성한다. 

  - shouldComponentUpdate 구문은 향후 Immutable.js 사용과 PureRenderMixin의 조합을 고려해 성능을 향상시켜야 한다. 

    이에 대한 좋은 글이 있으니 꼭 읽어보자.  Immutable.js에 대한 연재글 [1], [2], [3]

  - 리액트의 라이프 사이클 코드가 대부분의 컴포넌트에 중복해서 들어 있으므로 이것도 ES6 구문을 위한 리액트의 Mixin 패키지를 사용해 리팩토링해야 한다.

  - classNames( x, y, this.props.className )은 classnames 패키지를 사용해서 <Card className="ui card <상속 className>"> 을 설정해 준다.  

  - <div {...this.props} 를 하면 상위에 설정한다. 모든 key="value" 애트리리뷰트를 그대로 설정해준다. 단, 주의 점은 <div {...this.props} className...> 처럼 사용하면 className은 오버라이딩 된다는 점이다. 만일 <div className={componentClass} {...this.props}> 로 하고 <Card className="dowon" /> 를 사용하면 className={componentClass} 는 적용이 되지 않는다. 즉 태그안에서 중복된 키이면 뒤에 놓은 것으로 설정이 덮어써진다.

import React, { Component, PropTypes } from 'react';
import card from 'semantic-ui-css/components/card.css';
import classNames from 'classnames';

const propTypes = {
	className: PropTypes.string,
};

const defaultProps = {
	className: ''
};

class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  };

  componentWillMount() {};
  componentDidMount() {};
  componentWillReceiveProps(nextProps) {};
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  };
  componentWillUpdate(nextProps, nextState) {};
  componentDidUpdate(prevProps, prevState) {};
  componentWillUnmount() {}

  render() {
    var componentClass = classNames(
      'ui',
      'card',
      this.props.className
    );

    return (
      <div {...this.props} className={componentClass}>{this.props.children}</div>
    )
  };
}

Card.propTypes = propTypes;
Card.defaultProps = defaultProps;
 

export default Card;


학학 다들 컴포넌트 만드는데 저녁 7시를 치닫고 있다. 아 나만 힘들어...






테스트 하기 


만들어진 컴포넌트를 테스트하기 위해 src 폴더 외에 docs 폴더를 만들어 예제를 만든다. 

  - 시멘틱 UI 처럼 폴더 구조를 가지고 각각 index.html파일을 만든다. 

  - 패키지를 사용하는 입장이기 때문에 react.min.js를 넣고 테스트용이기 때문에 <script type="text/jsx;harmony=true"> 해석을 위해 JSXTransformer도 넣었다.

  - 테스트 코드는 Card.js 이면 CardExample.js 로 해서 작성한다. 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Reactjs Semantic Ui </title> </head> <body style="margin-left: 20px; margin-top: 20px;"> <div id="app"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <script src="../../dist/reactjs-semantic-ui.js"></script> <script type="text/jsx;harmony=true" src="./CardExample.js"></script> <script type="text/jsx;harmony=true"> // Card React.render( <CardExample />, document.getElementById('app') ); // </script> </body> 

</html>


CardExample.js를 다음과 같다. 

  - import 구문이 안먹는다. 이유 아는분 메세지 좀 주세요. 그래서 render안에 RSU 네임스페이스 제거하고 사용한다. 

  - Card 관련 <div class="xxx"> 설정을 리액트 컴포넌트로 만들어 사용해 본것이다. 

// import { Card, CardImage, CardContent, CardHeader, CardMeta, CardDescription } from 'RSU';

class CardExample extends React.Component {

  render() {
    var Card = RSU.Card,
        CardImage = RSU.CardImage,
        CardContent = RSU.CardContent,
        CardHeader = RSU.CardHeader,
        CardMeta = RSU.CardMeta,
        CardDescription = RSU.CardDescription

    return (
      <div>
        <h3><a href="http://semantic-ui.com/views/card.html" target="_blank">Card</a></h3>
        <Card>
          <CardImage onClick={Alert} src="../assets/images/kristy.png" />
          <CardContent>
            <CardHeader desc="Kristy" />
            <CardMeta>
              <span className="date">Joined in 2013</span>
            </CardMeta>
            <CardDescription>
              Kristy is an art director...
            </CardDescription>
          </CardContent>
          <CardContent className="extra">
            <a>
              <i class="user icon"></i>
              22 Friends
            </a>
          </CardContent>
        </Card>
      </div>
    );
  }
 

}


이제 테스트를 위해 "npm install -g webpack-dev-server"를 설치하고 실행한다. 실행은 소스 루트에서 한다. 

  - 호출은 http://localhost:8080/docs/views 로 직접 경로를 지정한다. 

$ webpack-dev-server --progress --colors

  0% compilehttp://localhost:8080/webpack-dev-server/

webpack result is served from /

content is served from /Users/yunyoungsik/mobicon/open-sources/unplugdj/src/reactjs-semantic-ui

Hash: 0d552960154cf0b24cf3

Version: webpack 1.11.0

Time: 2759ms

                 Asset    Size  Chunks             Chunk Names

reactjs-semantic-ui.js  113 kB       0  [emitted]  reactjs-semantic-ui

chunk    {0} reactjs-semantic-ui.js (reactjs-semantic-ui) 110 kB [rendered]

    [0] ./src/index.js 418 bytes {0} [built]

    [1] ./src/elements/Button.js 4.6 kB {0} [built]

    [3] ./~/semantic-ui-css/components/button.css 870 bytes {0} [built]

    [4] ./~/css-loader!./~/semantic-ui-css/components/button.css 87.5 kB {0} [built]

    [5] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]

    [6] ./~/style-loader/addStyles.js 6.09 kB {0} [built]

    [7] ./src/utils/withStyles.js 3.86 kB {0} [built]

    [8] ./~/fbjs/lib/invariant.js 1.51 kB {0} [built]

    [9] (webpack)/~/node-libs-browser/~/process/browser.js 2.02 kB {0} [built]

   [10] ./~/fbjs/lib/ExecutionEnvironment.js 1.09 kB {0} [built]

     + 1 hidden modules

webpack: bundle is now VALID.


결과화면이다. 예들 상단에 시멘틱 UI쪽에 관련 링크를 걸기로 한다. 


앞으로 시멘틱 UI의 자바스크립트 코드를 리액트에 넣고 나머지 부분을 컴포넌트화 해야 한다. 그리고 성능 향상과 중복 코드 제거를 위한 Mixin을 이용한 리팩토링이 필요하다. 그 후엔 패키지 배포. 다음 시간에 다시 2차 헤커톤을 진행하기로 하고 저녁 10시에 종료! 




To Be Continue...

신고

'React' 카테고리의 다른 글

[React] Semantic-UI를 React 컴포넌트로 만들기 - 1  (0) 2015.08.23
[React] CSS Framework 선정하기  (0) 2015.08.15
[React] AngularJS와 ReactJS 비교  (0) 2015.07.01
[React] 배우는 방법  (0) 2015.05.15
posted by peter yun 윤영식
2015.08.15 16:09 Meteor

트위터 부트스트랩리액트 컴포넌트로 만들어 놓은 것이 이미 있어서 미티어(Meteor) 에서 사용하는 방법을 알아본다. 



설치 하기 


  - 먼저 미티어 프로젝트 하나를 생성한다. 

$ meteor create test


  - Twiiter Bootstrap 을 React로 변환해 놓은 것 

    + https://github.com/react-bootstrap/react-bootstrap

    + 사용자 메뉴얼

    + webpack을 사용해 번들을 만들었다.


  - react-bootstrap을 미티어의 패키지를 설치한다

   + https://atmospherejs.com/firfi/meteor-react-bootstrap (설명서)

   + package.js 를 추가해서 미티어의 패키지로 만들고, atmosphere에 배포했다. 

$ meteor add firfi:meteor-react-bootstrap

Package.describe({ name: 'firfi:meteor-react-bootstrap', version: '0.0.4', // Brief, one-line summary of the package. summary: 'React-bootstrap port for Meteor', // URL to the Git repository containing the source code for this package. git: 'https://github.com/Firfi/meteor-react-bootstrap', // By default, Meteor will default to using README.md for documentation. // To avoid submitting documentation, set this field to null. documentation: 'METEOR.md' }); Package.onUse(function(api) { api.versionsFrom('1.0.5'); api.use('reactjs:react@0.2.1'); api.use('twbs:bootstrap@3.3.4', 'client'); api.addFiles('dist/react-bootstrap.js'); api.export(['ReactBootstrap']); }); Package.onTest(function(api) {

});


  - 미티어에 리액트를 사용하기 위한 공식 패키지를 설치한다. 

$ meteor add react




사용 하기 


  - FlowRouter와 ReactLayout을 설치한다. 

$ meteor add kadira:flow-router

# meteor add kadira:react-layout


  - 리액트 문구가 들어 있는 파일의 확장자는 .jsx가 되어야 한다. test.jsx 파일을 하나 만들고 다음과 같이 탭을 사용한다. 

    + ReactBootstrap 이 글로벌 변수이다. 

    + 리액트 컴포넌트 (App)는 미티어에서 글로벌 변수여야 한다. 

if (Meteor.isClient) {

  

  App = React.createClass({

    render() {

      return (

        <ReactBootstrap.TabbedArea defaultActiveKey={2}>

          <ReactBootstrap.TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</ReactBootstrap.TabPane>

          <ReactBootstrap.TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</ReactBootstrap.TabPane>

        </ReactBootstrap.TabbedArea>

      )

    }

  });

}


  - Flow Router를 설정한다. 

// test.js 

if(Meteor.isClient) {


  FlowRouter.route('/', {

    // do some action for this route

    action: function(params, queryParams) {

        // console.log("Params:", params);

        // console.log("Query Params:", queryParams);

        // ReactLayout.render(AppLayout, {

        //  content: <MainComponent />

        // })

        ReactLayout.render(App);

    }

  });

  

}


// test.html 

<head>

  <title>test</title>

</head>


  - 탭 결과 화면이 출력된다.

  



오류 해결


  - 크롬 DevTools에 React extension을 설치하고 결과를 보면 다음과 같이 <Unknown> 태그가 나온다. 

    

 - <Unknown>을 제거하기 위해 displayName을 지정한다. 

if (Meteor.isClient) {

  

  App = React.createClass({

    displayName: 'App',


    render() {

      return (

        <ReactBootstrap.TabbedArea defaultActiveKey={2}>

          <ReactBootstrap.TabPane eventKey={1} tab='Tab 1'>TabPane 1 content</ReactBootstrap.TabPane>

          <ReactBootstrap.TabPane eventKey={2} tab='Tab 2'>TabPane 2 content</ReactBootstrap.TabPane>

        </ReactBootstrap.TabbedArea>

      )

    }

  });

}







<참조>


  - npm을 미티어에서 직접 사용하고자 할 경우 meteorhacks:npm의 설정 가이드


신고
posted by peter yun 윤영식
2015.07.11 19:45 Meteor

2013년 이맘때 미티어를 처음 접하고 클라이언트와 서버 사이에 데이터베이스가 있다는 것이 이해되지 않았다. 그 의문이 이번주 스마트링크의 스터디를 하며 조금씩 해소되는 느낌이다. 이제는 Modern Application Platform의 큰 흐름에서 Runtime이라는 주제를 놓고 볼 때 미티어는 단연 앞선 플랫폼이고 한 분야를 리딩할만한 플랫폼이라 여겨진다. 그속에 많은 사상과 기술이 녹아있다. 미티어를 한주 안에 파악해 보기 위해 다음의 과정을 밟아보길 권한다. 






Meteor 넌 뭐니?


  - 스터디에서 발표한 내용의 동영상이다. 

    + Realtime을 근간으로 Collaboration과 Share를 위해 잘 갖추어진 Modern Application Platform 이다. 

    + Reactive 영역을 프론트엔드에서 백앤드로 확장해 기술셋을 잘 구비해 놓았다.

    + 프론트앤드 리액트 템플릿엔진 : Blaze, AngularJS, ReactJS를 사용할 수 있다. 

    + 백앤드 리액트 기술 : Full Stack DB Driver = DDP + Client mini DataBase + LiveQuery 를 갖추었다. 

    
    + 동영상의 발표자료
    


  - 위의 내용을 이해하기 위하여 다음과 같은 자료를 보았다. 

    + DiscoverMeteor 강좌 : 반드시 전과장을 직접 따라서 코딩해 보면 좋다. 물론 한글로 번역이 되어 있다. 

       이번에 출간한 "실전 프로젝트로 배우는 AngularJS"의 상당 부분이 이와 유사하게 전개한다. 놀란 것은 Node.js에서 MongoDB 제어와 권한 체크를 위한 코드 작성이 너무나도 쉽게 해결된다는 것이다. 정말 말 그대로 서버는 날로 먹는 것이다. Isomorphic Programming의 정수이다. 

    + 박승현님 Meteor Dev Study : 페북 미티어 코리아 그룹을 이끄시는 박승현님의 미티어 강좌를 보고 친숙하게 이해할 수 있을 것이다. 





Meteor Environment


미티어는 Ionic과 같은 CLI 제공을 통해 실행과 빌드를 통합하고 있다. 따라서 의존성관리를 위한 npm, bower 또는 빌드를 위한 grunt, gulp 명령등을 알 필요가 없다. 단순히 meteor <command> <option> 을 통해 완료된다. 


  - Meteor Command Line Tool 명령들

  - 미티어의 패키지 저장소 : Atomsphere

  - 많이 사용하는 패키지 검색 : Fastosphere





Meteor가 AngularJS 또는 ReactJS를 만났을 때

  

                    



  Blaze를 사용하지 않고 AngularJS를 사용할 때의 방식은 확연히 차이가 보인다. 만일 JQuery 개발 방식에 익숙하다면 Blaze를 사용한다. AngularJS를 사용해 보았다면 당장 AngularJS+Meteor를 사용하길 권한다. 공식적으로 지원을 하고 예제 문서까지 친절하게 나와있다. ReactJS는 아직 Preview단계로 보여지지만 긱하게 새로운 것을 도전해 보고 싶다면 권한다. ReactJS의 Virtual DOM 개념도 관심의 대상이지만 Flux라는 개념이 참 맘에 든다. 따라서 MVC 패턴이 아닌 좀 더 견고한(페북이 말하는) 패턴이라는 Flux 패턴을 적용하고 싶다면 ReactJS를 사용해 보자. 나의 선택은 물론 ReactJS + Flux 패턴이다. 


  - Blaze, AngularJS, ReactJS 비교하며 따라하기 예제

  - AngularJS + Meteor 홈페이지 : 물론 미티어 홈페이지에 AngularJS 공식 문서도 있다.'

  - ng vegas에서 발표한 angular-meteor 개발자인 유리 골드스테인의 Angular/Angular2와 Meteor에 대한 소개

    


  - ReactJS + Meteor Preview 예제 페이지

  - 페북과 유사한 ReactJS + Meteor 샘플 예제 : 데모 사이트를 이동해 직접 사용해 보자. 

    + Data Fetching Component는 Flux의 Controller View 이다.

    + Mini-Mongo Store는 Flux의 Store 이다.

    + Action은 Flux의 Action Creator 이다.

    



Meteor는 Modern Application Platform 이면서 클라이언트의 리액트를 백앤드로 확장해 주는 Reactive Platform이라 말할 수 있다. 다시 들여다 본지 1주일밖에 되지 않기에 오류를 잡고 파보아야할 곳이 많이 존재한다. 앞으로 두달간 진행하는 파일럿 프로젝트에서 ReactJS + Meteor를 사용하면서 내공을 쌓아야 할 상황이다. 




Modern Application Platform 으로서 Meteor 

  

  "Realtime 애플리케이션을 위해 프론트/백앤드 개발을 동질로 리액트하게 할 수 있는 플랫폼을 제공해 보자" 이게 그들의 머릿속을 스친 생각이 아니었을까? 리액티브 프로그래밍을 이소모픽하게 제공한다면 View 와 Data에 대하 부분을 리액티브하게 처리할 수 있다면... 아마 미티어 개발자들은 신이 나지 않았을까 싶다. 그래서 그와 관련된 회사들을 M&A하고 개발자를 영입해서 오늘의 1.* 미티어라는 리액티브 플랫폼을 완성해 가고 있다고 본다. 미티어를 리얼타임 플랫폼을 하는 마이크로 서비스로 보고 외부 시스템과 연계는 몽고디비를 통해 한다면 다양한 연동이 가능할 것이라 생각한다. 


  이중 DDP를 통한 React Native로 DDP Client를 사용하는 방법이 있는가 하면 

  

  일라스틱서치(Elastic Search)와 연동하기도 하고 

  

  

 미티어를 통해 상상하던 모던 애플리케이션 서비스를 일관되고 쉽게 만들어 갈 수 있다라는게 나의 결론이다. 




<참조> 


  - JavaScript.isSexy에서 이야기하는 Meteor 배우는 방법

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.06.22 12:35 Meteor

오늘은 마지막 수업날. 미티어의 개념과 아키텍쳐 그리고 실업무 프로젝트를 위한 디렉토리 구조에 대해 프로토타입핑해 보고, Twitter Bootstrap이나 Font-Awesome을 접목시켜본다.



1. 미티어 개념 핵심

  - 웹앱의 진화 개념에서 기존의 다른 프레임워크와 차이를 보인다

  - 미티어는 클라이언트와 서버사이에 스토어인 MongoDB가 존재한다

    + WebApp v1.0 : 서버단의 rendering pc 기술

    + WebApp v1.5 : client는 SPA로 진화, server+db의 통합

    + WebApp v2.0 : client <-> db + db <-> server 로 묶인다

  

  - FireBase의 서비스를 보면서 WebApp 2.0 Meteor와 맵핑이 된다 

   + How it works

  


  - 미티어는 이것이다!

    + client <-> db 사이에서 미티어가 하는 일이 핵심 개념이다. 그러나 db <-> server 까지도 통합해 놓았다

    + server는 웹서버 또는 데이터 전달의 역할을 수행한다

    + 미티어를 중심으로 MVC가 구현된다. 

       Model - DX Area (Data eXperience)

       View  - UX Area (User or UI eXperience) 

       Controller - BX Area (Business eXperience)

   

                      <KOSTA 이복영강사님이 생각하시는 미티어의 X 영역들>



2. 프로젝트 기본 구조

  - 미티어를 설치하고 간단한 myapp 을 시작해 보자

    + myapp 디렉토리를 들어가 보면 간단 3개의 파일이 존재한다 : myapp.js, myapp.css, myapp.html

    + 단 3개의 파일을 통하여 client <-> server 코딩이 완료되었다

$ meteor create myapp

myapp: created.

To run your new app:

   cd myapp

   meteor


  - myapp 프로젝트안에서 미티어가 인식하는 디렉토리 구조

    + client, server 디렉토리 밑으로 하위 디렉토리를 만들어서 프로젝트 업무 controller별, 기능별로 나눌 수 있고, 자동 인식된다

    + 각 디렉토리를 만들고 myapp을 실업무 구조로 만들어 본다

· client – 클라이언트에서 수행되는 JavaScript 와 HTML 파일

· server – 서버에서 수해되는 JavaScript 와 HTML 파일

· common – 클라이언트와 서버에서 수행되는 JavaScript 파일

· lib –  다른 모든 JavaScript 파일보다 먼저 수행 할 JavaScript 파일

· public – static application assets such as images.



3. 실업무 구조로 만들어 보기 

  - 링크 사이트의 실습을 따라해 본다

 1) client/movies.html : html 태그를 사용하지 않고 head 와 body 만 존재한다 

<head>

  <title>myapp</title>

</head>


<body>

  <h1>Movies</h1>

  {{> moviesTemplate }}

</body>  


  2) client/moviesTemplate.html 파일 생성 : movies.html안에 포함된다 

<template name="moviesTemplate">

  <ul>

    {{#each movies}}

    <li>

      {{title}}

    </li>

    {{/each}}

  </ul>

</template>


  3) client/movies.js 파일 생성 : moview 컬렉션을 글로벌로 만든다. moviesTemplate.movies 확장 메소드를 정의한다 

Movies = new Meteor.Collection("movies");

Template.moviesTemplate.movies = function () {

  return Movies.find();

};


 4) server/movies.js 파일 생성 : 데이터가 없으면 테스트용 값을 넣는다  

// Declare server Movies collection

Movies = new Meteor.Collection("movies");


// Seed the movie database with a few movies

Meteor.startup(function () {

  if (Movies.find().count() == 0) {

    Movies.insert({ title: "Star Wars", director: "Lucas" });

    Movies.insert({ title: "Memento", director: "Nolan" });

    Movies.insert({ title: "King Kong", director: "Jackson" });

  }

});


  5) client/movieForm.html 파일 생성 및 movies.html 갱신: 무비 등록

// movieForm.html

<template name="movieForm">

  <fieldset>

    <legend>Add New Movie</legend>

    <form>

      <div>

        <label>

          Title:

          <input id="title" />

        </label>

      </div>

      <div>

        <label>

          Director:

          <input id="director" />

        </label>

      </div>

      <div>

        <input type="submit" value="Add Movie" />

      </div>

    </form>

  </fieldset>

</template>


// movies.html 

  {{> moviesTemplate }}

  {{> movieForm }}  <-- 추가



  6) client/movies.js 내역을 갱신한다 : movieForm.events 헬퍼메소드를 정의한다

Template.moviesTemplate.movies = function () {

  return Movies.find();

};


// Handle movieForm events

Template.movieForm.events = {

  'submit': function (e, tmpl) {

    // Don't postback

    e.preventDefault();


    // create the new movie

    var newMovie = {

      title: tmpl.find("#title").value,

      director: tmpl.find("#director").value

    };


    // add the movie to the DB

    Movies.insert(newMovie);

  }

};


  7) 실제값을 넣어본다 : 화면이 갱신되며, MongoDB에도 데이터가 새롭게 insert된다 : meteor의 몽고 쉘로 들어가서 확인함


$ meteor mongo

MongoDB shell version: 2.4.3

connecting to: 127.0.0.1:3002/meteor

> use meteor

switched to db meteor

> show collections

movies

system.indexes

> db.movies.find()

{ "title" : "Star Wars", "director" : "Lucas", "_id" : "xmTvZ6Lv4CazosgGi" }

{ "title" : "Memento", "director" : "Nolan", "_id" : "M6jf2LgXMhsvTXboB" }

{ "title" : "King Kong", "director" : "Jackson", "_id" : "xxZ6ynrxFPwB7jCoD" }

{ "title" : "hi ", "director" : "dowon", "_id" : "Cwri8WHudNq8sMyXe" }


  8) 심화학습

  + Movies 와 동일하게 Persons를 확장해 보자

$ meteor mongo 

> db.persons.find()

{ "name" : "Yun DoWon", "phone" : "010-1004", "_id" : "7e2Buco4sREFgjDCw" }


  

  + Meteor.Collection 생성을 lib 디렉토리로 옮기게 되면 client/movies.js, server/movies.js 에서 중복 코드를 제거할 수 있다. 

       lib/collections.js 만들기 

Movies = new Meteor.Collection("movies");

Persons = new Meteor.Collection("persons");


  + movies, persons 디렉토리로 구별한다 

  



4. Twitter Bootstrap 입히기

  - http://twitter.github.io/bootstrap/ 사이트에서 파일을 다운로드 받는다

  - bootstrap.zip 파일을 client/bootstrap 디렉토리에 푼다

  - client/persons/personsTemplate.html에서 css를 적용해 본다 

// personsTemplate.html 

<template name="personsTemplate">

  <ul>

    {{#each persons}}

    <li class="btn">

      {{name}}

    </li>

    <li class="alert">

      {{phone}}

    </li>

    {{/each}}

  </ul>

</template> 


// personForm.html

 <input class="btn" type="submit" value="Add Person" />

 


  - Font Awesome css도 넣어보자. Twitter Bootstrap처럼 수동으로 설치하지 않고 meteorite를 통해 설치한다 

    + https://github.com/nate-strauser/meteor-font-awesome 해당 사이트에서 font-awesome 을 설치해야하는 함정이... ^^

    + meteorite는 node.js의 npm과 유사하게 meteor의 package 를 관리해 준다

$ npm install -g meteorite

$ mrt add font-awesome

✓ font-awesome

    tag: https://github.com/nate-strauser/meteor-font-awesome.git#v3.2.0


Done installing smart packages


// packages 디렉토리 밑으로 font-awesome이 설치되었다

// smart.json과 smart.lock 파일은 meteorite 환경파일


  -  client/personForm.html 에 아이콘을 넣는다 

<template name="personForm">

<div class="container">

  <fieldset>

    <legend>Add New Person</legend>

    <form>

      <div>

        <label>

          Name:

          <input id="name" />

        </label>

      </div>

      <div>

        <label>

          Phone:

          <input id="phone" />

        </label>

      </div>

      <div>

        <i class="icon-male"></i> <input class="btn" type="submit" value="Add Person" />

      </div>

    </form>

  </fieldset>


  <!-- test -->

  <a class="btn" href="#">

    <i class="icon-repeat"></i> Reload</a>

  <a class="btn btn-success" href="#">

    <i class="icon-shopping-cart icon-large"></i> Checkout</a>

  <a class="btn btn-large btn-primary" href="#">

    <i class="icon-comment"></i> Comment</a>

  <a class="btn btn-small btn-info" href="#">

    <i class="icon-info-sign"></i> Info</a>

  <a class="btn btn-danger" href="#">

    <i class="icon-trash icon-large"></i> Delete</a>

  <a class="btn btn-small" href="#">

    <i class="icon-cog"></i> Settings</a>

  <a class="btn btn-large btn-danger" href="#">

    <i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version 3.2.1</a>

  <a class="btn btn-primary" href="#">

    <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>




<참조>

  - 미티어 구조 설계하기

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

  - 아이콘 확장은 Font Awesome을 사용한다 : http://fortawesome.github.io/Font-Awesome/

  - 심화학습 코드 : .meteor는 포함되지 않았으니 meteor create을 하고서 첨부한다

myapp.tar



저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.06.01 12:05 Meteor

미티어의 중요 개념중 하나인 Reactive Programming을 이해하자. 



1. 개념

  - 위키피디아

In computingreactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow.


프로그램에서 쉽게 동적 데이터 흐름을 만들어서 데이터가 변하면 자동으로 전파되게 하는 기술. 예로 서버에서 데이터가 변하면 모든 클라이언트쪽으로 변경 데이터를 Push 하여 준다.


  - 백본에서 이야기하는 개념도 

    오른쪽 클라이언트<->서버간의 흐름에서 

    + Output : reactive ( == push )

    + Input : interactive ( == polling )

 

  - 미티어의 Reactive 개념

    + 미티어서 reactive가 동작하는 코드영역

       > Template

       > Meteor.render 또는 Meteor.renderList : DOM 동적으로 다시 그리기  

       > Deps.autorun : 의존관계 변경시 자동 재수행 - reactive computation을 수행한다 (Deps maybe is Dependency)



2. Todos 예제 리팩토링하기 

  - 예제 보기 

  

  - 예제 설치 및 실행 (참조)

$ meteor create --example todos

$ cd todos

$ meteor


  - 파일 쪼개기 

미티어는 client, server 폴더 밑으로 자유롭게 폴더를 만들 수 있다. 즉, 미티어가 실행되면 client, server디렉토리를 스캔하여 자동 로딩한다. 또한 파일간의 참조 관계에 대한 환경 설정 필요없이 name기반으로 자동 연결한다. 마치 WAS(예로 JBoss같은)가 lib를 스캐닝하여 자동 로딩하고  *.war파일을 인식하여 애플리케이션 컨텍스트를 만들어 주는 것과 같다. 이렇게 본다면 미티어는 서비스 개발을 위한 미들웨어 스택이라 생각해도 무방하지 않을까 한다. 

    + todos.html 파일의 Template 영역을 쪼갠다 : partials 디렉토리 만들기 -> list.html, tag_filter.html, todo.html, todo_item.html 로 쪼개기

    

   

    + todos.js  파일 쪼개기 : js 디렉토리 만들기 -> list.js, tag_filter.js, todo.js 로 쪼갠다

      > 주의 : Meteor.*에 관련된 코드가 있는 것은 그대로 놓는다.

      > todos.js 안에 var listHandle 의 var를 제거 

      > todos.js 안에 var todosHandle 의 var를 제거 

    


      > todos.js 에서 두개의 펑션을 짜른다 -> 루트에 lib 디렉토리 생성 -> common.js 안에 붙인다.

        okCancelEvents, activateInput앞의 var를 제거한다.

    


  - 쪼갠 파일을 인식하는 순서 (참조)

  • Files in the lib directory at the root of your application are loaded first. Files that match main.* are loaded after everything else.   (애플리케이션 루트에 lib를 만들고 그곳에 .js를 만들면 가장 먼저 인식 - WAS의 lib와 유사)

  • Files in subdirectories are loaded before files in parent directories, so that files in the deepest subdirectory are loaded first (after lib), and files in the root directory are loaded last (other than main.*). (부모 디렉토리가 먼저 인식된 다음 하위 자식 디렉토리가 그 인식됨) 

  • Within a directory, files are loaded in alphabetical order by filename. (같은 디렉토리는 파일 알파벳 순서 인식)

These rules stack, so that within lib, for example, files are still loaded in alphabetical order; and if there are multiple files named main.js, the ones in subdirectories are loaded earlier.


  - 짜잔 : 할일을 넣으면 바로 MongoDB로 insert 된다

  



3. Todos의 Reactive 이해하기 

  - 서버에서 publish -> 클라이언트에서 subscribe 한다.

  - 서버 영역의 publish 

    + server/publish.js 안에 Meteor.publish 등록

      > MongoDB 의 데이터가 업데이트 되면 자동 인식하여 subscribe 한 곳으로 publish 해 준다

      > lists는 MongoDB의 컬렉션이다  

    

     > mongo shell 에서 강제로 넣어보면 클라이언트 UI 단이 자동 live reloading 된다

$ meteor mongo

MongoDB shell version: 2.4.3

connecting to: 127.0.0.1:3002/meteor

> show collections

lists

system.indexes

todos

> db.lists.find();

{ "name" : "Meteor Principles", "_id" : "fEwuoo7Ja5quzPwa4" }

{ "name" : "Languages", "_id" : "fBtKCjyJxLTdMWXet" }

{ "name" : "Favorite Scientists", "_id" : "Jnr3u6gSNh26uRseH" }

> db.lists.insert({ name: 'Dowon todo' });


// 몽고 쉘에서 insert 하는 순간 "Dowon todo"가 들어간다


// 또는 클라이언트 브라우져에서 (크롬 DevTool에서 직접 insert 하기)

// DevTool콘솔에서 insert 를 하면 좌측 메뉴가 자동으로 업데이트되어 나온다 

  

  - 클라이언트 영역의 subscribe

    + 'lists' 컬렉션에 대한 subscribe를 등록하고 데이터 변경으로 서버에서 publish를 하여주면 등록한 callback function을 수행한다

    + Meteor.subscribe('lists', <CallBack Function>)

  

   + 쪼갠 list.js 소스 파악 : Template.lists.loading시에 listsHandle.ready() 를 수행하여 좌측 메뉴를 보여준다 

  



<참조>

  - 파일을 인식하는 순서에 대한 글(필독)

  - 미티어 Reactive 소스 처리에 대한 이해

  - 미티어 채팅(Chatting) 예제

  - todos 쪼갠 프로젝트 파일 다운로드 

todos.tar


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.05.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 peter yun 윤영식
prev 1 next