spectrum learns to dig

지난 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...