Vue.js getting Start --01

오~래간만에 글을 올리는군...

React.js을 보다가.. 업무에 치여 못보고 있다가.... 최근 Vue.js 에 대한 관심이 높아져서... 또.. 한번...

https://vuejs.org/v2/guide/#Ready-for-More 의 번역입니다.

예전부터 Javascript 할때가 재미있다... 

Introduction

What is Vue.js?

Vue(발음은 /vju:/ , view 와 같죠)은 사용자 인터페이스를 구축하기 위한 전진하는 프레임워크(progressive framework) 입니다.

다른 단일의 프레임워크와는 다르게, Vue은 점진적으로 반영될수 있는 기반으로  설계 되었습니다.

이 핵심 라이브러리는 오직 view layer에 집중되었고,

여러분이 사용하는데 매우 쉽게 되어 있고, 다른 라이브러리 또는 기존의 프로젝트와의 통합에도 탁월하죠.

앞서 이야기 한 것과는 다르게, Vue은 modern tooling 과 라이브러리 지원을 결합하여 사용 할때도,

완벽하게 정교한 단일-페이지 어플리케이션을 구축가능한 능력을 가졌습니다.

 

프론트앤드 개발 경험이 있고, 다른 라이브러리/프레임워크와 Vue가 어떻게 비교되는지 알고 싶다면, 
아래 링크(Comparison with other Frameworks:https://vuejs.org/v2/guide/comparison.html) 을 참고하세요.

Getting Start

공식 가이드는 HTML,CSS와 Javascript에 대해 중간정도의 레벨 지식이라고 가정합니다. 완전 초짜 프론트앤드 개발자분들에게 공부를 하는데 있어서 첫번째 단계로 어떤 프레임워크를 해보겠다라고 바로 진입하는것은 추천하지 않습니다. 돌아가서 기본을 잡으세요.  Vue.js을 하는데 있어서, 다른 프레임워크들에 대한 이전 경험은 도움이 되지만, 반드시 필요한건 아닙니다.

Vue.js을 맛보기 위한 가장 쉬운 방법은 JSFiddle Hello world example(https://jsfiddle.net/chrisvfritz/50wL7mdz/)을

사용하는 것입니다.

다른 탭에서 열어보고 이것저것 해보시고, 몇가지 기본 예제를 거치면서 따라하도록 하세요.

또는, 간단히 index.html 파일을 생성해서, Vue을 포함해서 테스트 해보세요.

<script src="https://unpkg.com/vue"></script>

설치 페이지(https://vuejs.org/v2/guide/installation.html)는 Vue을 설치하는 데 보다 많은 옵션을 제공합니다.

초보자들에게 vue-cli을 시작하는 것을 추천하지 않고, 특히, Node.js 기반의 빌드 툴과 아직 친근하지 않을 경우에도 비추합니다.

Declarative Rendering

Vue.js의 핵심에는, 직접적인 템플릿 구문을 사용하여 선언적으로 DOM에 데이터를 우리에게 렌더링하는 시스템이 있습니다. 

<div id="app"> {{ message }} </div>

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

벌써 첫번째 Vue 앱을 만들어 버렸네요.

이것은 문자 템플릿을 렌더링한 것처럼 아주 단순하게 보이지만, Vue은 뒷단에서아주 많은 일을  마쳤습니다.

그 데이터와 DOM은 현재 링크되었고, 이제 모든것이 반응형입니다.

어떻게 우리가 알까요?

여러분의 브라우저 Javascript 콘솔을 열어서 app.message에 다른 값을 지정하세요.

여러분은 위에 수정한 것에 맞춰서 렌더링되는 예를 보실수 있을 것입니다.

추가적으로 , 우리는 아래와 같이 요소 속성에 바인딩도 가능하답니다. 

<div id="app-2">     <span v-bind:title="message">     Hover your mouse over me for a few seconds     to see my dynamically bound title!     </span> </div>

var app2 = new Vue({   el: '#app-2',   data: {      message: 'You loaded this page on ' + new Date().toLocaleString()   } })

여기서 우린 새로운 것과 마주치게 됩니다.

v-bind 속성은 directive(지시자) 라고 합니다.

Directices은 Vue에 의해 제공되는 특별한 속성이라는 것을 알려주기 위해 v- 라는 접두어가 붙습니다.

그리고 여러분이 예측한것과 같이, 지시자는 특별한 반응형 행동을 랜더링된 DOM에 적용합니다.

여기 기본적으로 이야기하는 "이 요소의 타이틀 속성을 vue의 인스턴스상에서  message 속성으로 수정되도록 유지하세요" 랍니다. 

자바스크립트 콘솔을 열고, app2.message = 'some new message' 을 입력하면,

이번 경우에는 Title 속성에 바인딩된 값을 보실수 가 있을 것입니다.

Conditionals and Loops

역시 하나의 요소의 존재를 토글하는 매우 간단한 예제가 아래 있습니다.

<div id="app-3"> <p v-if="seen">Now you see me</p> </div>

var app3 = new Vue({ el: '#app-3', data: { seen: true } })

app3.seen = false 이라고 입력해보죠.

메세지가 사라지죠

이 예제가 설명하는 것은 단지 텍스트나 속성만 바인딩 하는 것 뿐만 아니라, DOM 구문에도 바인딩 된다는 것을 알수 있습니다.

더 나아가서, Vue에 의해 element들이 추가/수정/삭제 되어 질때, Vue은  자동으로 trasition effect을 적용 할수 있는 강력한 변환 효과 시스템을 제공합니다. 

아래는 각각 그것들 자신의 특별한 기능을을 갖는  몇가지 다른 지시자들이 있습니다.

예를들어, v-for 지시자는 배열의 데이터를 사용하는 아이템 리스트를 나타내는데 사용되어 질수 있죠.

<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>

var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } })

콘솔에서 app4.todos.push({text:'New item'}) 을 입력하면,

리스트에 New Item이 추가됩니다.

Handling User Input

사용자들과 App간의 인터렉트하도록 하기 위해서는,

vue 인스턴스들에서 메소드를 발생시키는 이벤트 리스너를 붙이는데, v-on 지시자를 사용할수 있습니다.

<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div>

var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

이 메소드에서 보면, DOM을 건들일 필요 없이 우리 앱의 상태를 수정합니다.

모든 DOM 조정은 Vue에 의해 다뤄지고, 여러분이 작성한 코드는 로직에 근간하는 것에 촛점이 맞춰져 있습니다.

Vue는 또 v-model 지시자를 제공하는데, 그건 양 방향 바인딩을 input 폼과 breeze app 상태 사이에서 만듭니다.

<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>

var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })

Composing with Components

컴포넌트 시트템은 Vue에서는 또 다른 중요한 컨셉입니다.

이유는 작고, 스스로-포함되고, 종종 재사용가능한 컴포넌트들로 구성된 큰 규모의 어플리케이션을 구축하는 추상적 개념이기 때문입니다.

생각해보면, 대부분의 어플리케이션 인터페이스의 어느 타입이라도 컴포넌트 트리 안에 추상화 되어 질수 있습니다.

Vue에서는, 컴포넌트는 원래 미리 정의된 옵션을 갖는  vue 인스턴스 입니다.

vue에서 컴포넌트를 등록하는 것은 직관적입니다.

// Define a new component called todo-item Vue.component('todo-item', { template: '<li>This is a todo</li>' })

이제 다른 컴포넌트의 템플릿에 위 컴포넌트를 구성할수 있습니다.

<ol> <!-- Create an instance of the todo-item component --> <todo-item></todo-item> </ol>

하지만 이건 아주 흥미롭지 않은 모든 todo에 같은 텍스트를 그릴 것입니다.

우리는 parent scope로 부터 child 컴포넌트안에 데이터를 전달 받을수 있어야합니다. 

컴포넌트 정의 prop를 수락하도록 수정해봅시다.

Vue.component('todo-item', { // The todo-item component now accepts a // "prop", which is like a custom attribute. // This prop is called todo. props: ['todo'], template: '<li>{{ todo.text }}</li>' })

v-bind를 써서 반복되는 컴포넌트를 안에 todo을 전달할수 있습니다.

<div id="app-7"> <ol> <!-- Now we provide each todo-item with the todo object it's representing, so that its content can be dynamic. We also need to provide each component with a "key", which will be explained later. --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div>

이건 단지 계획된 예제이지만, 우리는 두개의 작은 단위로 우리 앱을 분리하기 위해 관리해왔고,

child는 알맞게 props 인터페이스를 통해  paent로 부터 잘 분리되었습니다.

우리는 이제 <todo-item> 컴포넌트를 보다 복잡한 템플릿에서,parent 앱에 영향없이 좀 더 발전시킬수 있습니다. 

큰 어플리케이션에서, 개발을 관리하기 쉽게 만들기 위해 컴포넌트로 전체 앱을 분리하는 것은 필수 있습니다.

우리는 이 가이드 이후에 컴포넌트에 관해서 좀 더 많은 이야기를 하겠지만,

여기서는 앱의 템플릿이 컴포넌트들과 함게 어떻게 보여질지에 대한 하나의 (허구의) 예제 랍니다.

<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>

#Relation to Custom Elements

Vue 컴포넌트가 Web Components Spec의 일부분인 Custom Elements와 매우 비슷하다고 알아차렸을 것입니다.

그 spec 후에 매우 느슨하게 Vue의 컴포넌트 구문이 모델되었기 때문입니다.

예를 들어 Vue 컴포넌트는 Slot AP과 "is" 특별 속성을 구현합니다.

하지만, 여기에는 약간 다른 핵심이 있습니다.

1. Web 컴포넌트 Spect은 아직까지 draft 상태이고, 태생적으로 모든 브라우저에 구현될수 없습니다.
   비교하지만, Vue 컴포넌트는 어떤 polyfills 을 요구하지 않고, 일관적으로 모든 지원되는 브라우저에서 동작합니다.
   (IE9 이상에서요), 필요할때 Vue 컴포넌트들은 navtive custom element안에 래핑되어 질수 있습니다.
2. Vue 컴포넌트는 일반 사용자 정의 요소에서는 사용할수 없는 중요한 기능을 제공하는데,  대표적인 예로 cross-component data flow, 사용자 이벤트 통신그리고 빌드 툴 통합입니다.

Ready for More?

Vue.js의 가장 기본적인 기능을 간략하게 소개 했습니다.

이 가이드의 나머지는 그것들과 좀더 나은 디테일을 포함한 다른 advanced한 기능로 채워질 것입니다.

따라서, 뒤에 있는 거 모두 읽어야 해!!!!

vue-devtools : https://github.com/vuejs/vue-devtools

Important Usage Notes

1. If the page uses a production/minified build of Vue.js,
   devtools inspection is disabled by default
   so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol,
   you need to check "Allow access to file URLs" for the extension in Chrome's extension management panel.
   
   ==> Vue.js devtools 을 추가 함. 하고 확장 프로그램 설정에서 파일 URL에 대한 엑세스 허용을 눌러용
   
   
3. Works with vues for time-travel debugging: