기본 콘텐츠로 건너뛰기

5월, 2012의 게시물 표시

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-nameexpression}}
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.lastNam…

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
자세한 내용은 위의 링크를 참조.




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


con…