싱글 페이지 애플리케이션(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'도 가벼운 축에 속하지만 더 가벼운 라이브러리도 있으니 필요하면 찾아보아요~
