meteor logo

중급으로 가기 위한 미티어 #1

 

  1. 선언형 개발 패턴 관점에서의 미티어

“아.. 미티어는 정말 초급도 할수 있는 프로그램이다” 라고 생각한 적이 있었습니다. 왜냐하면 미티어의 장점인 몇 가지 선언만으로 어플리케이션을 작성하면, 아주 짧은 코드로 많은 양의 코드를 작성하는 여타의 개발 방식보다 짧고 빠르게 구현할 수 있기 때문입니다. 이는 미티어 코어가 많은 양의 (자바스크립트)코드를 뒤에 감추고 개발자에게는 최소한의 자바스크립트 코드를 작성하기 원하며, 선언형태의 개발 패턴을 요구하기 때문입니다.

좋아 보이는 이 방법에 장벽이 있었습니다.

샘플 수준을 넘기가 어렵습니다. 왜냐하면 일반 개발자의 경우 이런 패턴에 적응할 때 기존에 작성하던 패턴이 노이즈가 되거나 기존의 개발 패턴으로 작성하려고 할경우 오히려 더 어렵게 느끼기 때문입니다.

그래서 미티어를 쉽게 하기 위해서는 미티어의 기본 문법을 숙지 후, 최소한 미티어 코어가 어떻게 여러분이 작성한 코드를 빌드하고 이 빌드된 코드가 실제로 어떻게 작동하는지를 알아볼 필요가 있습니다.

미티어의 동작 원리를 알 수 있는 가장 좋은 방법은 미티어 코어 소스를 분석 하는 방법이겠지만, 코어를 구성하는 패키지는 여러개가 있고 양이 만만치 않습니다. 그리고 영어입니다 (흑). 게다가, 깃허브에 있는 그 소스들도 눈으로 쉽게 읽을 만큼 녹녹 하지도 않습니다. 이것이 미티어가 실제 개발시에 부딛히는 어려움, 일명 “러닝커브” 입니다.

하지만, 코어의 동작 원리를 알수 있는 많은 좋은 문서 들이 있습니다. 대표적으로 docs 문서가 그것입니다. 이 글 또한 미티어 docs 문서 및 여러 블로그등 많은 좋은 문서들을 읽고 난 뒤, 그 이해를 바탕으로, 때로는 코어 소스코드를 깃허브에서 구경한 하기도 하며, 좀더 미티어 코어를 이해 한 뒤 작성 하였습니다. 물론 3차례의 프로젝트에서 온 경험을 포함해서 말입니다.

이제 부터는 미티어개발시, 다시말해 선언적 형태로 개발시 사용될 오브젝트들과 실제로 그뒤에 감추어진 이야기들을 해보려고 합니다.  물론, 자의 적인 해석이나 느낌적 느낌이 있을 수 있습니다. 논리적으로 부적합하거나 실제로 동작 원리를 다르게 알고 있다면 지적도 환영입니다.  그럼 이제 시작 하겠습니다. 아.. 우선 자바스크립트 기본에 대하여 설명드리지는 않는 점에 대해서 양해를 부탁드립니다. 적어도 읽는 분들은 자바스크립트에 대한 기본적은 문법은 알고 있다고 생각하고 말이지요.

  1. 디렉토리 생성과 빌드
  1. 펍섭과 DDP
  1. 스페이스바, 템플릿과 블레이즈
  1. 클라이언트 컬렉션 함수들과 메소드
  1. 리엑티비티와 콜백

 

 

 

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

맥 화면 캡쳐시 그림자 효과 없애기

원고 작업중 화면 캡쳐 할일이 너무 많음. 맥 화면 캡쳐시 그림자 효과 없애기.

Step 1: 터미널을 연다.

Step 2: 아래코드를 넣고 엔터, 원위치 하려면 뒤에 값만 false 로 바꿔주면됨

defaults write com.apple.screencapture disable-shadow -bool true

Step 3: 아래코드를 넣고 다시 엔터

killall SystemUIServer

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

mongodb batch (1)

몽고디비에서 돌아가는 배치 프로그램을 작성 할경우  콘솔에서 아래처럼 실행 할수 있다.
(로컬에서 실행중이고 디폴트 포트일경우)

$ mongo < batch.js

이때 저 batch.js 안에 외부 자바스크립트 라이브러리를 load 해서 작성 할수 있다. json 데이터를 다루는 만큼 underscore.js 같은걸 쓰면 데이터 조작이 아주 편할꺼 같다고 생각, 테스트 한 결과는 아래와 같다. 순서는

1. 외부소스를 로딩하고
2. 원하는 디비로 이동해서
3. 질의를 시작하여 결과를 array 로 변환한뒤
4. array 의 모든 요소를 다른 쪽디비(mola)로 등록한다.

기타 print(몽고쉘명령) 명령 으로 실행 결과를 출력하여 확인 할수 있다.

 

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious
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

kafka multi broker 만들기

## 멀티브로커 만들기

# 1. 2개의 노드를 만들기 위해서 2개의 설정을 만들기
cp config/server.properties config/server-1.properties
cp config/server.properties config/server-2.properties

# 아래처럼 두개의 노드를 수정합니다.
조심할점은 host.name 을 꼭 넣어야 한다는것 입니다.
안넣으면 설정은 되도 컨슈머나 프로듀서가 안붙음..
config/server-1.properties:
broker.id=1
port=9093
host.name=150.183.8.240
log.dirs=/tmp/kafka-logs-1

config/server-2.properties:
broker.id=2
port=9094
host.name=150.183.8.241
log.dirs=/tmp/kafka-logs-2

## 기존에 한개의 노드는 돌고 있는 상태 입니다.

# 2. 번째 노드를 띄웁니다.
bin/kafka-server-start.sh config/server-1.properties

# 3. 번째 노드를 띄웁니다.
bin/kafka-server-start.sh config/server-2.properties

# 3개의 노드에 토픽을 만들어 줍니다. 토픽 명은 “test-replica” 입니다.
bin/kafka-topics.sh –create –zookeeper localhost:2181 –replication-factor 3 –partitions 1 –topic test-replica

# 3토픽의 상태를 알아 봅시다.
bin/kafka-topics.sh –describe –zookeeper localhost:2181 –topic test-replica

# 내용은 아래와 같을껍니다.
Topic:test-replica PartitionCount:1 ReplicationFactor:3 Configs:
Topic: test-replica Partition: 0 Leader: 0 Replicas: 0,2,1 Isr: 0,2,1

# “Leader” 는 책임있는 master 노드 입니다. 물론 해당 노드를 죽이고 나면 다른 노드가 리더가 됩니다.
# “Replicas” 는 리더와 상관없이 구성된 노드 목록들을 보여 줍니다.
# “Isr” 은 현재 살아있는 노드 목록을 보여줍니다.
# 숫자는 config에 준 broker.id 입니다.

# 이제 프로듀서 테스트
bin/kafka-console-producer.sh –broker-list localhost:9092 –topic test-replica

# 컨슈머 테스트
bin/kafka-console-consumer.sh –zookeeper localhost:2181 –from-beginning –topic test-replica

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

How to install apache kafka on ubuntu 14.10

카프카 설치

## http://kafka.apache.org/documentation.html#quickstart
# 1. wget 으로 다운로드 카프카. 경로는 홈피에서 최신판으로
wget http://mirror.apache-kr.org/kafka/0.8.1.1/kafka_2.9.2-0.8.1.1.tgz

# 2. 압축을 풀고 이동하자 ~
tar -xzf kafka_2.9.2-0.8.1.1.tgz
cd kafka_2.9.2-0.8.1.1

# 3. java설치
## sudo apt-get purge openjdk* ##openjdk 삭제할경우
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer
##화면에 그림같은거 나오면 화살표로 움직이고 스페이스로 선택하면됨

# 4. 주키퍼를 시작하자
## 카프카는 주키퍼를 사용합니다.
## 만약, 주키퍼를 사용하지 않고 있다면 일단 시작 해야합니다.
## 빠르고 단순한 단일노드의 주키퍼 인스턴스를 기동할수 있는
## 편리한 스크립트를 아래처럼 사용할수있습니다.
bin/zookeeper-server-start.sh config/zookeeper.properties

# 5. 이제 드디어 카프카를 시작하자
bin/kafka-server-start.sh config/server.properties

# 6. 토픽 생성
## test 라는 이름의 토픽을 싱글파티션과 싱글레플리카로 만들어 봅시다
bin/kafka-topics.sh –create –zookeeper localhost:2181 –replication-factor 1 –partitions 1 –topic test

## 자이제 우리는 아래 명령을 사용하여 선언된 토픽을 확인 할수 있습니다.
bin/kafka-topics.sh –list –zookeeper localhost:2181

## 매뉴얼로 토픽을 만드는 대신에
## 특정 토픽에 퍼블리쉬 할때 해당토픽이 없는경우
## 브로커에서 자동으로 토픽을 생성하도록 설정할수 있습니다.

# 7. 프로듀서를 만들어 보자
bin/kafka-console-producer.sh –broker-list localhost:9092 –topic test

##위와같이 프로듀서를 열어 두고 엔터를 친뒤 아무 텍스트나 쳐 넣어 보자

# 8. 컨슈머(수신측)를 만들어 보자.
bin/kafka-console-consumer.sh –zookeeper localhost:2181 –topic test –from-beginning

## 그럼 아마 데이터를 만나보실수 있을꺼에용 ㅋ

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

how to install zmq on ubuntu

/* 우분투 리파지토리에 node 리파지토리를 추가후 nodejs 인스톨 */
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

/* node 관련 폴더들을 현재 사용자 소유로 만든다. */
sudo chown -R `whoami` ~/.npm
sudo chown -R `whoami` /usr/lib/node_modules
sudo chown -R `whoami` /usr/local

/* node-gyp 를 인스톨한다. 노드에서 사용할 네이티브들을 컴파일 가능하게 해준다.*/
sudo npm install -g node-gyp

/* libzmq3-dev를 인스톨한다. */
sudo apt-get update
sudo apt-get install build-essential
sudo apt-get install libzmq3-dev

/* 이제 zmq npm 패키지를 인스톨한다. */
npm install -g zmq

  • 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 5th day

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

Router(iron-router) 자료 입니다.

 

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

 

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 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