VO 별로 컨트롤을 위해
vo 구조대로
class 도 만들어보고
class TestVO {
this.idx = 0;
this.pidx = 0;
this.name = "TEST";
}
vat testVO = new this.TestVO()
Object로만 만들어보고
var testVO = {
idx : 0
pidx: 0,
name: 'TEST'
}
function 으로도 만들어 봤더니
TestVO: function() {
this.idx = 0
this.pidx = 0
this.name = "TEST"
}
var testVO = new this.TestVO()
function이 제일 낫더라
vo 객체 모은 내용만 js로 따로 뺄까 고민중
Introduction
Icon
1장과 3장에서 Vue의 특징중 컴포넌트 기반 프레임워크라는 내용과 인스턴스의 유효 범위에 대해서 설명하였습니다. 결국 인스턴스를 생성하여 컴포넌트로 사용하기 때문에 결국 컴포넌트가 유효 범위가 있다고 할 수 있습니다.
따라서 Vue의 컴포넌트는 유효 범위가 있기 때문에 서로 다른 컴포넌트 끼리 값을 직접적으로 참조할 수 없습니다. 그렇다면 서로 다른 컴포넌트 끼리 데이터 공유가 필요할 경우 어떻게 해야할까요?
이번장에서는 서로 다른 컴포넌트간의 통신에 대해서 설명하겠습니다.
1. 컴포넌트 간 통신과 유효 범위
컴포넌트는 각각 자체적으로 고유한 유효 범위(Scope)를 갖고있습니다. 각 컴포넌트의 유효 범위는 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없습니다.
컴포넌트 유효 범위 테스트
|
1 2 3 4 |
<div id="app"> <my-component1></my-component1> <my-component2></my-component2> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 첫 번째 컴포넌트 내용 var cmp1 = { template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>', data: function() { return { cmp1Data : 100 } } }; // 두 번째 컴포넌트 내용 var cmp2 = { template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>', data: function() { return { cmp2Data : cmp1.data.cmp1Data } } }; new Vue({ el: '#app', // 지역 컴포넌트 등록 components: { 'my-component1': cmp1, 'my-component2': cmp2 } }); |
2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 참조하는 코드입니다.
my-component2 컴포넌트 내용에서 {{ cmp2Data }} 는 my-component1 컴포넌트의 data.cmp1Data를 참조하고있습니다. 일반 Javascript 를 생각해보면 해당 컴포넌트 영역에 "100"이 출력 되야 합니다.
하지만 코드를 실행해보면 데이터가 출력되지 않습니다.
위 처럼 출력되는 이유는 같은 레벨에 있는 컴포넌트끼리는 값을 참조할 수 없기 때문입니다.
2. 상위 하위 컴포넌트 관계
위 내용처럼 Vue에서는 자체적으로 정의한 컴포넌트 데이터 전달 방법을 따라야 합니다. 가장 기본적인 방법은 상위(부모) -> 하위(자식) 컴포넌트 간의 데이터 전달 방법입니다.
3장에서 설명한 전역 컴포넌트와 지역 컴포넌트 내용처럼 인스턴스에 컴포넌트를 등록하면 인스턴스는 상위 컴포넌트, components 속성에 등록한 컴포넌트는 하위 컴포넌트가 됩니다.
상위에서 하위로는 props라는 속성을 사용하여 데이터를 전달할 수 있고, 하위에서 상위로는 $emit을 사용하여 이벤트를 발생시킬 수 있습니다.
Vue에서는 이렇게 미리 정의해 놓은 데이터 전달 방식에 따라 일관된 구조로 애플리케이션을 작성하게 됩니다. 그러므로 개발자 개개인의 스타일대로 구성되지 않고, 애플리케이션이 모두 동일한 데이터 흐름을 갖습니다.
3. 상위에서 하위 컴포넌트로 데이터 전달하기
상위에 있는 데이터를 하위에서 사용하기 위해서 props라는 속성을 이용한다 설명했습니다. props 속성은 하위 컴포넌트에서 사용합니다.
*props의 속성이름은 꼭 소문자로 입력해야합니다.
|
1 2 3 |
Vue.component('child-component', { props: ['속성이름'] }); |
하위 컴포넌트에서 등록한 props 속성을 Vue component Tag에서 v-bind라는 속성으로 상위 컴포넌트의 data 속성명을 입력합니다.
|
1 |
<child-component v-bind:속성이름="상위컴포넌트 data 속성명"></child-component> |
앞서 보았던 같은 레벨의 컴포넌트 끼리 data 속성을 공유할 수 없었던 예제로 하위 컴포넌트로 등록후 props를 속성을 사용해보겠습니다.
|
1 2 3 4 |
<div id="app"> <my-component1 v-bind:propsdata="parentData"></my-component1> <my-component2></my-component2> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var cmp1 = { template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}, 부모 데이터 : {{ propsdata }}</div>', data: function() { return { cmp1Data : 'cmp1' } }, props: ['propsdata'] };
var cmp2 = { template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}, 부모 데이터 : {{ parentData }}</div>', data: function() { return { cmp2Data : 'cmp2' } } }; new Vue({ el: '#app', components: { 'my-component1': cmp1, 'my-component2': cmp2 }, data: { parentData: 'new Vue()' } }); |
이렇게 상위 인스턴스의 parentData를 하위 컴포넌트에서 props 속성으로 사용할 수 있습니다.
4. 하위에서 상위 컴포넌트로 이벤트 전달하기
앞서 설명한 내용처럼 하위 컴포넌트는 상위 컴포넌트로 이벤트 발생하여 상위 컴포넌트의 method를 호출할 수 있습니다.
이벤트 발생과 수신은 $emit과 v-on 속성을 사용합니다.
|
1 |
this.$emit('이벤트명'); |
하위 컴포넌트 method에서 $emit을 사용하여 이벤트를 발생시킵니다.
|
1 |
<child-component v-on:이벤트명="상위컴포넌트 method명"></child-component> |
하위 컴포넌트에서 발생시킨 이벤트명으로 상위 컴포넌트 method를 실행합니다.
|
1 2 3 |
<div id="app"> <child-component v-on:show-log="printText"></child-component> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Vue.component('child-component', { template: '<button v-on:click="showLog">show</button>', methods: { showLog: function() { this.$emit('show-log'); } } }); new Vue({ el: '#app', data: { message: 'Hello Vue! passed from Parent Component' }, methods: { printText: function() { console.log("message : " + this.message); } } }); |
child-component에서 template에 있는 v-on속성과 click이벤트를 연결하였습니다. 이 click 이벤트는 child-component의 showLog라는 method를 실행합니다.
Vue Tag 속성에는 v-on에 연결된 show-log 이벤트를 부모 인스턴스의 printText 메소드를 호출하게 됩니다.
show 버튼을 클릭하면 Vue 인스턴스에 정의된 methods 속성에 printText function 을 실행하게되고 message를 출력하게 됩니다.
5. 관계 없는 컴포넌트 간 통신 - 이벤트 버스
앞서 설명된 내용을 종합해보면 컴포넌트 간의 통신은 상하위 관계가 없으면 통신이 불가능 한 구조로 설명되었습니다.
하지만 서로 다른 컴포넌트 간의 통신이 불가능한 것은 아닙니다.
하위 컴포넌트 D에서 A로의 통신을 하기 위해선 위 그림처럼 [상위 컴포넌트 B > 최상위 컴포넌트 > 상위 컴포넌트 A ] 와 같은 경로로 할 수는 있습니다.
하지만 특정 컴포넌트끼리의 관계가 없지만 서로 데이터를 주고받거나 서로의 기능을 호출하기 위해선 위 구조로는 필요없는 상위 컴포넌트가 필요합니다.
이런 불편함을 해소할 수 있는 방법이 이벤트 버스 입니다. 위 그림처럼 특정 컴포넌트끼리 통신이 가능하게 해주는 이벤트 버스에 대해서 알아보겠습니다.
|
1 |
var eventBus = new Vue(); |
이벤트 버스를 위한 Vue 인스턴스를 생성해줍니다. 이 인스턴스를 이용해서 컴포넌트간 통신 매개체로쓸 수 있습니다.
|
1 2 3 4 5 |
methods: { 메소드명: function() { eventBus.$emit('이벤트명', 데이터, ...); } } |
하나의 컴포넌트에서 eventBus 인스턴스를 이용해 $emit을 사용합니다. 작성된 이벤트명에 대한 이벤트를 발생하고 데이터를 전달할 수도 있습니다.
|
1 2 3 4 5 6 7 |
methods: { 메소드명2: function() { eventBus.$on('이벤트명', function(value, ...){ ... }); } } |
eventBus.$on을 이용하여 이벤트명에 대한 이벤트 발생을 감지합니다. 전달된 데이터를 function에서 사용할 수 있습니다.
|
1 2 3 4 |
<div id="app"> <child-component1></child-component1> <child-component2></child-component2> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var eventBus = new Vue();
Vue.component('child-component1', { template: '<div>하위 컴포넌트1 영역입니다.<button v-on:click="showLog">show</button></div>', methods: { showLog: function() { eventBus.$emit('triggerEventBus', 100); } } });
Vue.component('child-component2', { template: '<div>하위 컴포넌트2 영역입니다. 전달받은 값 : {{ number }}</div>', created: function() { var self = this; eventBus.$on('triggerEventBus', function(value){ self.number += value; }); }, data: function() { return { number : 0 } } });
var app = new Vue({ el: '#app' }); |
하위 컴포넌트 1에서 하위 컴포넌트 2의 created 에 작성된 function을 통해 data.str의 값을 조작할 수 있습니다.
이렇게 서로 상하관계가 아닌 컴포넌트끼리 통신을 가능하게 해주는 것을 Vue에서는 이벤트 버스라 부릅니다. 이런 방식은 프로그래밍 패러다임 Event-driven Programming이나 Event-driven Architecture에서 보았을 수 있습니다. 해당내용에 대해서는 이번장 설명 상단에 링크를 참조하시길 바랍니다.
Conclusions
Vue의 컴포넌트 간의 통신에 대해 알아보았습니다. Vue에서 지향하고있는 단방향 데이터 흐름이 적합한곳에서는 상하관계로 완전히 분리된 컴포넌트간의 통신은 이벤트 버스를 적절히 사용하면 Vue의 컴포넌트를 완벽하게 사용할 수 있겠습니다.
다음장에서는 Front-end Framework 의 발전에 원동력인 SPA를 가능하게 해주는 Vue 라우터와 HTTP 통신에 대해 설명하도록 하겠습니다.
References
Icon
https://kr.vuejs.org/v2/guide/components.html
Related Information
Icon
Event-driven Architectrue - http://www.2e.co.kr/hp/pages/share/ShareView.php?modsrl=5913&docsrl=181888&datatype=sms
Event-driven Programming - https://en.wikipedia.org/wiki/Event-driven_programming
출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553499>
Introduction
Icon
Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위는 인스턴스(Instance)입니다.
앞 2장에서 'Hello Vue.js!' 가 출력될 수 있었던 것은 인스턴스가 생성되었기 때문입니다. 그리고 1장에서 Vue의 특징 중 하나를 컴포넌트(Component)기반 이라고 설명하였습니다.
컴포넌트란 화면을 블록처럼 조합하여 화면을 구성할 수 있도록 하는 단위입니다.
이 글에서는 인스턴스와 컴포넌트에 대해서 설명하겠습니다.
Prerequisite
Icon
생성자 - https://ko.wikipedia.org/wiki/%EC%83%9D%EC%84%B1%EC%9E%90
인스턴스 - https://ko.wikipedia.org/wiki/%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4
컴포넌트 - https://en.wikipedia.org/wiki/Component
라이프 사이클 - https://en.wikipedia.org/wiki/Program_lifecycle_phase
1. 인스턴스 생성
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title>Vue Sample</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script> </body> </html> |
앞장에서 다루었던 'Hello Vue.js!' 예제 입니다.
인스턴스를 생성하기 위해선 new Vue 라는 생성자를 호출해야 합니다. 생성자란 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로운 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법입니다.
위 예제에는 생성자의 속성에 el, data와 같이 2개만 사용되었지만, template, methods, created 등 여러 가지 속성이 있습니다. 나머지 속성들은 뒷장에서 각각 설명하겠습니다.
2. 인스턴스의 유효 범위
Vue 인스턴스는 생성 후 HTML의 범위 내에서만 옵션 속성들이 적용됩니다. 이를 인스턴스의 유효 범위라 합니다. 컴포넌트 설명 부분에서 지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서도 꼭 알아야 하는 개념이며, 인스턴스의 유효 범위는 el 속성에 의해 정해집니다.
인스턴스가 생성된 후 화면에 적용되는 순서는 아래와 같습니다.
만약 'Hello Vue.js!' 예제를 아래처럼 수정한다면 어떻게 될까요?
|
1 2 3 4 |
<div id="app">
</div> {{ message }} |
인스턴스 유효 범위를 벗어났기 때문에 message는 출력되지 않습니다.
3. 인스턴스 라이프 사이클
앞에 있는 인스턴스 생성 설명 부분에서 인스턴스의 속성 중 created라는 속성이 있습니다. 이처럼 Vue 인스턴스는 인스턴스 생성 중 인스턴스의 상태에 따라 호출할 수 있는 속성들인 라이프 사이클 속성들이 있습니다.
라이프 사이클과 해당 속성의 종류를 알아보겠습니다.
|
단계 |
설명 |
|
beforeCreate |
인스턴스가 생성되고 최초로 실행되는 단계. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 잇지 않고, 화면 요소에도 접근할 수 없습니다. |
|
created |
data, methods 속성의 정의된 단계. this.data 와 같이 사용할 수 있고 methods를 사용하여 로직을 실행할 수 있습니다. 하지만 아직 화면요소가 적용되기 전이기 때문에 template 속성에 정의된 요소에는 접근할 수 없습니다. 그리고 data, methods 속성에 접근 할 수 있는 첫 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋습니다. 서버에 데이터를 요청하는 방법은 이후 장에서 설명되겠습니다. |
|
beforeMount |
template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 연결하기 전에 호출되는 단계. |
|
mounted |
el 속성에서 지정한 화면 요소에 인스턴스가 연결되고 호출되는 단계. template 속성에 정의된 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다. |
|
beforeUpdate |
Vue의 특징 중 반응성(Reactivity)이 있습니다. 반응성이란 코드로 인한 데이터의 변화에 따라 화면이 즉각 반응하여 갱신되는 것을 의미합니다. 관찰되고 있는 데이터가 변화되어 화면으로 그려지기 직전에 호출되는 단계입니다. 변경 예정된 데이터의 값에 대한 로직을 수행하기 좋은 단계입니다. 주의할 점은 이 단계에서 값을 변경하는 로직을 넣더라도 화면이 반응하지 않습니다. |
|
update |
데이터가 변경된 후 화면에 반영된 후 실행되는 단계. 데이터 변경 후 화면 요소에 대한 제어 로직을 추가하기 좋습니다. |
|
beforeDestroy |
Vue 인스턴스가 소멸하기 직전에 단계. 아직 인스턴스에 접근할 수 있기 때문에 Vue 인스턴스의 데이터를 삭제하기 좋은 단계입니다. |
|
destroyed |
Vue 인스턴스가 소멸하고 나서 호출되는 단계. 인스턴스에 정의한 모든 속성이 제거되고 하위로 선언한 인스턴스까지 모두 소멸합니다. |
'Hello Vue.js!' 예제에서 라이프 사이클 속성 몇 가지를 추가해 보았습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <title>Vue Instance Lifecycle</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, beforeCreate: function() { console.log("beforeCreate"); }, created: function() { console.log("created"); }, mounted: function() { console.log("mounted"); }, updated: function() { console.log("updated"); } }); </script> </body> </html> |
각 로그를 확인해보면 아래와 같습니다.
beforeCreate, created, mounted가 출력되었지만, updated 속성의 function은 호출되지 않았습니다. 인스턴스의 data 값이 변경된 적이 없기 때문에 실행되지 않았습니다. data 속성값을 변경해보겠습니다.
|
1 2 3 4 |
mounted: function() { console.log("mounted"); this.message = 'Hello Vue!'; } |
화면요소가 연결된 후 호출되는 단계인 mounted 에서 message 값을 수정해 보았습니다.
mounted 단계에서 message 값을 수정되었기 때문에 데이터 수정에 의한 반응으로 화면의 값이 바뀌고 updated 가 실행됨을 확인할 수 있습니다.
위와 같이 Vue 인스턴스의 라이프 사이클 단계에 따라 적절한 처리를 이용하면 화면 개발 시 유용하게 처리할 수 있습니다.
4. 컴포넌트 등록
컴포넌트 등록의 방법은 두 가지가 있습니다. 전역 컴포넌트, 지역 컴포넌트 두 가지로 용도에 따라 사용할 수 있습니다.
지역(Local) 컴포넌트는 정해진 특정 구역에서만 사용할 수 있는 컴포넌트이고, 전역(Global) 컴포넌트는 모든 인스턴스에서 공통으로 사용할 수 있는 컴포넌트입니다.
전역 컴포넌트 등록
|
1 2 3 |
Vue.component('컴포넌트 명', { //컴포넌트 속성 }); |
Vue 라이브러리를 로딩하고 나면 Vue라는 전역 변수가 생성됩니다. 해당 변수에 전역 컴포넌트를 등록 할 수 있습니다.
모든 Vue 인스턴스에서는 해당 컴포넌트에 접근하여 사용할 수 있습니다.
예제를 살펴보겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <title>Vue Component Registration</title> </head> <body> <div id="app"> <button>컴포넌트 등록</button> <my-component></my-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> Vue.component('my-component', { template: '<div>전역 컴포넌트가 등록되었습니다!</div>' }); new Vue({ el: '#app' }); </script> </body> </html> |
등록한 my-component가 등록되었고 template이라는 속성을 가지고 있습니다.
(template에 대한 자세한 설명은 6장에서 설명되겠습니다)
id가 app인 요소에 my-component를 사용하도록 선언하였고 전역에 등록되어있는 my-component의 template이 사용되었습니다.
크롬 브라우저에서 해당 화면에서 마우스 우클릭 후 소스 보기를 하면 아래와 같습니다.
하지만 브라우저에서 요소검사를 하면 아래와 같습니다.
소스 상에서는 <my-component></my-component> 으로 확인되지만, 동적으로 변한 최종화면에서는 <div>전역 컴포넌트가 등록되었습니다!</div> 로 확인됩니다.
지역 컴포넌트 등록
|
1 2 3 4 5 |
new Vue({ components: { '컴포넌트 명': 컴포넌트 내용 } }); |
전역 컴포넌트와 마찬가지로 컴포넌트 명은 HTML에 작성할 사용자 정의 태그를 의미하고 컴포넌트 내용은 해당 컴포넌트의 속성을 정의합니다.
예제를 살펴보겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <title>Vue Component Registration</title> </head> <body> <div id="app"> <button>컴포넌트 등록</button> <my-local-component></my-local-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> var cmp = { // 컴포넌트 내용 template: '<div>지역 컴포넌트가 등록되었습니다!</div>' }; new Vue({ el: '#app', components: { 'my-local-component': cmp } }); </script> </body> </html> |
이렇게 본다면 전역 컴포넌트와 지역 컴포넌트가 사용방법만 다를 뿐 어떤 차이가 있는지 잘 와닿지 않습니다. 다른 예제로 살펴보겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <head> <title>Vue Local and Global Components</title> </head> <body> <div id="app"> <h3>첫 번째 인스턴스 영역</h3> <my-global-component></my-global-component> <my-local-component></my-local-component> </div> <hr> <div id="app2"> <h3>두 번째 인스턴스 영역</h3> <my-global-component></my-global-component> <my-local-component></my-local-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> // 전역 컴포넌트 등록 Vue.component('my-global-component', { template: '<div>전역 컴포넌트 입니다.</div>' }); // 지역 컴포넌트 내용 var cmp = { template: '<div>지역 컴포넌트 입니다.</div>' }; new Vue({ el: '#app', // 지역 컴포넌트 등록 components: { 'my-local-component': cmp } }); // 두 번째 인스턴스 new Vue({ el: '#app2' }); </script> </body> </html> |
이번에는 인스턴스를 2개를 생성했습니다.
app, app2 두 인스턴스 모두 my-global-component, my-local-component를 인스턴스 유효 범위에서 사용하려 하고 있습니다.
하지만 app에서는 components에서 cmp를 등록하였고 app2에서는 등록하지 않았습니다. 모두 예상하는 대로 결과는 아래와 같습니다.
지역 컴포넌트는 인스턴스 속성의 components에 등록하지 않으면 사용할 수 없지만, 전역 컴포넌트는 모든 인스턴스에서 사용할 수 있습니다.
Conclusions
Vue의 인스턴스와 컴포넌트에 대해서 알아보았습니다.
인스턴스는 라이프 사이클을 유용하게 써야 하며, 컴포넌트는 전역, 지역 컴포넌트를 잘 구분하여 작성한다면 공통된 기능의 분리와 각각 업무나 기능별 컴포넌트를 분리하여 사용할 수 있겠습니다.
다음 장에서는 컴포넌트 간의 통신 관계에 대해서 알아보겠습니다.
References
Icon
https://kr.vuejs.org/v2/guide/
출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553372>
Introduction
Icon
Vue.js 의 초기 개발환경은 그다지 어려운 설정이 없습니다.
Angular 상위 버전(2 이상)에서는 Node.js 가 필수이지만 Vue.js는 일반 Javascript 라이브러리처럼 사용할 수 있고, Node.js로 프로젝트를 구성할 수도 있습니다.
간단한 개발 프로젝트에서는 텍스트 에디터와 대부분 사용하는 브라우저 Chrome에서 개발자 도구 설치만 하면 개발 할 수 있습니다.
Prerequisite
Icon
Text Editor - Notepad, Atom, Sublime Text, VSCode 등...
Browser - Chrome
1. Hello Vue.js!
모든 프로그래밍 언어나 프레임워크에서 등장하는 'Hello Vue.js!' 를 출력하는 예제를 만들어보겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title>Vue Sample</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script> </body> </html> |
Javascript의 기초지식이 있고 jQuery 정도 사용해 보았다면 해당 코드는 해석하기 쉽습니다.
new Vue 구문에서 무언가 인스턴스를 생성하고 el : '#app' 에서 element ID가 app이며, 데이터로는 message라는 key로 'Hellow Vue.js!' 라는 값을 가지고 있는 것 같습니다.
그 위에는 app이라는 ID를 가진 div가 있고 그 태그 안에 {{ message }} 와 같이 작성되어있습니다.
index.html 파일명으로 해당 소스를 저장 후 Chrome Browser 에서 실행해 보겠습니다.
결과는 예상대로 Hello Vue.js!가 출력되었습니다.
하지만 콘솔을 확인해 보면 Vue 확장도구를 다운받으라는 메시지와 개발자 모드에서 Vue를 실행하고있으니 상용화 모드로 전환? 하라는 메시지가 있습니다.
위 메시지가 나오지 않도록 아래 장에서 Vue 개발자 도구를 설치해 보겠습니다.
2. Vue 개발자 도구 설치 및 사용방법
Chrome 웹 스토어 에서 vue를 검색합니다.
해당 확장프로그램을 설치하면 위 이미지 아이콘으로 확장프로그램을 실행할 수 있습니다.
위에서 사용한 Hellow Vue.js! 예제에서 확장프로그램을 실행해봅니다.
Vue.js를 사용하고 있지만 찾을 수 없다고 하네요. 이 이유는 해당 예제는 서버에서 띄운 것이 아니라 파일 시스템에서 접근하여 브라우저로 실행했기 때문입니다.
브라우저 주소창에 http:// 와 file:///로 구분할 수 있습니다.
확장 프로그램 관리에서 파일 URL에 대한 액세스 허용을 허용으로 상태변경 합니다.
3. Vue 개발자 도구 사용 방법
2장 까지 잘 따라오셨다면 이제 Vue 확장 프로그램을 실행할 수 있습니다.
<Root> 는 최상위 컴포넌트를 나타내며 클릭 하게되면 그 아래로 존재하는 속성들을 확인할 수 있습니다.
그 이외에 'Vuex', 'Events', 'Refresh' 탭을 사용하여 각 내용들을 확인할 수 있습니다.
아직 컴포넌트의 내용을 다루진 않았지만 다른 코드를 살펴보겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<html> <head> <title>Vue Component Scope</title> </head> <body> <div id="app"> <my-component1></my-component1> <my-component2></my-component2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> // 첫 번째 컴포넌트 내용 var cmp1 = { template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>', data: function() { return { cmp1Data : 100 } } }; // 두 번째 컴포넌트 내용 var cmp2 = { template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>', data: function() { return { cmp2Data : cmp1.data.cmp1Data } } }; new Vue({ el: '#app', // 지역 컴포넌트 등록 components: { 'my-component1': cmp1, 'my-component2': cmp2 } }); </script> </body> </html> |
컴포넌트를 선언해 사용하면 위와같이 컴포넌트 목록과 그 안의 속성을 볼 수 있습니다.
Conclusions
이제 Vue를 개발하기 위한 기본 환경을 갖추었습니다.
다음 장에서는 Vue를 이용한 화면을 개발하기 위한 필수 단위 인스턴스 & 컴포넌트에 대해서 알아보겠습니다.
출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553261>
Introduction
Icon
Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다.
기존 웹 개발자뿐만 아니라 HTML, CSS, Javascript 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌습니다.
뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다. 어떤 의미인지 다음 그림으로 알아보겠습니다.
(점진적인 Framework로서의 Vue의 의미)
위 그림은 Vue의 창시자인 에반 유가 2017년 Vue.js 컨퍼런스에서 발표한 내용 중에 있는 그림입니다. Vue 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니다. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미입니다. 그래서 Vue를 점진적인 프레임워크라고 표현합니다.
Prerequisite
Icon
1. Vue 의 장점
빠르게 변화하는 Front-end 시장에서 Vue는 해결사 같은 존재입니다.
첫째, 배우기가 쉽습니다.
HTML, CSS, Javascript 의 기초만 아는 입문자라도 하루 안에 배울 수 있고, 익숙한 실무 개발자라면 몇 시간 이내에 배울 수 있습니다.
가장 간단한 예를 보겠습니다.
html
|
1 2 3 |
<div id="app"> {{ message }} </div> |
cdn
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> |
javascript
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); |
view
|
1 |
Hello Vue.js! |
Icon
Vue가 여타 Front-end Framework보다 배우기 쉬운 이유
Angular1은 Framework로서 완전한 기능을 제공하는 MVC 구조로 출발하여 컴포넌트 기반의 Angular2로 진화하였습니다. 이 과정에서 TypeScript, ES6 등 기타 어느 Framework보다 더 많은 학습이 필요하게 됩니다. React 또한 ES6, JSX라는 장벽이 존재하며, 신기술이 끝없이 등장하는 상황에서 웹 개발자에게 주어지는 짐은 점점 더 무거워집니다. 따라서 쉽게 배울 수 있는 Vue의 등장으로 소규모 혹은 신규 프로젝트가 진행되는 곳에서는 Vue의 사용이 많아지고 있습니다.
둘째, React나 Angular에 비해 성능이 우수하고 빠릅니다.
Vue 제작팀에서 React와 Angular를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났습니다.
셋째, React와 Angular의 장점을 모두 갖고있습니다.
Vue는 구글에서 일하던 직원이 Angular를 더 가볍게 쓰고 싶어서 만든 Framework입니다. Angular의 데이터 바인딩 특성과 React의 가상 돔 기반 랜더링 특징을 모두 가지고 있습니다.
이처럼 다른 Front-end Framework 에 비해 성능이 우수할 뿐만 아니라 가볍고 빠르며, 배우기 쉽다는 점이 앞으로 더 많은 개발자들에 사랑을 받을 것 이라 전망됩니다. 사용자가 많아지면 생성되는 거대한 커뮤니티는 훌륭한 Framework로 이어지는 결과를 볼 수 있습니다.
2. Vue 의 특징
1. UI 화면단 라이브러리
Vue는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리입니다.
(MVVM 구조에서의 Vue.js의 위치)
MVVM 패턴이란 화면을 모델 - 뷰 - 뷰모델 로 구조화하여 개발하는 방식을 말합니다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적이고 유지보수가 편하게 하기 위함입니다.
|
용어 |
설명 |
|
뷰(View) |
사용자에게 보이는 화면 |
|
돔(DOM) *Document Object Model |
HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 |
|
돔 리스너(DOM Listener) |
돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
|
모델(Model) |
데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 |
|
데이터 바인딩(Data Binding) |
뷰(View)에 표시되는 내용과 모델의 데이터를 동기화 |
|
뷰 모델(ViewModel) |
뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역 |
Icon
위키피디아에서는 MVVM 패턴을 아래와 같이 정의 합니다.
"마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴"
이말을 바꿔 해석해보면 "화면 앞단(Front-end)의 화면 동작과 관련된 로직과 화면 뒷단(Back-end)의 데이터베이스 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다." 라고 할 수 있겠습니다.
웹 초창기에는 이런 Front,Back -end 라는 구분이 없었지만 화면요소에 대한 코드와 데이터베이스에서의 데이터에 대한 조작 등 한파일에 HTML, CSS, Javascript, Java 등 여러 코드가 섞이며 가동성이 현저히 떨어지기 때문에 이러한 문제점을 해결하기 위한 방법으로 MVVM 패턴이 사용되기 시작했습니다. Vue 뿐만아니라 React에서도 해당 패턴을 사용하고있습니다.
2. 컴포넌트 기반 프레임워크
Vue가 가지는 또 하나의 큰 특징은 컴포넌트(Component)기반 프레임워크라는 점입니다.
컴포넌트란 마치 레고 블럭과 같습니다. 레고 블럭을 잘 조합하면 여러가지 원하는 모형을 만들 수 있고 필요할 때 마다 만들어 놓은 레고 블럭들 끼리 조합 할 수 있습니다.
이와 같이 각 영역을 구분지어 관계를 형성해 놓으면 코드를 재사용하기 쉽게 됩니다. 따라서 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용할 수 있으므로 빠르게 개발할 수 있을 뿐만 아니라 남이 작성한 코드를 볼 때도 수월합니다.
3. Conclusions
Vue란 무엇인가에 대해 알아보았습니다.
Vue의 장점, 특징을 알아본 결과 개발자의 의도대로 Front-end Framework 는 매우 필요하지만 진입장벽의 문제로 안그래도 배울것이 많은 개발자들에게 좀더 쉽고 빠르게 사용할 수 있고, 그렇다고 해서 여타 다른 Framework에 뒤쳐지지 않을 Vue 가 과연 거대한 두 산맥(Angular, React)을 상대로 Front-end Framework 시장에서 살아남을 수 있을까요?
다음 장부터 실제 개발환경 구성과 기본예제를 통해 얼마나 강력하고 쉬운지에 대해 직접 체험해 보겠습니다.
References
Icon
참고서적 - http://book.naver.com/bookdb/book_detail.nhn?bid=13256615
MVVM - https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
Related Information
Icon
JSX - http://blog.sonim1.com/175
MVC, MVP, MVVM 비교 - https://magi82.github.io/android-mvc-mvp-mvvm/
출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8552708>
|
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
