오늘은 마지막 수업날. 미티어의 개념과 아키텍쳐 그리고 실업무 프로젝트를 위한 디렉토리 구조에 대해 프로토타입핑해 보고, 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와 맵핑이 된다
- 미티어는 이것이다!
+ 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'Meteor' 카테고리의 다른 글
| [Meteor SmartLink] 미티어 OJT (0) | 2015.09.01 |
|---|---|
| [Meteor] React Twitter Bootstrap 사용하기 (0) | 2015.08.15 |
| [Meteor] Meteor 배우는 방법 (0) | 2015.07.11 |
| [Meteor] Todos 예제 리팩토링 및 Reactive 이해하기 (0) | 2013.06.01 |
| [Meteor] 미티어 사용하기 (2) | 2013.05.25 |