태그 글목록: meteorjs

meteor logo

[번역] meteor: common mistakes

 

번역 – meteor: common mistakes

원문 : https://dweldon.silvrback.com/common-mistakes

지난 일년동안, 나는 대부분의의 시간을 스텍오버플로우SF devshop 에서 코드리뷰와 질문에 대답하는데 쏟아 부었습니다. 그런 과정에서 (나를 포함해서) 대부분의 미티어개발자들이 미티어를 학습 하면서 저지르는 실수와 오해의 특정 패턴이 있다는걸 알게 되었습니다.이 게시물에서 나는 당신이 그런 실수를 피할 수 있기를 희망하며, 가장 자주 발생하는 것들 중 일부를 소개 하고자 합니다.

Profile 편집

이런 코드를 사용 하시나요?

if (meteor. users (). profile. isAdmin) 
// 중요한 관리 작업을 수행하는 경우 

만약 사용하지 안는다면 유감이네요. 사용자들이 콘솔을 열고 다음과 같이 실행할 수 있습니다 :

Meteor.users.update(Meteor.userId(), {$set: {'profile.isAdmin': true}});

놀랍지 않나요?사용자의 프로파일은 insecure 모듈이 제거 되었다 하더라도 수정 가능합니다.이걸 방지 하기 위해서 다음과 같이 거부 규칙을 적용하세요:

Meteor.users.deny({
  update: function() {
    return true;
  }
});

Publish 되버린 비밀

그룹내의 모든 사용자를 리턴하는 publish 구문이 있다고 가정해 봅시다 :

Meteor.publish('groupUsers', function(groupId) {
  check(groupId, String);
  var group = Groups.findOne(groupId);
  var selector = {_id: {$in: group.members}};
  return Meteor.users.find(selector);
});

이코드의 문제는 무엇일까요? 리엑티브가 적용되지 않을까요?

특정 필드를 지정하지 않는한 몽고디비는 모든 필드를 리턴 할것입니다. 이것은 클라이언트가 모든 로그인 토큰과 암호화된 비밀번호와 다른 모든 사용자에 대한 정보를 볼 수 있다는걸 의미 합니다.

당신은 사용자의 비밀이 누출되는걸 방지하기 위해 사용자정보를 publish 할때는 배포할 필드를 항상 정의 해야 합니다. 수정된 함수는 다음과 같습니다. :

Meteor.publish('groupUsers', function(groupId) {
  check(groupId, String);
  var group = Groups.findOne(groupId);
  var selector = {_id: {$in: group.members}};
  var options = {fields: {username: 1}};
  return Meteor.users.find(selector, options);
});

키와 변수

풍부한 사용자 인터페이스를 만들기 위하여 동적 셀렉터를 사용하는것은 일반적입니다. 자, 사용자가  key의 텍스트 입력의 값(종, 크기, 지역등)으로 동물 컬렉션을 검색 할 수있다고 생각해 봅시다. 다음과 같이 코드를 작성 할 수 있습니다 :

var key = 'species';
var value = 'elephant';

var selector = {key: value};
Animals.find(selector);

그러나 자바스크립트는 이 민감한 문제를 잡아내기 때문에 우리는 올바른 find결과를 리턴 받지 못할것입니다. :

오브젝트리터럴(selector변수값) 에서 key 로 변수 식별자를 사용할경우 식별자가 적용되지 않습니다..

selector 는 실제로 {species: 'elephant'}가 아니라 {key: 'elephant'} 로 적용 됩니다. selector 값이 잘못된 것을 바로잡는 방법은 빈 오브젝트로 selector 초기화 하고 브라켓노테이션(“[ ]” 요거)을 key 로 사용하는 것입니다.

var key = 'species';
var value = 'elephant';

var selector = {};
selector[key] = value;
Animals.find(selector);

구독은 차단하지 못한다

미티어 프레임 워크의 많은 측면이 마법처럼 보이지만 그로 인하여 우리는 어떻게 웹브라우저가 작동하는지를 잃어 버립니다. 간단한 예를 보십시다 : 

Meteor.subscribe('posts');
var post = Posts.findOne();

이 코드에서 야기되는 결과인 postundefined 된다는 에러… 이것은 스텍오버플로우에 20여개의 질문에서의 문제 핵심 원인 이었습니다.

subscribe는 마치 정원의 호스와 같습니다. – 당신이 물을 틀어도 잠시후에 물이 흘러 나오듯이 말이지요. subscribe 를 실행한다고 해서 브라우저의 다른 코드를 멈추게 할수 없습니다. 따라서 find 한다고 해서 즉시 결과를 얻을수 없습니다. (왜냐면 어싱크니까)이것 때문에 언제 데이터가 실제로 도착하는지 추측하기가 어렵다. 다행히 이문제를 추적할 2가지 방법이 있습니다 :

  1. iron router 를 사용할경우 waitOn을 이용하여 subscribe 이후 싯점을 알수 있습니다.
  2. 템플릿 코드 내에 데이터가 있는지 guards 를 사용 하여 해결합니다.
    (이거 번역하다 링크에 보니 주옥같은 포스트가 또있네요. ㄴㄱㅁ)

UI 요구 사항에 따라 위에 두 가지 기술의 조합을 사용하는 것을 추천 합니다. subscribe 를 기다리는것은 페이지 랜더링을 강제로 지연 시키는 반면에 guards 는 단계적으로 데이터를 클라이언트 화면에 랜더링 할수 있게 합니다.

추론 : 미티어에서 “Cannot read property of undefined” errors 는 subscribe 시점과 사용시점에 대한 적절하지 못한 이해 에서 올수 있다.

정렬하여 publish 하기

클라이언트로 문서를 publish 할 때, 클라이언트는 minimongo 라고 하는메모리 저장소에 동일한 컬렉션으로 다른 문서와 통합 및 재배열 합니다. 여기서 중요한 점은 “재배열된다” 는 것입니다.

많은 새 미티어 개발자들은 배포된 데이터는 정렬되어 있을것 이라고 생각합니다.그래서 이런 질문  “난 정렬된 순서로 publish 했는데 왜 클라이언트에서 그렇게 안보이나?” 을 할꺼라고 예상됩니다. 거기에는 다음과 같은 간단한 법칙의 답변이 있습니다 :

만약 클라이언트에서 문서들이 정렬되야 하는경우 클라이언트에서 정렬해라

만약에 정렬 순서가 변하는 경우 (limit 같은걸 쓰는경우) 가 아니라면 publish 함수에서 정렬은 필요 하지 않습니다.

그럼에도 불구하고 데이터 전송 속도 때문에 서버사이드 정렬을 유지 해야 하는 경우가 있습니다. 에를들어 수백개의 블로그 글중 가장 최근의 10개의 게시물을 보여 줘야 하는경우. 이런 경우 최근 문서를 클라이언트에 먼저 내려 보낸다면 템플릿 랜더링 횟수를 최소화 할수 있습니다.

데이터 속성

데이터 속성을 사용하여 DOM에 있는 모든 당신의 어플리케이션 속성을 사용할수 있는 핵(hack)을 기억하나요?새로운 개발자들로 부터 아래와 같은 코드를 끊임없이 지켜 봐왔습니다 :

<template name="nametag">
  <div data-name="{{name}}">{{name}}</div>
</template>
Template.nametag.events({
  click: function(e) {
    console.log($(e.currentTarget).data().name);
  }
});

미티어는 이런 미친짓을 멈추게 합니다.
헬퍼나 , 이벤트 핸들러나 템플릿은 같은 context 를 공유 하기 때문에 다음같은 코드를 작성 할수 있습니다 :

<template name="nametag">
  <div>{{name}}</div>
</template>
Template.nametag.events({
  click: function(e) {
    console.log(this.name);
  }
});

경고 : 만약에 데이터 속성을 필요로 하는 jQuery 플러긴을 사용하는경우 필요 할수 있습니다.

 

 

역자 주 : 실제로 많은 질문을 받은 내용이기도 해서 잽싸 번역 해봅니다.
그런데.. 저 블로그가 통째로 주옥 같아서 괜히 하나만 건드렸나 싶기도 하고..
아무튼 즐거운 미티어 코딩하세요~!!

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
meteor logo

Meteor Korea DEV School 6th day

1. 강의 자료 슬라이드 입니다.
(A slide for the presentation)

Accounts 자료 입니다.

 

2. 강의 자료 동영상 입니다. (Lecture Video)
Accounts

 

3. 강의 자료에 나오는 소스입니다. (source on gitHub)
이번회차에는 소스가 바뀌었습니다. 다시 받으시길 바랍니다.
https://github.com/ppillip/myFriends

4.페이스북 그룹
Meteor School

참석해주시고 호응해주신 모든분들께 감사드립니다.
thanks for every one who participated

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
meteor logo

Meteor Korea DEV School 4th day

1. 강의 자료 슬라이드 입니다.
(A slide for the presentation)

publish / subscribe 자료 입니다.

 

성치님의 강의 자료 입니다. 진심으로 감사 드립니다. :)

2. 강의 자료 동영상 입니다. (Lecture Video)
publish / subscribe

 

3. 강의 자료에 나오는 소스입니다. (source on gitHub)

https://github.com/ppillip/ourQuiz

4.페이스북 그룹

Meteor School

참석해주시고 호응해주신 모든분들께 감사드립니다.
thanks for every one who participated

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
meteor logo

Meteor Korea DEV School 3rd day

1. 강의 자료 슬라이드 입니다.
(A slide for the presentation)

1.1 Collections

1.2  “sql & mongodb native & meteor api” 비교 자료 슬라이드 입니다.

 

2. 강의 자료 동영상 입니다. (Lecture Video)
Template Review

Collections

 

3. 강의 자료에 나오는 소스입니다. (source on gitHub)

https://github.com/ppillip/ourQuiz

참석해주시고 호응해주신 모든분들께 감사드립니다.
thanks for every one who participated

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
meteor logo

Meteor Korea DEV School 2nd day

1. 강의 자료 슬라이드 입니다.
(A slide for the presentation)

1. 미티어의 폴더구조 from Seung Hyun Park


2. template from Seung Hyun Park

 

 
2. 강의 자료 동영상 입니다. (Lecture Video)


 

3. 강의 자료에 나오는 소스입니다. (source on gitHub)

https://github.com/ppillip/ourQuiz

참석해주시고 호응해주신 모든분들께 감사드립니다.
thanks for every one who participated

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
meteor logo

Meteor Korea DEV School 1st day

1. 강의 자료 슬라이드 입니다.
(A slide for the presentation)

 2. 강의 동영상 입니다.  음질이 조금 튀네요.. 마이크를 사야겠어요 ㅠㅠ
(Lecture screen cast , it has sound problem)


참석해주시고 호응해주신 모든분들께 감사드립니다.
thanks for every one who participated

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
meteor logo

Worldwide Meteor Day in Seoul Korea

Meteorjs world wide in seoul korea

Thanks everyone for Participating in our Event.

참석해주신 모든분들께 감사드립니다.

http://www.meteorjs.kr/

The first movie has some problem. I’m fixing it up and so sorry about that.

첫번째 동영상이 잘렸는데요 예제 부분이라서 다시 올리고 있네요 -_-; 밝을때까지 다시 올려 놓겠습니다.

 

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
meteor logo

번역 : How to Scale Meteor?

원문 : How to Scale Meteor?

<번역 시작>

어떻게 Meteor 를 Scale 하는가?

미티어의 최신버전을 사용중이리라 가정하고 작성 하였습니다.

이전 글에서 우리는 Meteor 응용 프로그램의 scaling 에대한 문제와 해결책 살펴 보았습니다. 하지만 실제로 어떻게 실전에서 scale 하는지를 보여 주지는 않았습니다. 이번에는 실제로 살펴 보겠습니다.

분산 구성

구성도 :

세개의 미티어서버와 하나의 MongoDB의 서버 , 그리고 부하분산서버로서 HaProxy 서버를 둡니다. 또한 , SSL 지원을 위해 HaProxy 앞에 스터드서버를 둡니다.

이제 이 서버들의 구성을 살펴 보겠습니다.

MongoDB 구성

MongoDB는 oplog를 지원하는 single-server replicaSet 을 사용합니다. multiserver replica set 을 사용하는 것이 좋지만, 간단하게 구현하기위해 위해 단일 ​​서버를 사용하여 구성해봅니다.

단일 Replica 구성

첫째, MongoDB의 서버가 replicaSet 을 인식할 수 있게 구동합니다.meteor replicaSet을 구동하기 위해서 다음과 같이 명령줄에 입력 합니다. :

mongod --replSet meteor

그런 다음, 몽고 쉘을 열고 단일 서버 replicaSet구성을 위해 다음을 추가 합니다 :

var config = {_id: "meteor", members: [{_id: 0, host: "127.0.0.1:27017"}]}
rs.initiate(config)

적어도 3개의 노드를 가진 MongoDB를 ReplicaSet을 구성하는 것이 현명한 방법입니다.만약, MongoDB에 대한 전문 지식이없는 경우. MongoHQ 전용 서버를 사용할것을 강력히 추천합니다.

액세스 제어

우리는 별도의 MongoDB의 서버를 사용하고 있기 때문에, 무단 액세스를 방지 할 필요가있습니다.접근 제어를 위하여 방화벽을 구성할수도 있지만 MongoDB의 역할기반(role-based) 엑세스 제어를 사용할 수 있습니다.간단히 하기 위해, 우리가 방화벽을 제대로 구성했다고 가정하겠습니다.방화벽을 구성 할 수없는 경우, MongoDB의 역할 기반 액세스 제어를 사용 하길 바랍니다.

우리는 미티어앱의 데이터 베이스로 app 을 사용할것입니다.oplog 통합을 위해, local 데이터베이스를 사용할 예정입니다.

미티어 설정

우리가 scalable Meteor 배포를 구성하는 동안 몇가지 눈여겨 봐야할것들에 대해서 이번 섹션에 보여드리겠습니다.

Oplog 지원

미티어의 수평확장을 위해 oplog 가 작용 하는지에 대해 이전 글에서 소개 한바가 있습니다.

단순히 로컬 데이터베이스의 MongoDB의 URL을 아래와 같이 설정 하면 됩니다. MONGO_OPLOG_URL .

MONGO_OPLOG_URL=mongodb://localhost/local

(물론, MONGO_URL 또한 설정해야 합니다)

IE 8과 9 Sticky Session 지원

IE 8과 9는 Ajax 로 쿠키를 전송하지 않습니다; 이것이 로드밸런서를 망가트리는 현상에 대해서 다음섹션에 알아보겠습니다.다행히, SockJS 는 그문제의 해결책입니다. Meteor는 기본적으로 그 설정이 꺼져 있습니다. 설정을 켜려면 다음과 같이 환경변수를 설정해야 합니다 :

export USE_JSESSIONID=1

서버 선택

동일한 Meteor 서버를 선택하는 것이 매우 중요합니다. 같은 성능, 동일한 OS에 같은 데이터센터에 위치하고 구성 또한 같아야 합니다. 그렇지 않으면 서버들에 대하여 균일한 밸런싱을 기대 할 수 없습니다.

이번 설정에서, 나는 서버에 단 하나의 프로세스를 사용하고 있습니다.그래서 여러 코어 서버는 큰 도움이되지 않습니다.그래서 싱글 코어 서버 인스턴스를 선택하려고합니다.이것에 대하여 추후에 더 다뤄보겠습니다.

배포

Meteor app 을 배포하고 신중하게 설정하는 것은 매우 중요합니다. 가능하다면 방법을 잘 알고있는 사람과 상담하십시오.그럴수 없다면 Meteor Up 을 이용하세요.

로드 밸런서 구성 (HaProxy)

나는 Meteor 응용 프로그램에 대한 부하 분산 장치로 HaProxy 사용하고 있습니다.그것은 매우 안정적이고 많은 기업의 운영환경에서 사용되고 있습니다. 또한, HaProxy는 Sticky Session 지원기능을 내장하고 있습니다. 그리고 우리는 다른 몇가지 설정을 사용 할 것입니다.

Sticky Session(지속적 세션) 지원

우리는 Sticky Session을 구현할 수있는 몇 가지 방법이 있습니다.“쿠키”, “ip주소 해싱” 또는 “사용자정의 URL” 등을 이용하여 Sticky Session을 구현할 수 있습니다. 몇 가지 다른 방법들이 있긴하지만 위의 방법이 가장 일반적인 것입니다.

“ip주소 해싱”이 가장 쉬운 방법이지만, 부하 분산이 적절하게 이루어 지지 않습니다. 우리는 ip 정보와원천 ip가 숨겨진 프록시서버의 ip 를 신뢰할수가 없습니다. 프록시서버를 통한 ip는 한개의 서버만이 많은 요청을 받게 될 수 있다는 의미입니다.

“사용자정의 URL” 경로는 좋은 방법중 하나 입니다. SockJS는 아주 잘 지원 합니다.  하지만 사용자 정의 URL 사용을 위해서는 로드밸런서에서의 사용자 로직과 Meteor 서버에서의 추가 구성이 필요합니다.

“쿠키” 기반 솔루션은 적절하게 부하를 분산 할 수 있고 설정이 쉽기 때문에, 가장 이상적인 방법입니다.

부하분산 알고리즘

절적한 분산 알고리즘을 선택하는 것이 매우 중요합니다.HaProxy 는 많은 알고리즘을 제공합니다. roundrobin 알고리즘은 문서에 좋습니다. roundrobin는 Ruby on Rails 나 PHP로 만든 stateless(불연속) 웹앱에 아주 좋습니다.

반면에 Meteor 는 연속적이고 지속적인 연결을 가진다. 따라서 , leastconn 알고리즘을 사용하는 것이 좋다.leastconn 알고리즘은 가장낮은 수의 연결을 가지고 있는 서버에게 새로운 연결을 보낸다.이 알고리즘은 서버가 다운되어 다시 살아나는 경우에도 동일하게 부하를 분산한다. 만약 roundrobin 을 사용한다면 그것은 부하 불균형을 가저다 줄 것입니다.

Configuration (설정)

다음과 같은 구성 파일을 사용하여 HaProxy을 구성하는 방법을 참조하십시오 :

defaults
  mode  http
  timeout connect 5s
  timeout client  10s
  timeout server  10s

frontend public
  #binding port 80
  bind *:80
  default_backend apps

backend apps
  #load balancing algorithm
  balance leastconn

  #using JSESSIONID as the cookie
  cookie JSESSIONID insert nocache

  #adding server
  server host1 host1.example.com cookie host1
  server host2 host2.example.com  cookie host2
  server host3 host3.example.com  cookie host3

간단하게 유지하기 위해 설정 파일의 일부가 생략되어 있습니다.여기에서 전체 설정 파일을 받을 수 있습니다.

SSL with Stud

SSL 은 운영에 필수 조건입니다. 안타깝게도 HaProxy의 안정화 버전은 SSL을 지원하지 않지만, 스터드를 HaProxy 앞에 설치함으로써 ssl을 사용할수 있습니다. 스터드는 HaProxy와 같은 서버에 배포하는 것이 좋습니다.

이 소스 에서 Stud를 install 하세요.apt-get 으로 설치한 것은 구버전일테니까요.

다음과 같은 설정을 할수 있습니다.

#bind to defualt SSL port
frontend = "[*]:443"

#haproxy host and port
backend = "[localhost]:80"

#location of the .pem file
pem-file = "/path/to/ssl.pem"

전체 구성화일은 여기 에서 구할 수 있습니다.

스터드는 SSL 인증서와 하나의 개인 키 .PEM 파일이 필요합니다. .PEM 파일을 만드는 방법에 대하여 여기를 참조하세요

즐기세요

나는 이 글이 Meteor 를 수평확장하는 데 도움이 되기를 바랍니다. 이글에 문제가 있거나 수정이 필요한 경우 주저 하지 마시고  저에게 연락 하거나 아래 코멘트를 추가 해주시길 바랍니다.

<번역 끝>

번역이 이상한 경우는 댓글 부탁드립니다. 넓은 마음으로 이해 해주세요 ^^;;

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious