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

Publication

Category

Recent Post

2013. 6. 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 윤영식