지난시간 까지는 vue.js를 사용해서 프로젝트를 만들고, SPA(Single Page Application)를 위한 SFC(Single File Components)에 대해서 알아보았습니다. 그 후에는 API를 통해서 데이터를 받아오기위한 axios의 설치 및 사용에 대해서도 살펴보았죠.
이제는 가져온 데이터에 대해서 화면에 렌더링하는 방법에 대해서 알아보고자 합니다. 물론 자신이 디자인이나 UI에 대해서 해박한 능력을 가지고 있다면 음... 크게 신경쓸 필요가 있을까 싶지만... 저와 같이 이런 분야에 대해서는 0%의 능력을 가지고 있다면 관심을 가져볼만한 주제입니다.
UI에 대해서는 별도로 Framework을 제공하는 곳이 많은데, vue.js사용자들이 많이 사용하는 몇가지를 알아보고 이번 프로젝트에서 사용할 아이를 선택해 보겠습니다.
1. Frontend UI Framework
[Vuetify]
이름부터가 뭔가 vue에서 사용하라고 지정되어있는 느낌을 주는 Framework입니다. 저는 애초에 이 Framework를 먼저 알고 나머지에 대해서 추가 정보를 얻은터라 이번에는 이 아이를 선택해서 사용할 생각입니다.
Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create be...
vuetifyjs.com
Vuetify에서 자체적으로 타 framework대비 강점이라고 하면서 올려놓은 내용에 대해서 간략하게 올려보겠습니다.
[BootstrapVue]
아주아주 유명한 Bootstrap의 Vue지원 버전으로 아마 익숙하신 분들은 이게 편하다고 하는데... 저는 잘 모르겠습니다. 그리고 vue.js v2.6을 필요로 한다고 하네요. (아마 vue.js v3.x대는 안되려나 보네요??)
BootstrapVue
Quickly integrate Bootstrap v4 components with Vue.js
bootstrap-vue.org
[Quasar]
Vuetify에서 비교군으로 나와있길래 관심을 가지게된 Framework입니다. 나름 많은 사람이 사용하는 것 같습니다. 하지만 중요한 점은 vue.js v2.x일 경우는 uninstall하고 v4+로 재구성이 필요해 보입니다. 나중에 기회가 되면 version upgrade 해보면서 적용해볼까 합니다.
Quasar Framework - Build high-performance VueJS user interfaces in record time
Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive websites, PWA, SSR, Mobile and Desktop apps, all from the same codebase. Sensible people choose Vue. Productive people choose Quasar. Be both.
quasar.dev
2. Vuetify 설치하기
우선은 공식페이지에서 version을 확인할 수 있지만... 공식 npm repository에서도 확인해 보겠습니다. 그냥 vuetify라고 검색하면... 아래와 같이 검색이 됩니다.
역시나 많이 사용하네요?? 그렇다면 기존에 axios를 설치하는 방법과 동일하게~ install을 진행해 보겠습니다.
순서는 : package.json에 추가 -> npm install 수행 -> node_modules에 vuetify 설치 확인
[package.json]
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"axios": "^0.21.1",
"vuetify": "2.4.3"
},현재 내 프로젝트에 등록된 항목은 총 4개가 되었습니다. UI Framework의 경우는 버전에 영향을 받을 수 있기 때문에 고정버전으로 설치를 진행하겠습니다.
[npm install]
해당 프로젝트 경로에서 console로 접속하여 해당 명령을 입력해 줍니다.
[node_modules 확인]
정상적으로 설치가 완료 되었습니다.
3. vuetify 사용하기
정상적으로 사용하기 위해서는 고민없이 공식페이지에서 제공하는 Getting Started를 적용해 보겠습니다. 뭐... 두말할 나위가 있겠습니까?? ㅎㅎ
순서는 다음과 같습니다.
plugin file 생성 -> Main Entry Point에서 Vuetify instance를 추가 -> 폰트 및 Icon설치
[plugin file 생성]
src 폴더 밑에 신규로 plugins라는 폴더를 생성합니다. 그리고 그 안에 vuetify plugin을 아래와 같이 생성합니다.
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);
[main.js에 instance 추가]
import Vue from 'vue';
import vuetify from '@/plugins/vuetify';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
vuetify,
router,
components: { App },
template: '<App/>',
});
[index.html에 font및 Icon추가]
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>at-vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
이렇게 적용은 완료 되었습니다. 그럼 그 결과를 확인해 보겠습니다!!! 적용전과 적용후를 비교해 보겠습니다.
4. 적용 확인하기
친절하게 공식 사이트에서는 테스트 코드도 함께 제공합니다. 그 코드를 참조해서 이거저거 넣고 확인을 해 보겠습니다.
항상 template안에 <v-app /> 태그로 감싸져야 한다는 점은 명심하세요~
[제공코드]
<template>
<v-app id="app">
<v-btn color="success">Success</v-btn>
<v-btn color="error">Error</v-btn>
<v-btn color="warning">Warning</v-btn>
<v-btn color="info">Info</v-btn>
<v-card elevation="2" loading outlined shaped>
<v-card-title>
<span v-text="title" />
<v-spacer></v-spacer>
<v-btn @click="$emit('action-btn:clicked')">
Action
</v-btn>
</v-card-title>
<v-card-text>
<slot />
</v-card-text>
</v-card>
</v-app>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true,
},
},
}
</script>
[적용전 화면]
[vuetify 적용 후]
뭔가 바뀌어 보이는게 느껴지시나요??
[vuetify + google font 적용 후]
이번에는 제 눈에는 별다른게 없어보입니다;;; 그래도 적용은 된 것으로 보이니.... 다음단계로 넘어가 보겠습니다.
- Ayotera Lab -
댓글