예약 시스템 개발하기 01. Vuetify 설치 및 프로젝트 구조

이제 실제로 내가 뷰 프로젝트를 개발해보도록 하겠다.

백쪽은 JPA로 구현할거라서 우선, 통신은 구현하지않고 화면이랑 공통 레이아웃을 기준으로 우선 프론트쪽을 구현해보겠다.

 

 

 

가장 먼저 할 것은 바로  vuetify 설치!

vuetify를 사용하기 위해 먼저 터미널에서 작업하려는 폴더로 이동 후, vuetify 를 깔아준다.

 

$cd vue-form
$vue add vuetify

 

뷰티파이 공식 사이트는 api 설명이 친절하게 잘되어있어서 여기꺼 보고 거의 따라하는 식으로 구현했다.

https://vuetifyjs.com

Navigation drawer component

 

 

뷰티파이 API에서 가장 먼저 조회되는 것은 바로 Application의 구성(App.vue의 템플릿 부분에 구현될) 이다.

 

<v-app> <!--#1. 가장 상위 태그-->

  <v-navigation-drawer app> <!--#2. 메뉴 보여줄 navigation bar-->
  </v-navigation-drawer>

  <v-app-bar app> <!-- #3. appbar 영역-->
  </v-app-bar>


  <v-main>
    <v-container fluid>
      <router-view></router-view> <!-- #4. router에서 맵핑해준 화면을 보여주는 영역-->
    </v-container>
  </v-main>
  
  <v-footer app>
  </v-footer>
  
</v-app>

 

Application은 이런식으로 구성이 되어야 한다.

1번부터 살펴보자.

 

#1. 가장 상위 태그

이 상위 태그는 <template> 태그 내에 상위 태그가 하나만 있어야 한다는 뜻이다.

예제에서는 보통 <div> 태그로 감싸줬지만, 뷰티파이에서는 <v-app>태그를 주로 사용하는 것 같다.

 

 

#2. 메뉴를 보여줄 Navigation drawer

navigation drawer는 이런 형태의 navigation menu를 말한다.

Navigation drawer에서 메뉴 및 아이콘을 맵핑해주기 위해서는 뷰 인트선스의 data에 items이라는 변수를 선언해주고, 이를 html 영역에서는 가져다 쓰는 방식으로 한다.

v-for 를 통해 items 변수를 화면에 렌더링해주고 아이콘은 item.icon, 타이틀은 item.title, url은 item.to를 맵핑해준다. 

 

  App.vue의 template 태그 내 navigation drawer 부분

-template 

  -v-app

     -v-navigation-drawer 

<v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
      > <!--#1. 뷰티파이에서 제공해주는 v-navigation tag 사용-->
        <v-list>
          <v-list-item two-line>
            <v-list-item-avatar>
              <!--<img src="https://randomuser.me/api/portraits/women/81.jpg">-->
            </v-list-item-avatar>

            <v-list-item-content>윤가영</v-list-item-title>
              <v-list-item-subtitle>개발자</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
        <v-divider></v-divider>
        <v-list dense> <!-- #2. v-list와 v-for를 사용하여 items를 리스트로 렌더링-->
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
            :to="item.to" <!-- #3. 메뉴의 url은 스크립트에서 정의해준다 -->
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

 

item에 관한 부분은 data에서 정의해주면 된다.

 data: () => ({
    items : [
      /* 우선 어디로 이동할지 안정했으니 수강신청 화면으로 이동한다. */
      {  title : '강사 등록' , icon : 'mdi-account'  , to: '/enrolclasses'} , 
      {  title : '회원 관리' , icon : 'mdi-account' , to:'/enrolclasses' } , 
      {  title : '개발자 관리 화면' , icon : 'mdi-account' , to: '/enrolclasses' } 
    ],
    drawer : false
  })

 

훗

 

 

#3. app-bar

나는 app-bar 영역 내에는 그냥 navigation drawer를 열어주는 버튼만 하나 넣어주는 식으로 코딩했다.

 

    <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>

그리고 뷰티파이 공식 문서 내 Application 구조에는 나와있지 않지만 화면의 하단에 아이콘을 클릭하면 특정화면으로 넘어갈 수 있도록,

bottom-navigation 영역을 만들어주었다. 아래 그림처럼!

 

 

 

저 아이콘과 url을 연결하기 위해서는 router를 사용해야 한다. router는 다음 챕터에서 작성하도록 하겠다.

우선 먼저 살펴보자면 vuetify에서 제공하는 v-bottom-navigation 태그는 아래처럼 사용했다.

 <v-bottom-navigation v-model="value">
        <v-btn value="home" @click="homeBtnClick">
          <span>Home</span>
          <v-icon>fas fa-home</v-icon>
        </v-btn>
        <v-btn value="userInfo" @click="userInfoBtnClick">
          <span>myPage</span>
          <v-icon>fas fa-user</v-icon>
        </v-btn>
        <v-btn value="notice" @click="noticeBtnClick">
          <span>notice</span>
          <v-icon>fas fa-bell</v-icon>
        </v-btn>
    </v-bottom-navigation>

 

그리고 해당 버튼에 따른 url 은 역시 뷰인스턴스의 methods 부분에서 구현해주면 된다.

 

// 1. App.vue의 script영역  
  
  methods: {
    homeBtnClick : function () {
      alert("회원권 화면으로 돌아갑니다.");
      this.$router.push({name : 'index'});
    }, 
    userInfoBtnClick : function () {
        this.$router.push({name : 'userInfo'});
    },
    noticeBtnClick : function () {
        this.$router.push({name : 'notice'})
    }
  }
  
  
  // 2. index.js --router file
  
  import Vue from 'vue'
import Router from 'vue-router'

import EnrolClasses from '../components/EnrolClasses.vue'
import Mmbrship from '../components/Mmbrship.vue'
import UserInfo from '../components/UserInfo.vue'
import Notice from '../components/Notice.vue'

Vue.use(Router)

const createRouter = () => new Router({
  mode: 'history',
  routes: [
    {
      path : '/',
      name : 'index',
      component : Mmbrship
    },
    {
      path : '/enrolclasses',
      name : 'enrolclasses',
      component : EnrolClasses
    } ,
    {
      path : '/userInfo',
      name : 'userInfo',
      component : UserInfo

    },
    {
      path : '/notice' ,
      name : 'notice',
      component : Notice
    }

  ]
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

 

 

 

#4. router에서 맵핑해준 뷰객체를 보여주는 영역

말그대로 어디서 router에 정의된 url을 호출하는 경우,

호출된 뷰 객체를 저 영역에 뿌려준다.