기본 콘텐츠로 건너뛰기

글

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 처리 규칙을 정할
댓글 쓰기
자세한 내용 보기

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>'   ] 아주 짧지만 신통한 구조다. 파일 변경을 감지하
댓글 쓰기
자세한 내용 보기

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/
댓글 쓰기
자세한 내용 보기