제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만,
제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.
혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!
오늘의 Vue.js 실습 목표는 "웹 어플리케이션 구조(Web aApplication)의 사이드바/메뉴 기능 만들어보기!" 입니다.
사이드바/메뉴 기능을 구현하기 위해서 라우팅 개념을 필수적으로 공부하고 구현해야합니다.
웹 애플리케이션 사이드바/메뉴 구현하기
사전 준비
아래 두가지에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.
- Vue 프로젝트 생성 (참고: https://logs-jejustone.tistory.com/5)
- Vue Router 설치 (참고: https://logs-jejustone.tistory.com/23 )
- 웹 어플리케이션 레이아웃 구조 구현 (참고: 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 입문 : 네이버 도서
네이버 도서 상세정보를 제공합니다.
search.shopping.naver.com
- Simplevue: https://simplevue.gitbook.io/intro/vue.js
Vue.js 란 ? - simpleVue
SPA 로 페이지를 구성하게 되면 빠른 페이지변환과 반응성, 화면전환 애니메이션 등 사용자 친화적인 부분과 적은 트래픽 양을 누릴 수 있습니다. 하지만 장점만 있는 것은 아닙니다. 위에서 말
simplevue.gitbook.io
'Programming > Vue' 카테고리의 다른 글
[실습] 뷰(Vue)로 계산기 구현하기 - 웹(WEB)에 계산기 구현하기 (0) | 2022.12.15 |
---|---|
[실습] 뷰(Vue)로 계산기 구현하기 (0) | 2022.12.14 |
[실습] 뷰(Vue)로 웹 어플리케이션 레이아웃(Web layout) 구현하기 (0) | 2022.12.12 |
뷰(Vue) 프로젝트 기본 파일(main.js / index.html / App.vue) 구조 및 동작 흐름도 (Workflow) (0) | 2022.12.08 |
뷰 라우터(Vue Router) 설치 후, "1(#) critical severity vulnerability" 오류 해결 방법 (0) | 2022.12.07 |
댓글