2012년 5월 30일 수요일

Handlebars 사용법

Meteor.js 는 기본 템플릿으로 Handlebars 를 사용한다.
{ 기호가 자전거 핸들처럼 생겨서 그런 이름이라나.
같은 이유로 Mustache 도 { 를 사용한다.

간단하게 사용법을 보자.

- 1. Template
{{>tempate명}}

<template name="tempate명">
.....
</template>

- 2. Expression
{{expression}}

- 3. Expression with HTML

{{{expression}}}
2와 차이점은 href나 embed 등 html 태그를 사용할 수 있음.

- 4. Block - Iteration (expression 이 array 일때)
{{#each expression}}
...
{{/each}}

- 5. Block - JSON (expression 이 JSON Object 일때)
{{#with expression}}
...
{{/with}}

- 5. Block - Condition (expression 이 참일 때 실행)
{{#if expression}}
...
{{else}}
...
{{/if}}

-6. Helper 
{{helper-name expression}}

ex)
first name : {{user.firstName}}
last name : {{user.lastName}}
full name : {{fullName user}}

Handlebars.registerHelper('fullName', function(user) {
  return user.firstName + ', ' + user.lastName;
});

-7. Helper with HTML
Handlebars.registerHelper('fullName', function(user) {
  return new Handlebars.SafeString(user.firstName + ', ' + user.lastName);
});

특히 Helper를 사용하면 템플릿과 Javascript(혹은 Coffeescript) 양쪽 다 깨끗한 코드를 유지하는데 도움이 된다.

2012년 5월 18일 금요일

Meteor 에서 Client 와 Server 가 서로 자료 전달하는 방법.


javascript 를 한판에 같이 넣어도 되지만 client 와 server 로 각각 폴더를 분리해서 쓰고 있다.
server 쪽에서 Meteor 객체의 methods 를 통해 함수를 정의하고
client 에서 해당 함수명을 키값으로 call 을 사용하고 callback을 받는 구조다.

client side :
Meteor.call('login', $('#login').val(), $('#password').val(), function(retVal) {
  console.log("result:"+retVal);
});

call의 경우 인자는 몇개든지 상관은 없다. 마지막에 callback만 잊지말자.

server side :


Meteor.methods({
  login: function(username, password) {
    console.log("" + username + " is connected");
    // do something
    return 'ok';
  }
});

클라이언트 서버간 자료교환을 수동으로 하는 것도 상당히 간편하다
주저하지 말고 생각하는 걸 쏟아보자.

http://docs.meteor.com/#meteor_methods
자세한 내용은 위의 링크를 참조.




2012년 5월 1일 화요일

Coffeescript 에서 Array와 Object를 다루는 방법

자바스크립트를 하다보면 JSON Object와 Array를 처리할 일이 참 많다.
http://spectrumdig.blogspot.com/2012/01/array-method-iteration.html
Array 의 경우 위의 글을 참조.

그런데 Object는 Array처럼 다양하고 Chaining 이 가능한 방법이 없다.
기껏해야 for (var obj in jsonObject) 정도.
게다가 속도문제도 있어서 (http://jsperf.com/for-vs-foreach/9 참조) 가독성과 코드 단순화도 좋지만 요즘같이 Rich Web Application + Mobile Web 시대에 쓰기엔 효율이 나쁜 방법이긴 하다.

coffeescript 의 경우 object 와 array 에 대해 어느정도 비슷한 처리방식을 제안한다.

array : <statement> for <variable> in <array>
object : <statement> for <variable>,{<variable>} in <object>

와 같은 형식이다.
object 의 경우 variable 로 key, value 형식을 쓸 수 있는데 value 를 생략할 수 있다.
예를 들면 아래와 같다.

console.log arr for arr in [1,2,3,4,5]
console.log k,v for k,v of a:1, b:2, c:3

물론 당연히 두개를 혼합해서 쓸 수도 있다.
console.log k,v for k,v of obj for obj in [ {a:1, b:2}, {a:3, b:4 }, {a:1, c:4} ]

결과는 아래와 같다.

a 1
b 2
a 3
b 4
a 1
c 4

재미있는 점은 둘 다 공히 when 이라는 조건절을 넣어서 filter 를 할 수 있다.

console.log k,v for k,v of a:1, b:2, c:3 when k isnt 'a'

b 2
c 3


console.log v for v in [1,3,5,67] when v<10

1
3
5

noSQL 등에서 Collection 을 다룰때 for in, of, when 의 조합은 상당히 강력하니 손으로 익혀서 근육에 새겨두도록하자.