Vue - 학습 기록 앱 만들기 2 : UI/Layout Components

UI Components

이제 UI 컴포넌트들 만들어보겠습니다.

BaseCard라는 컴포넌트를 만들고 scoped 스타일링을 적용해서 원하는 HTML 요소에 slot을 달면 적용됩니다.

BaseCard.vue

<template>  
  <header>  
    <h1>{{ title }}</h1>  
  </header>  
</template>  

<script>  
export default {  
  props: ['title'],  
}  
</script>  

<style scoped>  
header {  
  width: 100%;  
  height: 5rem;  
  background-color: #640032;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  

header h1 {  
  color: white;  
  margin: 0;  
}  
</style>

그리고 전에 작성한 LearningResource.vue 파일의 div 태그를 base-card 태그로 바꿔주면 Card의 CSS가 적용됩니다.

<template>  
  <li>  
    <base-card>  
      <header>  
        <h3>{{ title }}</h3>  
        <button>Delete</button>  
      </header>  
      <p>{{ description }}</p>  
      <nav>  
        <a :href="link">View Resource</a>  
      </nav>  
    </base-card>  
  </li>  
</template>  

<script>  
export default {  
  props: ['title', 'description', 'link'],  

}  
</script>

그리고, 이 UI 컴포넌트는 LearningResource 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 사용할 것이므로,

Local 컴포넌트가 아닌 Global 컴포넌트로 등록 할겁니다.

main.js

import { createApp } from 'vue';  

import App from './App.vue';  
import BaseCard from './components/UI/BaseCard.vue';  

const app = createApp(App)  

app.component('base-card', BaseCard);  

app.mount('#app');

Card UI가 적용된 모습

Layout Components

이제 Layout Component인 Header 컴포넌트를 만들어 보겠습니다.

저번에 말했듯이 App.vue에는 어떠한 마크업도 들어가게 하지 않기 위해 레이아웃의 Header도 별도의 Wrapper 컴포넌트로 만듭니다.

Title에 해당하는 데이터를 BaseHeader에서 props로 가져와서 간단하게 title값만 바인딩 하였고,

원래 App.vue에 들어갈 title을 BaseHeader 컴포넌트로 대체하였습니다.

BaseHeader.vue

<template>  
  <header>  
    <h1>{{ title }}</h1>  
  </header>  
</template>  

<script>  
export default {  
  props: ['title'],  
}  
</script>  

<style scoped>  
header {  
  width: 100%;  
  height: 5rem;  
  background-color: #640032;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  

header h1 {  
  color: white;  
  margin: 0;  
}  
</style>

App.vue

<template>  
  <base-header title="학습 기록"></base-header>  
  <stored-resources :resources="storedResources"></stored-resources>  
</template>  

<script>  
import StoredResources from "@/components/Learing-Resources/StoredResources";  
import BaseHeader from "@/components/Layouts/BaseHeader";  

export default {  
  components: { StoredResources, BaseHeader },  

  data() {  
    return {  
      storedResources: [  
        {  
          id: 'official-guide',  
          title: 'Official Guide',  
          description: 'The Official Vue.js Documentation',  
          link: 'https://vuejs.org'  
        },  
        {  
          id: 'google',  
          title: 'Google',  
          description: 'The Official Google Documentation',  
          link: 'https://google.org'  
        },  
      ]  
    };  
  },  
}  
</script>

결과물