Vue.js 걸음마 단계에서 router를 활용해보는 실습으로 넘어오니 머리속이 복잡해졌다. 이럴땐! 실습에서 밟아온 단계를 다시 밟아가면서 뭘 했는지(용어 정리), 왜 이걸 했는지(도구들의 목적)부터 간단하게 리뷰하고 개념들을 정리해봐야겠다. (그리고 바쁘셨을텐데도 긴 실습과정 가이드를 정리해주신 강사님께 감사드린다 :D)
왜 Vue routing을 하는거지?
vue router를 사용해서 vue component들을 연결하면 page refresh 없이 여러개의 page간의 이동이 가능하다. SPA를 구현하는데에 아주 유용한 도구이다..png)
보다 큰 규모의 web application을 개발하는데에 사용된다.
Vue Router를 사용하여 SPA 만들기:
(Windows OS에서 Visual Studio Code(VSCode)를 이용한 실습)
-
Node.js 설치 (npm도 함께 설치됨)
C:\ProgramFiles\nodejs\ 에 설치하면됨. cmd창에서 node --version, npm --version 명령으로 제대로 설치되었는지, 어느 버젼인지 확인 가능. Node.js는 가상으로 web server를 구현해서 SPA와같은 web application을 create, run, manage할때 server를 사용할 수 있도록 platform과 같은 기반을 제공해준다. Node.js에 대한 더 상세한 내용은 Ajax 실습+노트와 함께 정리했었다. more info here: miscaminos/AjaxNodejs) -
Vue CLI 설치
Vue.js 프로젝트를 생성하고 관리하기위해 CLI가 필요함. vue 프로젝트의 전체적인 틀을 잡을 수 있게해주고 바로바로 작성한 코드를 web application prototype으로 확인할 수 있게 해준다. commnad terminal에서 install, run, 등과 같은 명령어를 입력해서 필요한 작업을 진행할수 있다. 그 외 유용한 plugin을 제공하고, 또 (지금 나는 이해가 안가는...)다른 기능이 굉장히 많다. vue project 진행시 필수적인 도구이다.
cmd창에서 npm install -g @vue/cli 명령을 입력해서 CLI를 설치함. (CLI는 more info here: Vue CLI) -
Vue tool 설치
VSCode에서 view-extension으로가서 Vetur를 검색하고 Vetur- by Pine Wu를 설치함. (Vetur는 VSCode에서 vue를 사용할때 코드의 활용성, 가독성, 그외의 편리성을 제공 & 향상시켜주는 tool이다. more info here: Vetur) -
Vue.js 프로젝트 생성
먼저 프로젝트를 담을 디렉토리를 생성함. (cmd창에 mkdir C:\Projects\VueJS 입력)
생성한 디렉토리로가서 (cmd창에 cd C:\Projects\VueJS 입력)
그리고, C:\Projects\VueJS>vue create tutorial 입력.
프로젝트 이름은 tutorial로 지음. (프로젝트 이름은 소문자로!) -
cmd창에서 프로젝트"tutorial"을 생성하고나면, Vue CLI v4.5.11의 preset 옵션들이 보여진다. 여기에서 Default([Vue2] babel, eslint)를 선택(higlight되었을때 엔터키를 누르면 선택됨!)
-
프로젝트 생성이 되면서 cmd 창에 자동으로 총 몇개의 packages가 추가되는지와 같은 정보들이 출력된다. 완료시, 생성된 프로젝트 tutorial로 이동함(cmd창에 cd C:\Projects\VueJS\tutorial 입력)
-
Vue router 설치
cmd에서 tutorial 프로젝트 폴더안에서 npm install vue-router를 입력함.
설치 완료시, 프로젝트에 vue-router package가 추가됨. -
VSCode를 실행해서 Workspace에 프로젝트 폴더를 더한다. 이 프로젝트 폴더에는 아래와 같이 구성되어있다.
- node_modules: npm install로 다운받은 모듈
- public/favicon.icon: 웹 브라우저의 탭에서 표시되는 아이콘
- public/index.html: 웹 브라우저가 처리하는 파일
: html파일이 하나만 존재하기 때문에 SPA(Single Page APP)라고 함
: Vue 어플리케이션에서 여러 페이지가 존재하는것처럼 처리함 - src: 어플리케이션이 동작하는데 필요한 파일들
- src/assets: 어플리케이션에서 사용되는 어셋들(이미지, 데이터 등등)
- src/components: 어플리케이션에서 사용되는 컴포넌트들
- src/App.vue: 어플리케이션의 최상위 컴포넌트로서, 어플리케이션의 전체페이지를 관리하는 컴포넌트
- src/main.js: 어플리케이션에서 가장먼저 실행되는 JavaScript파일
: 엔트리포인트
: Vue인스턴스를 생성하고, index.html에 적용됨
-
프로젝트를 실행하기위세 VSCode에서 terminal를 열고, npm run serve 입력해서 local server를 실행. http://localhost:8080또는 http://localhost:8081의 주소로 프로젝트로 생성한 web application이 실행됨. (server 실행을 중지하려면, ctrl+c)
위 주소를 web browser에서 입력하면 brower에 구현된 web page를 확인 할 수 있다. 이 web page 내용은 어디에서 구현된것인가? -
components 폴더 안에 예시로 주어진 HelloWorld.vue 파일을 열어 보면, 방금 localhost:port#로 접속했던 webpage의 내용이 아래 3개의 태그로 구현되어있는것을 확인할 수 있다.
< template >< /template >: HTML을 작성하는 부분
< script >< /script >: js를 작성하는 부분
< style >< /style >: CSS를 작성하는 부분
이렇게 하나의 component에 HTML, JavaScript, CSS를 모두 관리하는 것을 single file component라고 함. -
src 폴더 안에 폴더를 하나 더 생성해서 필요한 component를 추가해 넣을 수 있음. 실습에서는 resume/portfolio목적의 개인 web page를 작성하는 목적으로, 아래와같은 vue 파일들을 추가하여 간단한 website를 구축함.
Home.vue
About.vue
Portfolio.vue
Resume.vue
Contact.vue -
Website구현에 디자인을 더 예쁘게 개선시키기위해 Bootstrap을 활용할 수 있음.
(Bootstrap이란?
트위터에서 CSS와 JavaScript로 개발한 UI 구현에 사용되는 프레임워크임. https://getbootstrap.com/docs/4.1/getting-started/introduction 에서 많은 예제들을 볼 수 있고 오픈소스임.)
Bootstrap을 설치하기 위해서는 VSCode의 terminal에서 npm install vue bootstrap-vue bootstrap을 입력한다. -
bootstrap설치 후, web application에 사용하기 위해서는 프로젝트의 엔트리포인트로서 application에서 가장 먼저 실행되는 main.js(or index.js)에서 가장 처음에 어플리케이션에 필요한 library를 import할때에 bootstrap도 함께 import해야한다.
-
엔트리포인트인 main.js에는 코드의 가장 처음 부분에서 필요한 library들을 import한다. 그리고 각 component를 연결시켜줄 router 객체와 vue instance를 생성한다. 여기서 router가 components와 각component의 경로를 담고있는 collection을 가질 수 있도록 정의해준다. (main.js에 모두 정의 하지않고 router 폴더를 따로 생성해서 export default 할 수도 있음) Vue instance 생성 객체에는 router 속성이 있다. 뷰 라우터를 사용하려면 이 속성으로 뷰 라우터 객체를 넘겨줘야 한다. 뷰 라우터는 플러그인 형태이기 때문에 Vue.use() 함수를 이용해서 등록한다. (bootstrap또한 use 함수를 통해 등록필요)
[main.js코드]
//import vue
import Vue from 'vue'
//import router
import VueRouter from 'vue-router'
//import bootstrap
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
//import vue components
import App from './App.vue'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Contact from '@/views/Contact.vue'
import Portfolio from '@/views/Portfolio.vue'
import Resume from '@/views/Resume.vue'
import Hobby from '@/views/Hobby.vue'
Vue.config.productionTip = false
//router사용
Vue.use(VueRouter);
//bootstrap사용
Vue.use(BootstrapVue)
//router 객체 생성
//페이지 이동 설정
const router = new VueRouter({
//routes collection은 경로(path)와 component로 이루어짐.
//이 collection의 순서대로 router가 경로를 matching해서 component를 출력한다
routes: [
{
path:'/',
component:Home
},
{
path:'/about',
component:About
},
{
path:'/contact',
component:Contact
},
{
path:'/portfolio',
component:Portfolio
},
{
path:'/resume',
component:Resume
}
]
});
//vue instance 객체 생성
new Vue({
router:router,
render:h=>h(App)
}).$mount('#app')모든 component의 최상위 component인 App.vue에는 < router-link > 태그를 사용해서 라우터에 등록된 링크를 사용해서 메뉴화면을 구현한다. 기존에 링크 연결을 위해 사용하던 < a >는 화면을 갱신하는데, < router-link >는 이를 차단해준다. 그래서 갱신 없이 화면을 이동할 수 있다. (아래 예시 코드는 bootstrap UI를 구현하는 코드도 추가 되어있음)
[App.vue코드]
<template>
<div id="app">
<!-- 부트스트랩 Navbar UI 표시 -->
<!-- https://getbootstrap.com/docs/4.1/components/navbar/ -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div id="navbarNavAltMarkup">
<div class="navbar-nav">
<!-- 페이지 이동 설정 -->
<router-link class="nav-item nav-link" to="/">HOME</router-link>
<router-link class="nav-item nav-link" to="/about">ABOUT</router-link>
<router-link class="nav-item nav-link" to="/resume">RESUME</router-link>
<router-link class="nav-item nav-link" to="/portfolio">PORTFOLIO</router-link>
<router-link class="nav-item nav-link" to="/contact">CONTACT</router-link>
<router-link class="nav-item nav-link" to="/hobby">HOBBY</router-link>
</div>
</div>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
<!--원하는 CSS 스타일을 여기에 추가-->
</style>그리고 각각의 메뉴 옵션에 해당하는 vue 파일들을 HTML, CSS, JavaScript 3가지를 적절하게 사용하여 해당 페이지를 구현한다.
References:
1. 실습 연습(선물) from moham파란 blog
2. Understanding Routing in Vue.js with Examples by SaidHayani from Medium
3. Vue-Router 살펴보기 from 김정환블로그
