제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만,
제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.
혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!
오늘의 Vue.js 실습 목표는 "웹 어플리케이션 (Web Application) 만들어보기!" 입니다.
본 게시글에서 다루는 사항은 관리자/직원 전용 웹 어플리케이션 Layout을 구현하는 과정입니다.
웹 어플리케이션(Web Application) 구현하기 - 레이아웃(Layout)
사전 준비
아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다.
- 프론트엔드(Frontend) 개발 환경 구축하기: https://logs-jejustone.tistory.com/45
- 프로그램 설치
- 프로젝트 구축
- 프로젝트 구동 테스트
혹시라도 아래 개념이 잘 기억나지 않으시는 분들은 관련 링크를 참조하시기 바랍니다.
- 뷰 싱글 파일 컴포넌트 체계: https://logs-jejustone.tistory.com/16
- 뷰 프로젝트 구조: https://logs-jejustone.tistory.com/12
파일 구조
관리자/직원 전용 Web Application 레이아웃을 구현하고 난 뒤, 파일/디렉터리 구조와 호출 흐름도입니다.
Web Application Layout을 구성/구현하기 위해 작업할 파일은 총 1개, "App.vue 파일입니다.
> 파일/폴더 트리
> 호출 흐름도
Layout
Web Application은 크게 4가지 영역으로 구분하여 Layout이 구성되어 있습니다.
Vue의 플러그인으로 Vuetify를 사용하기 때문에 전반적으로 <v-%> 태그를 사용하여 설명합니다.
- v-app: Web Application 최상위 태그 (Root tag)
- v-app-bar: Web Application의 Header 영역
- v-navigation-drawer: Web Application의 Sidebar/Menu 영역
- v-main: Web Application의 Main Content 영역
- v-footer: Web Application의 Footer 영역
결과 이미지
구현하기에 앞서 본 글을 따라하시면 아래와 같이 Web Application의 레이아웃이 구성되는 것을 확인하실 수 있습니다.
소스 코드
src\App.vue
Web Application의 Layout을 구성하는 파일로 Vuetify를 이용하여 구현합니다.
Vuetify의 Application 예제 코드를 App.vue 파일 내 <template> 영역에 복사/붙여넣기합니다.
<template>
<template>
<v-app>
<v-navigation-drawer app>
<!-- TODO SOMETHING - SIDEBAR -->
</v-navigation-drawer>
<v-app-bar app>
<!-- TODO SOMETHING - HEADER -->
</v-app-bar>
<!-- Sizes your content based upon application components -->
<v-main>
<!-- Provides the application the proper gutter -->
<v-container fluid>
<!-- If using vue-router -->
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>
<!-- TODO SOMETHING - FOOTER -->
</v-footer>
</v-app>
</template>
References
- Vuetify Tutorial: https://vuetifyjs.com/en/
- Vue.js 공식 사이트: https://vuejs.org/guide/quick-start.html
댓글