Vue.js 사용하기
in Front-end
Vue.js 사용하기
참고: Vue.js 공식사이트
Vue.js
사용자 인터페이스 빌드를 위한 오픈 소스 프로그레시브 자바스크립트 프레임워크
Why?
현재 개발한 프론트단 코드를 개선 시키고 싶어짐
프론트 프레임워크 또는 라이브러리를 도입하고자 함
이미 많은 실패를 겪음
- Javascript를 jQuery로 배움: 비슷하게 코드가 많고 유지보수 힘듦
- Angular 1을 써보려고 4시간정도 공부하다가 포기: 웹 개발 초기라 어려웠음.. 러닝커브가 상당함
- Angular 2를 써보려고 Typescript와 같이 공부하다가 포기: 앵귤러1이랑 완전히 다른 프레임워크.. 여전한 러닝커브
- Vue.js .. 튜토리얼만 따라했는데 잘 작동됨 신기함.. 이해됨.. 예전과 달리 웹 개발을 좀 이해해서 그런것같기도..
그래서 써보니 좋아서 만드는 페이지는 이제 다 갈아엎을듯하다.
하지만 빨리 익힌 기술 빨리 까먹는다고 정리를 하려고함
사용법
- HTML 상단에 라이브러리를 추가
다운로드하기 귀찮으므로 cdn 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- vue.js 라이브러리 추가 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Vue.js practice page</title>
</head>
<body>
<!-- vue.js로 컨트롤할 DOM 객체 -->
<div id="app">
</div>
</body>
<script src="./Vue.js"></script>
</html>
- Vue.js script 작성
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
완성하고 html파일을 크롬으로 열어보면 아래와 같은 화면을 볼 수 있다.
안녕하세요 Vue!
Chrome 개발자 콘솔에서 다음과 같이 입력하면 값이 바뀌는 결과를 볼 수 있다
app.message = "Hello Vue!"
데이터와 DOM이 서로 연결되어 좋다고 하지만 내가 좋았던 부분은 Vue component였다.
기본 작성법
Vue.component( component_name, option )
Vue.component('todo-item', {
template: '<li>할일 항목 하나입니다.</li>'
})
이렇게 사용하면 전역으로 사용할 수 있고 HTML에서는 다음과 같이 사용할 수 있고 실제 동작은 template이 출력된다
<todo-item></todo-item>
이렇게 고정으로 써서는 아무 도움이 안된다. 당연히 동적으로 값을 바꿀 수 있는데 방법은 props 옵션을 사용하면 된다.
props안에 todo라는 prop을 넣었으며 :todo=”값”을 이용하여 todo-item에 데이터를 전달 할 수 있다.
Vue.component('todo-item', {
// 이제 todo라는 이름으로 데이터를 전달할 수 있다.
props: ['todo'],
template: '<li></li>'
})
하나만 하면 아쉬우니까 조금 응용해서 반복 디렉티브까지 같이 사용해보자
<!-- index.html -->
<div id="app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"> <!-- v-for을 사용하면 key도 줘야한다 v-bind는 생략가능 -->
</todo-item>
</ol>
</div>
// vue.js
Vue.component('todo-item', {
props: ['todo'],
template: '<li></li>'
})
var app = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '블로그 글 쓰기' },
{ id: 1, text: '앱 개발하기' },
{ id: 2, text: '운동하기' }
]
}
})
이렇게 반복문을 이용해서 리스트로 출력이 가능한데 나는 이것과 부트스트랩을 이용해서 다음과 같은 코드를 만들었다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Vue.js practice page</title>
</head>
<body>
<div id="app">
<dashboard>
<dashboard-row v-for="board in dashboard" >
<dashboard-panel v-for="item in board" :class="item.style">
<chart :id="item.id" slot="chart"></chart>
</dashboard-item>
</dashboard>
</dashboard>
</div>
</body>
<script src="./vue.js"></script>
</html>
var app = new Vue({
el: '#app',
components:{
'dashboard':{
template: '<div class="container-fluid"><slot></slot></div>' // 자식 노드를 가지려면 slot 필요
},
'dashboard-row':{
props: 'board',
template: '<div class="row"><slot></slot></div>',
data:function(){ // 반드시 함수형
return {message:"dashboard"}
}
},
'dashboard-panel':{
props: 'item',
template: '<div>'+
'<div class="panel panel-primary">'+
'<div class="panel-heading"></div>'+
'<div class="panel-body">'+
'<slot name="chart">'+'</slot>'+
'</div>'+
'</div>'+
'</div>',
data:function(){
return {title:"title", message:"message"}
}
},
'chart':{
template:'<div></div>'
}
},
data: {
dashboard:[
[
{id: 'flow_chart', style:'col-sm-4'},
{id: 'growth_chart', style:'col-sm-4'},
{id: 'sms_count', style:'col-sm-4'}
],
[
{id: 'flow_chart2', style:'col-sm-6'},
{id: 'growth_chart2', style:'col-sm-6'}
]
]
}
});
HTML에서는 DOM객체의 구조는 부모-자식 관계로 구성되어 있으며 이를 통하여 화면을 구성한다.
Vue component의 부모-자식 관계를 연결할 수 있는 옵션이 바로 slot이다.
컴포넌트의 템플릿안에 다른 컴포넌트를 넣기 위해서는 이 slot을 사용해야한다.
slot이 여러개일 경우 slot에 name을 추가하고 템플릿에 slot=”name”을 추가하면 해당 slot에 연결된다.
그리고 :class라는 옵션과 style이라는 prop 그리고 data의 style을 이용하여 태그에 class를 추가할 수 있다.
:class는 해당 vue component의 최상위 노드의 클래스에 추가되며, 기존의 class를 덮어쓰지 않는다.
사용 후기
HTML는 대부분 중복된 DOM객체를 사용하기 때문에 Vue component와 v-for과 같은 반복문은 되게 효율적이었다.
물론 Angular나 React도 같은 기능이 존재하지만 개인적으로 러닝커브나 적용 속도면에서 매우 편리했다.
현재 프론트 진영에서는 많은 라이브러리들이 나오고 있고 기존의 라이브러리는 더욱 강력해지고 있었다.
javascript가 프레임워크 및 라이브러리의 근간이 되지만, 이를 유지보수하기 쉽게 만들어주는 라이브러리와 프레임워크는 확실히 유용하다.
각 태그를 함축하여 Vue component로 만들고, data를 이용하여 Vue component를 만들어내는 부분에서 html와 javascript를 오고가지 않고도 빠르게 수정할 수 있는 점은 큰 장점인 것 같다.
하루 배워서 하루 써먹다보니 기술의 깊이는 아직 이정도 밖에 안되지만 계속 사용하면서 내용을 추가해야겠다.