SPA(Single Page Application)란 웹페이지를 보여줄 때 하나의 페이지에서 여러 컴포넌트들의 리소스(HTML, CSS, JS 등 페이지를 구성하는 코드들)를 지정한 URI에 따라 렌더해줄 수 있도록 구성한 웹 어플리케이션이다.


SPA와 route 설정

SPA를 제작하기 위해 Vue에서 라우트 설정을 통해 개인 프로젝트의 회원인증 관련 메뉴버튼을 구현해보았다.


Vue 프레임워크 설치하기

# vue를 simple버전으로 해당 폴더에 설치
$ vue init webpack-simple [프로젝트명]

# npm 설치
$ npm install

# 폴더 내부에 vue 프레임워크 구조가 생성된다.

vue-cli를 사용한다면 npm을 사용하여 라우터 모듈을 설치해준다.

$ npm i -D vue-router


1. Vue Router 설정

모듈 시스템에서 사용하면 Vue.use()을 추가하여 명시적으로 라우터를 추가해준다. 이는 main.js 파일 내부에 작성한다.

// main.js

import VueRouter from 'vue-router'

Vue.use(VueRouter);


2. 라우터 정의하기

라우터는 경로, 항로라는 뜻이다. 즉, 어떤 경로명으로 요청을 보냈을 때 그에 따른 컴포넌트를 보여줄 수 있도록 설정해주는 작업이다.

// main.js

import VueRouter from 'vue-router'

Vue.use(VueRouter);

// Route Setting
// 등록하고자 하는 경로를 모아놓는 리스트를 routes 변수에 할당
const routes = [
	{ path: '/', component: navigation }
];

// router에 새로운 VueRouter 객체 생성
const router = new VueRouter({
	routes
});

// router를 만들어진 Vue 객체에 등록 
new Vue({
	el: '#app',
	router,
	render: h => h(App)
});


3. 라우트 설정 분리하여 관리하기

main.js에서 라우트 routes 리스트만 붙여넣고 따로 관리를 해준다.

// routes.js

// Route Setting
// 등록하고자 하는 경로를 모아놓는 리스트를 routes 변수에 할당
const routes = [
	{ path: '/', component: navigation }
];

그리고 사용할 컴포넌트를 불러온다. webpack-simple으로 Vue를 설치한 경우에는 routes.js 파일을 만들어주고, webpack으로 설치한 경우에는 Router폴더 내의 index.js 파일 내에 아래와 같이 작성한다.

// Load Components
import navigation from './components/navigation.vue'
// Route Setting
// routes를 내보낼 수 있도록 export해준다.
export const routes = [
	{ path: '/', component: navigation }
];

내보내진 datamain.js에서 불러와 사용할 수 있다.

// main.js

// routes는 const로 정의해주었기 때문에객체의 속성값으로 임포트해준다.
import {routes} from './routes'

// routes는 임포트되어 하단의 설정에 적용된다.
const router = new VueRouter({
	routes
});
 
new Vue({
	el: '#app',
	router,
	render: h => h(App)
});

App.vue에서는 임포트한 라우트 리스트를 불러와 <template> 태그 내에서 사용할 수 있도록 처리해준다.

<template>
  <div id="app">
    <navigation></navigation>
    <router-view></router-view>
  </div>
</template>

<script>
import navigation from './components/navigation'
export default {
  name: 'app',
  components: {
    navigation
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

위처럼 설정을 해주고 터미널에서 프로젝트 폴더의 루트 경로에서 다음 명령어를 실행하여 서버를 실행시켜보면 원페이지로 컨텐트가 렌더되는 것을 확인할 수 있다.

$ npm run dev


4. 라우트 설정 추가하기

앞서 설정해 준 이후로 새로운 컴포넌트를 추가해주려면 다음과 같이 패스를 추가해주면 된다.

// Router/index.js

import login from '@/component/login'

// Route Setting
export const routes = [
  { path: '/', component: navigation },
  { path: '/login', component: login }
]



마치며

라우트 설정을 이용하면 SPA(Single Page Application)의 조건을 충족하면서 하나의 페이지 요청에서 부분적으로 컨텐트를 불러올 수 있다. 컴포넌트를 여러 개 만들면 페이지 별로 라우트, 즉 경로설정만 해주면 된다. 이러한 라우트 설정은 프론트에서 해줄 수도 있고 백엔드에서 설정해줄 수도 있다.


Julia Hwang

디발자를 꿈꾸는 웹개발자의 블로그입니다.