Svelte - SPA routes 설정

Web은 우리가 특정 사이트의 페이지를 방문하면 해당 페이지의 모든 내용을 서버에 요청을 하고 응답 받아 화면에 보여주는 하나의 사이클로 연결성이 없는 단일 요청 방식으로 구성되어 있다.

이렇다 보니 페이지를 요청할 때, 다양한 웹 화면에 구성된 이미지를 비롯해서 모두 새로 가져오기 때문에 서버에서는 적지 않은 부담이 된다.(브라우저에서 캐쉬를 가지고 있다고 하더라도 여러 사용자가 이와 같은 페이지 전체 요청을 하는 경우 서버에게 큰 부담이 될 수 밖에 없다.)

하지만 Front-End의 기술이 발전하면서, 실제 요청시 필요한 데이터만 요청을 하는 방식을 통해 보다 서버의 부하를 줄이고, 효율적으로 사용할 수 있는 방식이 개발 되었고, 이를 SPA(Single-Page-Application)이라고 한다.

SPA를 사용하기 전에는 MPA(Multi Page Application)라고 하여 디렉토리별로 별도의 페이지를 구성하고, 이 페이지에 접근할 때 데이터를 로드하는 방식으로 Web 개발을 진행하였다. 그리고 개별 페이지에 접근할 때 아래와 같이 개별 HTML을 요청해서 접근하는 방식으로 구성

MPA - 개별 페이지가 존재하여 페이지별로 로드

SPA는 MPA와 다르게 페이지 하나로 구성되어 있고, 페이지에서 다른 디렉토리로 이동할때, 데이터만 요청해서 처리하는 방식을 의미한다.

SPA - 최초 페이지 로드후 데이터만 요청

따라서 웹 화면 구성등 기존 이미지들은 유지되고, 서버에 변경에 필요한 데이터만 요청하기 때문에 상당이 부담이 덜 할 수 있다.

 

이러한 SPA에도 단점이 존재하는데, SPA는 페이지 하나에 모든 기능을 담은 홈페이지라고 할 수 있다. 따라서 최초 로드할 때 MPA에 비해 로드되는 시간이 더 오래 걸린다. 따라서 SPA 로 개발된 웹이라면, 화면 로드 속도를 어떻게 개선 할 것인지를 잘 고민해야 한다.

두번째는 하나의 페이지로 구성되어 있기 때문에 문제가 발생할 경우 전체에 영향을 주기 때문에 개발 난이도가 올라가게 된다. 단 이 부분은 개발시 프레임워크등을 통해 조금은 효율적으로 관리를 할 수 있지만, MPA보다 영향이 많이 가는것은 어쩔 수 없다.

 

그러면 어떻게 Svelte에서 SPA를 이용해서 개발 할 수 있는지 알아보도록 하자.

 

npm i svelte-spa-router

 

각 메인 페이지 생성

SPA를 구성하기 위해서는각 메인 페이지라고 하는 경로가 존재해야 한다.

이를 위해 ./src 하위에 routes라는 폴더를 만들고,

예제를 위해

Home이라는 메인페이지와

News 경로 페이지를 만들어 보겠다.

/routes/Home.svelte

/routes/News.svelte

이렇게 Svelte 프로젝트에 파일을 만들도록 하자.

이후 아래와 같이 이동시 알아볼 수 있도록 Header 태크를 추가하고 내용을 삽입하자.

/routes/Home.svelte
//파일 내용
<h1>Home</h1>

 

/routes/News.svelte
//파일 내용
<h1>News</h1>

이렇게 추가를 하였다면, 현재 가장 최상단 페이지라고 할 수 있는 App.svelte에 내용을 추가하도록 하자.

 

App.svelte 구성

<script>
  import Router from 'svelte-spa-router'
  import Home from './routes/Home.svelte'
  import News from './routes/News.svelte'
  ....

</script>

<Router routes={{
  '/': Home,
  '/News': News
}} />

....

 

이제 npm run dev로 테스트서버를 실행하고, 메인 페이지인 Home이 표시될 것이다. News 사이트이동을 위해서 /#/news를 입력해보면 아래와 같이 Router로 지정한 부분에 내용이 변경되는 것을 알 수 있다.

/# 을 이용하는 이유는 SPA라는 지시자로 사용되므로, 크게 신경쓰지 않아도 괜찮다.