NodeJS - Meteor 프레임워크 사용해보기

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.html과 friendsList.js파일을 만들어 줍니다.

friendsList.html

<template name="friendsList">
     {{listName}} 
    <table>
         {{#each list}} 
        <tr>
            <td>{{no}}</td>
            <td>{{name}}</td>
            <td>{{department}}</td>
        </tr>
         {{/each}} 
    </table>
</template>

firendsList.js

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;
    }
});

• 몽고DB 사용해보기

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

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

.\lib\collections.js

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

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

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

.\server\main.js

import { Meteor } from 'meteor/meteor';
 
import '../lib/collections.js';
 
Meteor.startup(() => {
  // code to run on server at startup
});
 

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

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

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

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

import { Template } from 'meteor/templating';
 
Template.friendsList.helpers({
    listName : function(){
        return "나의 친구들 목록";
    },
    list : function(){
        Friends = new Mongo.Collection("friends");
        return Friends.find();
    }
});

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