,

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

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

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

 

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

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

 

 

1. 프로젝트 준비

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
cs

 

 

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

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

 

 

2. 애플리케이션 생성

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

 

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 라우트 어플리케이션 생성
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()
});
cs

 

 

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

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

 

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

 

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

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

 

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

 

 

3. 테스트

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

 

 

 

마무리

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

 

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

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

댓글 작성

이름
패스워드
홈페이지
비밀글