뷰(Vue)로 웹 어플리케이션의 메뉴/사이드바 라우팅 구현하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

오늘의 Vue.js 실습 목표는 "웹 어플리케이션 구조(Web aApplication)의 사이드바/메뉴 기능 만들어보기!" 입니다.

사이드바/메뉴 기능을 구현하기 위해서 라우팅 개념을 필수적으로 공부하고 구현해야합니다.

 

---

웹 애플리케이션 사이드바/메뉴 구현하기

사전 준비

아래 두가지에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. 

1. Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5)
2. Vue Router 설치 (참고: https://logs-jejustone.tistory.com/23 )
3. 웹 어플리케이션 레이아웃 구조 구현 (참고: https://logs-jejustone.tistory.com/29)

 

 

혹시라도 라우팅 개념이 잘 기억나지 않으시는 분들은 아래 링크를 참조하시기 바랍니다.

https://logs-jejustone.tistory.com/19

 

파일 구조

웹 어플리케이션의 기본적인 레이아웃을 구현하기 위해서 수정하거나 새로 생성해야하는 파일은 총 5개입니다.

아래 이미지에서 파란색으로 표시한 파일은 수정할 파일들이고 초록색으로 표시한 파일들은 신규 추가할 파일들입니다. 

작업할 파일에 대한 간략한 설명은 아래를 참고하시면 됩니다.

• TheSidebar.vue
  • Web Sidebar이자 Menu 영역을 정의하는 파일
  • 콘텐츠 영역에서 보여줄 콘텐츠 페이지의 지시자 역할을 하는 영역을 정의하는 파일
• TheContent.vue
  • Web Content 영역으로 Sidebar에 해당하는 콘텐츠를 정의하는 파일
  • 메뉴에서 선택된 콘텐츠가 보여지는 영역을 정의하는 파일
• views\HomePage.vue: 라우팅 결과로 표현되어지는 콘텐츠를 정의하는 파일
• router\index.js: 라우터 관련 정보를 설정하는 파일
• main.js: 뷰 웹 어플리케이션의 기본 구동 정보를 설정하는 파일

 

결과 이미지

구현하기에 앞서 본 글을 따라하시면 아래와 같은 라우팅이 적용된 콘텐츠 영역을 확인하실 수 있습니다.

기본 콘텐츠 영역에서 바뀌었음을 보여주기 위해 신규 콘텐츠의 배경색을 다르게 설정하였습니다. 

 

1. 웹 어플리케이션을 처음 구동한 경우

• 경로: http://localhost:8080/

좌: 가로가 짧은 화면 우: 가로가 긴 화면

 

2. Sidebar인 메뉴(Menu) 영역에서 'Home'을 클릭한 경우

• 경로: http://localhost:8080/home

좌: 가로가 짧은 화면 우: 가로가 긴 화면

 

소스 코드

src\views\HomePage.vue

위 결과 이미지에서 2번째 경우인 Sidebar 메뉴에서 'Home'을 클릭한 경우 콘텐츠 영역에서 보여질 컴포넌트를 구현합니다.

본 글에서는 메뉴 선택에 따른 콘텐츠 영역의 내용이 변경됨을 확인하기 위한 기본적인 구조를 목표로 하기 때문에 상세 구현은 제외합니다. 

<!-- HomePage.vue -->

<template>
    <div id="wrapHome">
        <h1>Home</h1>
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
#wrapHome {
    background-color: blue;
    height: 100%;
}
</style>

 

• CSS 정의 영역인 <style>에서 #wrapHome으로 정의된 'height: 100%'를 통해 기존 콘텐츠 영역이었던 노란색 영역과 동일하게 꽉차게 보여지도록 구현합니다.

 

src\component\TheSidebar.vue

위 결과 이미지에서 'Menu'로 좌측에 위치한 메뉴이자 사이드바 영역을 정의하고 관리하는 코드를 구현합니다.

<!-- TheSidebar.vue -->

<template>
    <div id="sidebar">
        <h3>Menu</h3>
        
        <div class="defaultMenu topMenu">
            <router-link to="/home">Home</router-link>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
#sidebar {
    background-color: green;

    float: left;
    height: 100%;
    width: 15%;
}

.defaultMenu {
    padding: 5px;
    font-style: oblique;
}

.topMenu {
    text-align: left;
    font-size: 2vw;
}

div h3 {
    text-align: center;
    color: white;
}
</style>

• <router-link>를 통해 메뉴에서 보여질 텍스트와 라우팅할 주소 정보를 설정합니다.
• CSS영역인 <style>에 font-size의 단위를 vw로 지정하여 브라우저의 너비에 따라 텍스트의 크기도 변경될 수 있도록 구현합니다.

 

src\component\TheContent.vue

위 결과 이미지에서 'Content'로 우측에 위치한 콘텐츠가 보여지는 영역을 정의하고 관리하는 코드를 구현합니다.

<!-- TheContent.vue -->

<template>
    <div id="content">
        <router-view></router-view>
    </div>
</template>


<script>
export default {};
</script>

<style scoped>
#content {
    background-color: yellow;

    float: right;
    height: 100%;
    width: 85%;
}
</style>

• 라우팅 결과가 표시될 영역으로 div 내부에 <router-view> 태그로 표시될 영역을 지정합니다.

 

src\router\index.js

router\index.js은 라우팅 기능을 사용하기 위한 최소한의 정보 및 라우팅될 페이지 정보를 설정하는 파일입니다. 

본 파일에서 Sidebar인 메뉴에서 Element 클릭시 변경될 Path 정보와 Path에 해당하여 콘텐츠 영역에 보여질 컴포넌트 파일을 지정합니다. 

import { createRouter, createWebHistory } from 'vue-router'

// 라우팅될 페이지 경로 및 별칭
import HomePage from "../views/HomePage.vue";

// 라우팅될 페이지 정보를 담는 변수
const routes = [
    {
        path: "/home",
        name: "home",
        component: HomePage
    }
];

// 라우터 정보
const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router;

• 라우팅될 페이지가 점차 늘어나는 경우, routes 변수에 Element를 추가 선언합니다. 이와 관련하여서는 다음 게시글인 'Calculator 구현하기' 혹은 'To do list 구현하기'에서 확인하실 수 있습니다.

 

src\main.js

웹 어플리케이션을 구동할 때 가장 먼저 뷰 프로젝트 관련 정보를 읽는 파일인 main.js에 라우팅관련 코드를 구현합니다.

• 위에서 신규 생성한 'src/router/index.js' 파일을 import하고 '.use(router)'를 통해 라우팅 기능 웹 어플리케이션에 적용합니다.

import { createApp } from 'vue';
import App from './App.vue';

import router from './router/index.js';

createApp(App)
.use(router)
.mount('#app');

 

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue