Vue+Vuetify+Vue-Router 시작하기 - 5

Vuetify는 신세계긴 한데 사용법을 모르면 CSS 붙잡고 머리짜매는건 똑같다.

app.vue 템플릿 태그

<v-app>
    <v-card>
    <v-toolbar
      dark
      app
      >
      <v-app-bar-nav-icon
      @click.stop="drawer=!drawer"></v-app-bar-nav-icon>

      <v-toolbar-title>잉여로그</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-export</v-icon>
      </v-btn>
    </v-toolbar>
    </v-card>
    
    <v-navigation-drawer
    app
    dark
    v-model="drawer"
      >
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              
            </v-list-item-avatar>
          </v-list-item>

          <v-list-item link>
            <v-list-item-content>
              <v-list-item-title class="text-h4">
                G-Ghoon
              </v-list-item-title>
              <v-list-item-subtitle>chocobo159@gmail.com</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list
          nav
          dense
        >
          <v-list-item
          v-for="item in items"
          :key="item"
          two-line
          link
          :to="item.to"
          >
            <v-list-item-icon>
              <v-icon>{{item.icon}}</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{item.title}}</v-list-item-title>
            <v-spacer/>
            <v-list-item-subtitle>{{item.text}}</v-list-item-subtitle>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

  

  <!-- Sizes your content based upon application components -->
  <v-main>

    <!-- Provides the application the proper gutter -->
    <v-container fluid>

      <router-view></router-view>
      
    </v-container>
  </v-main>
  </v-app>

data:() 내부 소스

data: () => ({
    //
    drawer: false,
    items: [
        {title:"About" , icon: 'mdi-account-supervisor-circle', text:"누구인가?" , to:"/" },
        {title:"Board" , icon: 'mdi-email' , text: "게시판" , to:"/board" },
        {title:"calender" , icon: 'mdi-clock-start' , text:" 달력 ", to:"/calender" },
       
      ],
    }),
    

일단 vue.js 를 한다고 해도 기본적으로 JS에 대한 이해가 없으면 뭘 하든 어려움;
본인도 빡대가리라 코드 로직이 어떻게 흘러가는 지 대충 읽을 줄만 알지 갖다 쓸데마다 머리 아파 죽겠다.

아 그리고 vuetify 공식문서에도 나와있지만, 얘네 브레이크 포인트 보면 XS 가 디폴트 값으로 되어있는데,
이거 완전 모바일을 디폴트로 잡았다는 소리잖아; 편하긴 편한데 메뉴토글 신경써서 바꿔야됨
웹앱 만드는 사람 입장에서는 개꿀딱임. 진짜 신경쓸게없다.

한 30분동안 스샷에 있는 레이아웃 공식문서 붙잡고 만들어봤는데, 생각지도 못한게 바로 v-card임. 짐코딩님거 봤을때는 분명 앱바나 툴바가 얇상하게 잡혔는데 내가 하면 왜 우주돼지같이 크지... 했더니 v-card가 생각나서 앱바를 카드 태그로 묶어봤다. 놀랍게도 바로 다이어트함. 역시 남이 하는 거 보고 따라하는거랑 직접 코딩해보는거랑 천지차이임
백문이 불여일견인줄알았더니 백견이 불여일코딩.

레이아웃은 대충 툴바 누르면 옆에 네비화면 뜨고, 거기서 내가 지정한 라우터로 이동할 수 있다.

근데 그냥 쌩짜로 짜면 이거 클래스 바인딩도 해야되고 아무튼 복잡한데, 템플릿에 간단하게 클래스만 지정하는걸로 애니메이션부터, 호버링, 액티브 클래스 지정까지 다되는거 보면 이맛에 프레임워크 쓰는거같다. 그래도 react는 손도 못대겠음