프로그래밍/웹관련
[javascrpt] SPA(Sigle Page Applications)를 위한 라우터 - Sammy.js
2019. 5. 13. 15:30

싱글 페이지 애플리케이션(SPA, Sigle Page Applications)을 만들 때 필수로 필요한 것이 자바스크립트로 구현된 라우터(router)입니다.

자바스크립트로 한 개의 웹페이지를 화면 바인딩을 제어하여 마치 웹페이지가 한 개의 응용프로그램처럼 동작하게 하려면 페이지를 이동시키지 않고 주소를 갱신하여야 합니다.

이런 기능을 구현하는 것이 라우터입니다.

 

라우터는 크게 해시(#) 라우터와 브라우저 라우터로 구분할 수 있습니다.

 

자바스크립트로 구현된 라우터는 많습니다.

저는 그중 해시 라우터인 'Sammy.js'를 사용하여 간단하게 SPA를 구현해 보겠습니다.

 

 

1. 프로젝트 준비

'index.html'파일의 내용을 아래와 같이 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
 
    <!-- jquery 3.4.1 -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
 
    <!-- sammyjs 0.7.6 -->
    <script src="lib/sammyjs/0.7.6/sammy.js"></script>
    <!-- 라우터 처리용 어플리케이션 -->
    <script src="app.js"></script>
</head>
<body>
    <a href="#/">홈</a><br />
    <br />
    <!-- 라우트 내용이 바인딩되는 div -->
    <div id="divMain">
    </div>
</body>
</html>

 

'Sammy.js'는 홈페이지에서 받을 수 있습니다.

(참고 : sammyjs.org - download, GitHub - sammy )

 

 

2. 애플리케이션 생성

'sammyjs'를 사용하려면 라우터용 애플리케이션을 생성해야 합니다.

 

'app.js' 파일을 만들고 아래와 같이 코드를 넣습니다.

 

// 라우트 어플리케이션 생성
var app = Sammy(function () {
    
    //라우트 설정****
 
    this.get("#/", function () {
        //인덱스 페이지
        $("#divMain").load("/pages/index.html");
    });
 
    
    this.get("#/test1", function () {
        $("#divMain").load("/pages/Test1.html");
    });
 
    this.get("#/test2", function () {
        $("#divMain").load("/pages/Test2.html");
    });
 
    this.get("#/param/:id", function () {
        //파라미터 받기
        var nID = this.params['id'];
 
        $("#divMain").html("넘어온 파라미터 id : " + nID);
    });
 
    //404
    this.notFound = function (verb, path) {
        //인덱스 페이지
        //$("#divMain").load("/pages/index.html");
        $("#divMain").html("404, 페이지 못찾음");
    };
});
 
//어플리케이션 시작
$(function () {
    app.run()
});

 

'RESTFull' 방식을 지원한다고 하지만 단순 라우터로 사용할 거면 'get'만 사용해도 됩니다.

다양한 기능들이 있지만 지금 필요한 건 라우트 기능뿐이죠.

 

애플리케이션을 생성할 때 'this.get()'로 넘어온 'URL'에 매칭되는 경로(path)를 미리 작성해야 합니다.

 

경로를 통해 원하는 파라미터를 받으려면 ':(콜론)'을 이용합니다.

예>  this.get("#/param/:id", function () {

 

경로가 없는 경우를 처리하려면 'this.notFound' 함수를 재정의하면 됩니다.

 

 

3. 테스트

이제 웹서버를 세팅하고 'index.html'을 불러오거나 디폴트 페이지를 설정해서 'var app'를 로드한 '.html'페이지로 이동합니다.

 

 

마무리

프로젝트 소스 : GitHub - dang-gun/HtmlJavascriptSamples/SammyJs_Test

 

SPA를 구현하기 위한 라우터는 오픈소스도 많아서 여차하면 자기가 직접 만들어도 됩니다.

'Sammyjs'도 가벼운 축에 속하지만 더 가벼운 라이브러리도 있으니 필요하면 찾아보아요~

저작자표시

티스토리툴바