기본 콘텐츠로 건너뛰기

글

10월, 2015의 게시물 표시

간단한 mithril router 예제.

http://meteorpad.com/pad/fH4tQSizz8vskj3N5/mithril_router

일단 링크.

Meteor.startup ->

  Home =
    controller: ->
      onunload: ->
        console.log "unloading home component"
    view: -> [
      m "div", "home"
      m "a[href=/dashboard]", config: m.route, "to Dashboard"
    ]

  Dashboard =
    controller: ->
    view: -> [
      m "div", "dashboard"
      m "h1",
        m "a[href=/]", config: m.route, "to home"
    ]

  m.route.mode = "pathname"
  m.route document.body, "/",
    "/": Home
    "/dashboard": Dashboard

소스는 http://mithril.js.org/mithril.html과 http://mithril.js.org/mithril.route.html 내용 참조.
router 진입시 필요한 것들은 controller 에서 사용하면 되는데
unload시 처리는 onunload 을 return 값의 key로 사용하면 된다.view에서 a 링크 처리시엔 { config: m.route } 를 사용하면 history API를 사용하여 이동한다.m.route.mode 에서 URL 처리 규칙을 정할 수 있다. 기존 방식은 "pathname"을 "…
자세한 내용 보기

Template events 안에서 function 사용팁

Template events안에서 function을 쓸 때 global scope 으로 쓰는 게 싫으셨죠?
var clickProcess = function(e) { ... }; Template.nono.events({ 'click .button': function(e, tmpl) { clickProcess(e); ... }, 'touchend .button': function(e, tmpl) { clickProcess(e); ... } }); 이렇게 쓰지 말고 Template.nono scope 안으로 가둡시다.Template.nono.clickProcess = function(e) { ... } 그러고 나서 event 안에선 tmpl.view.template 으로 참조하면 Template.nono 자신을 가져올 수 있습니다!Template.nono.events({ 'click .button': function(e, tmpl) { tmpl.view.template.clickProcess(e); ... }, 'touchend .button': function(e, tmpl) { tmpl.view.template.clickProcess(e); ... } }); 더 이상 글로벌 스코프로 인한 불안에 떨지마세요~
자세한 내용 보기

amok 에서 vim으로 coffeescript 를 사용하는 법

amok.js 는 아주 빠르고 멋진 코드 갱신을 할 수 있게 하는 작은 툴이다.
webpack의 Hot module replacement 와는 차원이 다른 반응속도를 보여준다.
물론, 구조도 더 단순하고 무엇보다 러닝커브가 낮다.

uglify 툴로 이전에 언급한 Tracker.js , mithril.min.js , MeteorDDP.js 를 모두 묶어서 util.js 라고 만들고


> uglify -s MeteorDDP.js,Tracker.js,mithril.min.js -o util.js
html 파일은 간단하게 만들자
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Mamok</title> </head> <body> <script src="./util.js"></script> <script src="./index.js"></script> </body> </html>
index.js 를 바라보게 했는데 사실은 index.coffee를 쓸거다.
'use strict'
window.addEventListener 'patch', ->   m.redraw()
m.module document.body,   view: -> [     m 'h1', 'Hey, Brother.'     m 'h3', m.trust '<button>hey hey</button>'   ]
아주 짧지만 신통한 구조다. 파일 변경을 감지하면 amok은 patch라는 이벤트를 보내는데 이때마다 그저 m.redraw() 로 뷰를 갱신하는게 전부. amok이 coffeescript…
자세한 내용 보기

Tracker+DDP+Mithril=Success!

Mithril을 좀 보고 있다.
무엇보다 가볍고 (12kb) 성능이 어마어마(http://matt-esch.github.io/mercury-perf/)하고 디자인 사상도 매우 깔끔해서 마음에 들었다.
그래서 혹시 Meteor랑 같이 쓸 방법은 없을까 해서 뒤적거려 보았더니

http://lhorie.github.io/mithril-blog/mithril-and-meteor.html

아주 좋은 글이 있더라.
Mithril을 Meteor에서 사용하면서 Reactivity를 구현하기 위해 Deps(현재는 Tracker)객체를 controller에 붙이고 unload 될때 computation을 멈추는 것까지 아주 깔끔하게 구현해 놓았다.

만든이가 https://github.com/meteor/meteor/wiki/Tracker-Manual 의 내용을 잘 숙지하고 있는 것 같다. React에서 getMetadata + Mixins를 사용하는 방법보다 더 납득이 가는 방식이었다.

그렇다면, 꼭 Meteor를 전부쓰지 않더라도 Mithril에서 Tracker package만 사용하고 DDP를 엮는 것만으로도 굉장히 가볍고 강력한 클라이언트쪽 Reactive Programming 구현을 할 수 있겠다 싶었다
DDP서버로만 Meteor를 사용해도 되고 PythonDDP, GoDDP 같은 것들이 있으니까 node.js를 사용하지 않아도 별 상관이 없다. 강력하다!

GDG모임에서 React+Meteor Lightning Talk 발표를 하면서 조금 React를 공부해서 그런지 생각이 정리가 잘 되어서 쉽게 검증해볼 수 있었는데.

먼저 필요한 라이브러리들을 모아보았다.

1. Meteor Tracker Package https://github.com/meteor/meteor/tree/devel/packages/tracker
2. Meteor Javascript DDP (/w promise) https://github.com/eddflrs/meteor-ddp
3. Mithril htt…
자세한 내용 보기