spectrum learns to dig

순서를 무얼 먼저 할까 잠깐 고민해보았는데 역시 화면에 무언가 보이지 않으면 답답하다. 그래서 이번엔 두 가지를 구현해보고자 한다. component 생성 router 생성 별것 아니지만 순서를 잘못 이해하면 혼란스러울 수도 있다. 다행히 본인(^ㅡ^)이 잘 정리해드릴 것이므로 걱정하지 마시라. 1. Component 생성 최초의 화면 구성 요소인 component. 즉 Home을 만들자. 이름은 HomeComponent라고 하자. XxxxComponent 형식으로 작성하면 이름으로 구분이 가서 알아보기 좋다. vulcan g component 라고 쳐서 component를 생성해보자. $ vulcan g component ? Package name (Use arrow keys) ❯ spectrum-simplebb 인간은 오타의 동물이다. vulcan g component까지만 치고 화살표(라고 해봤자 지금은 하나밖에 없겠지만)로 선택하고 엔터 눌러주자. ? Component name HomeComponent ? Component type (Use arrow keys) ❯ Pure Function   Class Component Component name으로 HomeComponent를 입력하고 나면 Component type을 고르라고 하는데 어짜피 Meteor는 babel이 있으므로 Class Component를 사용하자. 아래 한번 누르고 Class Component를 선택. 엔터. 그리고 yes yes (y 엔터)하면 $ vulcan g component ? Package name spectrum-simplebb ? Component name HomeComponent ? Component type Class Component ? Register component Yes    create packages/spectrum-simplebb/lib/components/HomeCom...

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 링...

지난 Meteor Meetup에서 iron-router를 써야하냐 말아야하냐에 대한 논의가 있었는데 MDG(Meteor Development Group)에서 딱히 router에 대한 명확한 입장이 없어 SPA(Single Page Application)에서 클라이언트쪽 라우터에 대해 정리해 보려고 한다. 전반적인 내용은 여기에 ->  http://html5.clearboth.org/history.html 기존의 Web과 다르게 SPA에선 화면간 이동시 전체 화면을 다시 그리지 않는다. 그래서 기존 독립 실행 어플리케이션(데스크톱 프로그램/모바일 앱 등)처럼 부드럽고 빠른 기능 전환이 가능한데 대신 기존의 뒤로 가기 버튼을 무심코 눌렀을 때 해당 어플리케이션에서 이탈하곤 한다. 그래서 실제로 URL이동을 하지 않아도 기능상 다른 화면으로 이동하였을 경우 임의로 URL을 생성하여 history 객체에 넣는 방식으로 구현한다. 전체적인 그림은 아래와 같은데 출처 TwitterBlog :  https://blog.twitter.com/2012/implementing-pushstate-for-twittercom 단순한 전략이다. push 와 pop. 이동이 일어나는 시점에 history.pushState( <state>, "<title>", "<url>"); 로 쌓아두고 뒤로 가기/앞으로 가기를 브라우저에서 실행할 경우 popstate 이벤트를 처리하면 된다. window.addEventListener("popstate", function (event) {   // event.state 를 참조   // 이 시점은 이미 pop을 완료한 상태이므로 location을 살펴보면 이미 이동한 경로를 가져온다. }); 여기에서 잠시 주목할 것은 popstate는 가장 마지막에 pushState 상태를 가져오는데 최초 페이지 로딩 후 Histor...