9. Vue와 Firebase로 나만의 사이트 만들기 - appbar 만들기

 

 

 

VF - 9강

 

 

 

---

• 이전 강에서 vuetify이 설치를 완료하였고 이제부터 하나씩 만들어갈 예정이다.
• SPA에서 중요한 것은 부모 component 격인 App.vue 파일이 중요하다.
• 보통 SPA에서는 상단바를 제외한 나머지 부분이 라우터로 페이지가 변하게 된다.
• 더욱 상세히 말하면 상단바 좌측이나 우측에는 메뉴 드롭을 하는 navigation drawer가 있고, navigation drawer가 페이지들을 각각 링크하고 있으며, 링크한 것을 클릭하면 뷰 라우터를 통해 화면이 라우터 되는 영역에 뿌려지게 된다. 그리고 상단바에는 검색이나 상태 유무 같은 기능이 들어가기도 한다.
• 그래서 맨 처음 해야할 것은 Appbar를 만들기 위해 App.vue를 수정해야 한다.

 

• 디자인 적으로 보았을 때 Material Design의 한계이기도 한 단점은 누가 만들더라도 비슷비슷하다는 것이다.
• 뭔가 획기적으로 바꾸고 싶다면 CSS적으로 수정을 많이 하거나 vuetify를 쓰지 않고 다른 것을 해야 한다.
• 그래도 vuetify는 Material Design으로 훌륭하기 때문에 제일 낫다.

 

• 그리고 UI components가 있는데 그중 bars에서는 App bars, Toolbars, System bars가 있다.
  • App bars는 우리가 흔히 앱에서 보는 모양이며, 웹에서도 모양은 비슷하다. 원래는 없었으나 vuetify 2.0 되면서 App bars라는 개념이 생겼다.
  • Toolbars는 App bars와 비슷하나 보통 상단 아래에 위치한다.
  • System bars는 핸드폰 상단바와 비슷하게 시계나 배터리, 통신감도 상태 등을 나타낸다.

 

• vuetify 사이트에는 여러 예시에 대한 App bars의 기본 코드를 제공하지만 처음 하는 것만큼 App.vue의 내용을 모두 지우고 하나씩 차근차근 작성할 예정이다.

<v-app-bar app color="primary" dark> </v-app-bar>

• <v-app-bar>라는 태그에 app이라는 propertys가 항상 있어야 하며 app이 없으면 어디에 달라붙어야 하는지를 모르게 된다.

<v-app-bar-nav-icon></v-app-bar-nav-icon>

• <v-app-bar-nav-icon> 태그는 석 삼자(三) 메뉴 버튼을 말하며 기본적으로 사용된다.

<v-toolbar-title>Page title</v-toolbar-title>

• <v-toolbar-title> 태그는 App bars의 타이틀을 추가할 때 사용된다.

<v-btn icon>
  <v-icon>mdi-magnify</v-icon>
</v-btn>

• 돋보기 버튼을 추가하려면 위의 코드를 추가한다.
• 이대로 추가하면 타이틀 바로 오른쪽에 붙기 때문에 오른쪽 끝으로 보내기 위해서는 <v-spacer> 태그를 사용한다.

<v-spacer></v-spacer>

• 페이지 테스트를 하기 위해 돋보기 버튼을 클릭하면 '/about' 페이지로 가게끔 설정하려면 <v-btn>에 to 속성을 추가한다.

<v-btn icon to="/about">
  <v-icon>mdi-magnify</v-icon>
</v-btn>

<!-- 테스트를 위하여 하나더 추가 -->
<v-btn icon to="/">
  <v-icon>mdi-magnify</v-icon>
</v-btn>

• 그리고 만약 내용이 보이지 않는다면 화면을 뿌려주는 <router-view> 태그를 아래에 추가한다.

<router-view></router-view>

• 이처럼 바뀌는 부분에 대해서는 <router-view>태그가 해결해준다.
• 여기서 중요한 건 <router-view>를 하나로 써버리면 App bars 아래에 모든 공간이 <router-view> 태그가 차지하기 때문에 contents 영역에 대한 정의를 하기 위하여 예전에는 <v-content> 태그로 감싸주었지만 이제 사용되지 않아 <v-main> 태그로 감싸준다.

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

• 지금까지 작성한 코드와 화면 결과는 아래와 같다.

<!-- App.vue -->
<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
    
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>Page title</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon to="/about">
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      
      <v-btn icon to="/">
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      
    </v-app-bar>
    
    <v-main>
      <router-view></router-view>
    </v-main>
    
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>

 

• 여기까지 App bars에 대한 간단한 설명을 하였다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405476055
  • https://www.youtube.com/watch?v=arVuSM4ux7I 

9 appbar 만들기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---