references: Meteor.js 시작하기 by 박승현




미티어 프레임워크를 설치해봤으니 이제 한번 사용해 보겠습니다.



  • 프로젝트 생성하기
워크 스페이스 폴더에서 CMD 혹은 PowerShell을 실행 후 meteor create {{{프로젝트 이름}}을 실행해 줍니다.




  • 프로젝트 실행하기
프로젝트 폴더로 이동 후 meteor을 실행해 줍니다.




  • 결과 확인
localhost:3000을 확인해 봅시다.


또한 미티어 프레임워크는 자동으로 3001번 포트에 몽고디비를 실행시켜 줍니다.





  • UI 수정 해보기
소스를 한번 건드려 봅시다. 미티어 프레임워크는 Blaze를 기본으로 사용합니다.
** 불행히도 블레이즈는 이번 포스팅에서만 사용할 생각입니다. 
** 앞으론 React를 사용할 예정이며 이에 대한 내용은 추후에 포스팅 하겠습니다.

.\client.\main.html : 우리가 본 메인 페이지 입니다. 디폴트로 hello와 info 템플릿이 구현되어 있습니다.
.\client.\main.js : 메인 페이지에 대한 자바스크립트 입니다. hello 템플릿에 대한 헬퍼가 구현되어 있습니다.

client 폴더 안에 friendsList.htmlfriendsList.js파일을 만들어 줍니다.

friendsList.html

1
2
3
4
5
6
7
8
9
10
11
12
<template name="friendsList">
     {{listName}} 
    <table>
         {{#each list}} 
        <tr>
            <td>{{no}}</td>
            <td>{{name}}</td>
            <td>{{department}}</td>
        </tr>
         {{/each}} 
    </table>
</template>
cs

firendsList.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Template } from 'meteor/templating';
 
Template.friendsList.helpers({
    listName : function(){
        return "나의 친구들 목록";
    },
    list : function(){
        var arr = [
             {no:1,name:"라이언",department:"카카오"}
            ,{no:2,name:"무지",department:"카카오"}
            ,{no:3,name:"코니",department:"라인"}
            ,{no:4,name:"브라운",department:"라인"}
        ];
        return arr;
    }
});
cs

이후 main.html과 main.js를 다음과 같이 수정해 줍니다.


main.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
 
import './main.html';
import './friendsList.html';
import './friendsList.js';
 
Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
});
 
Template.hello.helpers({
  counter() {
    return Template.instance().counter.get();
  },
});
 
Template.hello.events({
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);
  },
});
 
cs


main.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
  <title>proj</title>
</head>
 
<body>
  <h1>Welcome to Meteor!</h1>
 
   <!--{{> hello}} -->
  {{>friendsList}}
</body>
 
<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>
 
 
cs


이후 localhost:3000/을 확인해 보면 다음과 같습니다.




  • 몽고DB 사용해보기
이번엔 내장 몽고디비를 사용해 봅시다.

lib폴더를 만든 후 그 안에 collections.js 파일을 생성합니다.

.\lib\collections.js

1
2
3
4
5
6
7
8
9
10
11
12
Friends = new Mongo.Collection("friends");
 
if(Meteor.isServer){ 
        Meteor.startup(function(){
        if( Friends.find().count() == 0 ) {
            Friends.insert({no: 1name"라이언", department: "카카오"});
            Friends.insert({no: 2name"무지", department: "카카오"});
            Friends.insert({no: 3name"코니", department: "라인"});
            Friends.insert({no: 4name"브라운", department: "라인"});
        }
    });
}
cs

해당 코드는 미티어 서버가 처음 실행 될 때 한번만 수행됩니다.

이제 서버측 js파일에 앞서만든 파일을 등록합니다.

.\server\main.js

1
2
3
4
5
6
7
8
import { Meteor } from 'meteor/meteor';
 
import '../lib/collections.js';
 
Meteor.startup(() => {
  // code to run on server at startup
});
 
cs

이제 프로젝트 폴더에서 새 콘솔을 연 후 meteor mongo를 실행해봅시다.


db.friends.find() 쿼리를 날려 봅니다



정상적으로 등록이 되었습니다. 이제 이 데이터를 불러와 보겠습니다.


.\client\friendsList.js 파일을 다음과 같이 수정합니다


1
2
3
4
5
6
7
8
9
10
11
import { Template } from 'meteor/templating';
 
Template.friendsList.helpers({
    listName : function(){
        return "나의 친구들 목록";
    },
    list : function(){
        Friends = new Mongo.Collection("friends");
        return Friends.find();
    }
});
cs

정상적으로 동작함을 확인 할 수 있습니다.








+ Recent posts