세무민의 코딩일기 : Vue.js에 대해서 공부하기
1. 공부하려는 이유
사실 Vue.js에 대해서 공부할 생각은 거이 없었지만 회사에서 하는 스킬로는 밖에서 살아가기 힘들 것이라는 생각이
들었고 이에 따라서 새로운?! 언어를 공부하려고 퇴근하고 끄적일 예정이다.
2. Vue에 대한 간략한 설명
먼저 Vue라는 것은 무엇일까?
Vue는 말 그대로 사용자 인터페이스를 만들기 위한 프레임 워크 중 하나이다.
아직 많이 사용해보지는 못했지만 생각보다 편리하다는 느낌을 받았습니다.
JS 계열이지만 JS의 경우에는 전역 정의와 같은 단점이 있는데 Vue의 싱글 파일 컴포넌트를 이용하면 해결이 된다고
합니다.
Vue도 react처럼 가상 Dom을 사용하고 반응형이며 컴포넌트의 조합이 가능합니다.
3. Vue 선언
제가 Vue에 대해서 아직 자세히 몰라서 공부하는 사이트는 Vue.js라는 사이트를 참조하면서 공부중인데
Vue를 포함하기 위해서는 선언해줘야 하는 스크립트가 있습니다.
<!-- 개발버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 최적화 버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>두가지 중 한개를 선택하여 Html에 선언하고 사용하면 됩니다.
4. 간략한 코드 (v-for를 이용하기)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- 전달인자 -->
<a v-bind:href="url"></a>
<!-- veu.js 기본 선언 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="tmp7">
<ol>
<items
v-for="number in groceryList"
v-bind:doing="number"
v-bind:key="number.id"
></items>
</ol>
</div>
<ul id="listEx">
<li v-for="(item, index) in temp">
{{ mainMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<ul id="v-for-object" class="demo">
<li v-for="list in object">
{{ list }}
</li>
</ul>
</body>
<script type="text/javascript">
Vue.component('items',{
props:['doing'],
template: '<li>{{doing.text}}</li>'
})
var example = new Vue({
el:'#tmp7',
data:{
groceryList:[
{id:0, text:'hello'},
{id:1, text:'sg-moomins'},
{id:2, text:'to the blogger'}
]
}
})
// v-for 객체로 이용하기
var example2 = new Vue({
el: '#listEx',
data:{
mainMessage : 'tistory',
temp: [
{message : 'romin_pic'},
{message : 'romin_music'}
]
}
})
// v-for 객체로 이용하기
new Vue({
el: '#v-for-object',
data: {
object: {
title : '세무민 회사생활 화이팅!',
author: 'sg-moomin',
De: '2021-09-06'
}
}
})
</script>
</html>위의 코드는 생각보다 간단한 코드이다.
내가 Vue.js를 보면서 느낀건 리스트 렌더링이 일반적으로 편리한 느낌이다.
결과는 위와 같이 반복문 관련한 코드였다.
JavaScript도 사실 편리하지만 v-for를 이용하는 것이 JavaScript와 비슷하다는 느낌이 들었다.
사실 JS 계열이라 비슷할 수 밖에 없는 것이라고 생각도 된다.
Vue에서는 v-for의 각 항목에는 고유 Key 속성을 제공해준다고 하는데 그 이유는 Dom 노드들을 개별적으로 추적하고
기존 엘리먼트 재사용 및 재 정렬을 위해서라고 합니다.
사실 위처럼 말하면 뭔소리인지 처음에는 알아 듣기 힘들고 그냥 Key값을 이용하여 값을 식별할 수 있다고 이해하는 것
이 좋다.
key값이 있다는 것은 결국 나중에는 v-bind를 이용해서 동적 값에 바인딩을 해줘면 성능 향상에 도움이 된다는 것을
알 수 있었다.
아직 Vue.js 문법을 좀 더 익숙해지는 시간이 필요할 듯하다.
만약 Vue.js를 어느정도 익숙해지면 Spring도 공부 좀 더해서 토이 프로젝트를 해보는 것이 내 목표이다.
이번 포스팅은 간략했지만 Vue에 대해서 알아봤다.
'Programing > Vue & JavaScript' 카테고리의 다른 글
| [세무민의 코딩일기] Vue.js 예시를 이용하여 Day List 만들기 (0) | 2021.09.07 |
|---|