[실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - UI, 레이아웃(Layout) 구성/구현하기

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

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

 

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

---

오늘의 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의 레이아웃이 구성되는 것을 확인하실 수 있습니다.

좌: Sidebar Show 상태 우: Sidebar Hide 상태

 

 

 

소스 코드

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