2013년 9월 9일 월요일

Meteor 에서 #constant를 사용하여 collection이 바뀌어도 특정 블록을 유지하기.

meteor는 collection을 기반으로 움직인다.
즉 collection이 변화가 있으면 해당하는 부분의 렌더링을 부분적으로 다시 하는데
고맙게도 preserve-input 이라는 패키지를 기본적으로 사용하여
전체를 다 로딩하지 않게끔 하고 있다.

<head>
  <title>replyExample</title>
</head>

<body>
  {{> Posts}}
</body>

<template name="Posts">
  <ul>
    {{#each posts}}
    <li>
      {{message}}
    </li>
    {{/each}}
  </ul>
  <input type="text" class="newPost"/>
</template>

최소한으로 컬렉션을 표시하는 html은 이런 형태일 것이다.

@Posts = new Meteor.Collection "posts"
if Meteor.isClient
  Template.Posts.posts = ->
    Posts.find {}

.coffee의 내용은 이렇게 되겠지.

하지만 재귀적으로 글>댓글 형식으로 구현할 경우 다소 문제가 된다.

<head>
  <title>replyExample</title>
</head>

<body>
  {{> Posts}}
</body>

<template name="Posts">
  <ul>
    {{#each posts}}
    <li>
      {{message}}
      {{#if replies}}
      <ul>
        {{#each replies}}
        <li>
          {{reply}}
        </li>
        {{/each}}
      </ul>
      {{/if}}
      <input type="text"/>
    </li>
    {{/each}}
  </ul>
</template>

이럴 경우 각각의 post마다 input 이 붙는데 update+$push를 사용하여 replies를 추가하면
Posts.update('<POST의 ID>',{$push:{"replies":{reply:"5"}}});
posts 부분을 다시 렌더링 하면서 #each replies 안쪽의 input 이 다시 렌더링되고 만다.
즉, 내가 댓글을 달려고 하는데 다른 곳에서 댓글을 달아버리는 경우 DDP를 통해 update 를 메시지를 받아 매번 input을 다시 그려버리게 된다.

isolate 를 쓴다던가 spark나 deps를 이용하는 방법도 있겠지만
이 경우는 실제로 <input type="text"/> 구간을 건드리지 않도록만 해도 된다.
http://docs.meteor.com/#constant 를 사용하여 적용해보자.

<head>
  <title>replyExample</title>
</head>

<body>
  {{> Posts}}
</body>

<template name="Posts">
  <ul>
    {{#each posts}}
    <li>
      {{message}}
      {{#if replies}}
      <ul>
        {{#each replies}}
        <li>
          {{reply}}
        </li>
        {{/each}}
      </ul>
      {{/if}}
      {{#constant}}
      <input type="text"/>
      {{/constant}}
    </li>
    {{/each}}
  </ul>
</template>

아주 간단하다.

별 상관은 없지만 https://www.eventedmind.com/posts/meteor-spark-isolate-annotation 같은 링크도 봐가면서 어떤 식으로 Meteor가 html 문서를 갱신하는지 구조를 봐두는 것도 좋다.

2013년 9월 2일 월요일

Meteor의 Login유지 방식

역시 마루타는 atmosphere이다.

한번 로그인 한 사이트에 갈때마다 여러번 로그인 하는 건 세련되지 않다.

어떤식으로 Meteor에서 로그인 유지를 하는지 보자.

잡았다 요놈! Local Storage에 저장한다. 이게 Session 객체인지 Local Storage를 삭제하니까 실시간으로 로그아웃이 해제된다 + _+)!!!
Meteor.loginToken으로 저장하고 확인하는구나.

https://github.com/meteor/meteor/blob/devel/packages/accounts-base/localstorage_token.js

내용을 보니 localStroage에 대한 fallback(https://github.com/meteor/meteor/blob/devel/packages/localstorage/localstorage.js)을 따로 만들어 놓았다.
켁, 소스를 보니 IE일 경우 userData를 사용하네!
http://msdn.microsoft.com/en-us/library/ms533007(v=vs.85).aspx
관련 내용 링크.