Router 만들기 /w Meteor

SPA

Single Page Application

어플인듯 어플아닌 어플같은 너

URL은?

SPA라니까요

하지만...

  • Facebook 공유는요.
  • Twitter 공유는요.
  • 메신저 공유는요.
  • 공유는요.
  • 공유..
  • ..
  • Mobile App에서도 진입점은 필요

만들어봅시다.

  • URL을 패턴을 분석합니다.
  • 패턴별로 특정 Template을 보여줍니다.

언제 적용하나요?

  • 최초 로딩 시
  • 클릭 및 특정 이벤트 발생시

Regular Expression

Test &

Match

/
/add
/view/one

^\/$
^\/add$

^\/view\/([^\/]+)$

Router 정의

router.routes = {
    "home": {
        rule: /^\/$/
    },
    "view": {
        rule: /^\/view\/([^/]*)$/,
        params: ["scream"]
    }
};

router.notfound = "notfound";

Template

<template name="main">

  {{> Template.dynamic template=getRoute}}
</template>

<template name="home">

...

</template>

<template name="view">

...

</template>

Session /w Reactive

get/set Path

    getPath: function(pathname) {
        return

           pathname ||

           Session.get('pathname') ||

           location.pathname;
    },

   setPath: function(path) {

        return

           Session.set('pathname',

                path);

    }

Helper

Template.main.helpers({
 getRoute: function () {
        return router.getRoute(router.getPath());
    }
});

Problem?

History

어이쿠 손이 미끄러졌네←←←

뒤로 가기를 자꾸 눌러요 ;ㅅ;

그러면 어떻게?

History를 만든다

원래는 없는 거여요~

이렇게 된 이상 만들어 줍니다.

세가지만 기억하세요

replaceState
pushState
popstate

Router 만들기 /w Meteor

By Lee Jaeho

Router 만들기 /w Meteor

  • 1,317