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
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: 1, name: "라이언", department: "카카오"}); Friends.insert({no: 2, name: "무지", department: "카카오"}); Friends.insert({no: 3, name: "코니", department: "라인"}); Friends.insert({no: 4, name: "브라운", 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 |
정상적으로 동작함을 확인 할 수 있습니다.
반응형
'Programming > JavaScript' 카테고리의 다른 글
| NodeJS - Meteor 프레임워크 Blaze? React? (0) | 2019.02.15 |
|---|---|
| NodeJS - Meteor Autopublish (0) | 2019.02.15 |
| NodeJS - Meteor 프레임워크 설치하기 (0) | 2019.02.14 |
| NodeJS - 프레임 워크 비교 (0) | 2019.02.14 |
| NodeJs - MariaDB 연동하기 (3) | 2019.02.14 |
