Taran

v-on 지시자는 UI에서 사용할 event와 실행할 Vue instance내의 mehtod를 등록한다.

예시 코드를 보면, HTML 구간에 v-on:click="clickMethod" 라고 작성되어있다. 읽는 그대로 click이벤트가 발생을 하면, instanceElement라는 이름의 Vue instance내에 구현된 clickMethod를 호출하겠다는 의미이다.

위 예시는 

[button 클릭 -> 클릭 이벤트 실행 -> clickMethod 함수 실행 -> Vue instance내 data "clickConfig"값이 수정] 

순서로 실행된다.

최초 페이지 실행 시에는 

버튼 하나와 default 값 true로 된 clickConfig가 출력되고 있다. 그리고 버튼을 클릭하게 되면 

clickMethod 함수가 실행되면서 clickConfig의 값이 false로 수정되고, 화면 출력값도 바뀌는 것을 알 수 있다. 

(참고 1) 위 예시 코드에서 값을 출력할 때, v-text나 v-html과 같은 출력용 지시자를 사용하지 않았다. 위 방법은 Vue instnace내 data 값을 그대로 출력시키는 방식으로 {{data-key}} 과 같은 방식으로 출력한다.

(참고 2) data의 값이 수정되는 과정은 소스 코드의 동작 상에 있지만, 수정된 값을 HTML에 update하는 과정은 없었다. 이것은 Vue.js의 데이터 관리에 대한 기본 철학이 데이터 양방향 바인딩을 따르고 있기 때문이다. 순수 Javascript로 개발하거나 Jquery로 개발할 때는 단방향 바인딩으로, 데이터의 수정과 HTML로의 수정을 별도로 개발하는 것과 다르게 data의 수정을 통해 바로 수정되도록 하는 것이 Vue.js가 가지는 프레임워크로서의 차별점이다. 

1. Vue instance

Vue는 Javacript 객체 인스턴스와 HTML 요소(element)가 맵핑되어 동작하게 된다. 

위 코드는 

HTML에서 id가 instnaceElement인 요소를 생성하고 

Javacript에서 Vue instance를 선언한 후 el(element)가 '#instanceElement'인 요소를 보도록 등록한 것이다.

2. Vue instance 굴러가는 걸 보자

굴러가는 것을 보기 위해

HTML 요소에 Vue에서 제공하는 v-text 지시자를 사용해 name value를 받아오고

Javascript의 Vue instance에 data 프로퍼티를 구성한다. 

* Vue instance에서 HTML과 Javascript에서 사용할 데이터를 data 프로퍼티에 구성한다. 

위와 같이 작성하면, 

이렇게 출력된다. 

3. 생명주기(LifeCycle)

간단한 출력문을 봤으니 생명주기를 확인해보자

Vue Instance는 각각 별도로 4단계의 생명 주기를 갖는다. 

   (1) 인스턴스 생성  

           - 인스턴스가 생성된다. 데이터 관찰자와 사용할 이벤트를 생성하고 초기화한다.

   (2) 템플릿 & 가상 DOM 생성

           - 렌더링 함수를 통해 템플릿을 컴파일한다. 그리고 가상 DOM을 만들고 결과를 HTML DOM에 마운트(mount) 한다.

   (3) 이벤트 루프

           - view-model의 Data를 감시(monitoring)한다. 값에 변화가 있을 때 다시 랜더링한다.

   (4) 인스턴스 소멸

           - 앱 소멸이 시작되면, 모든 관찰자/리스너/자식 컴포넌트들이 삭제된다. 

* 각 생명 주기 단계 별 간단한 설명을 작성했지만, 당장 이해하기에는 나오지 않은 기능 및 요소들이 있다. 개발에 있어서 가장 중요한 생명 주기인 만큼 지속적으로 보면서 나오는 내용들과 함께 겹쳐 봐야 할 것 같다. 

3. LifeCycle Hook

만약 안드로이드 개발을 한 적이 있다면, onCreate나 onResume과 같은 각 생명 주기를 감지해서 특정 시점에 원하는 함수를 실행하는 개발에 익숙할 것이다. 

Vue 역시 생명주기를 기반으로 개발을 할 수 있고, 그것을 도와주는 것이 Hook이다. 

생명주기 4단계에 따라 [create, mount, update, destroy]가 있고 각 주기별 [전/후]로 나누어 총 8개의 Hook이 있다. 

- 인스턴스 생성 : beforeCreate, created

- 템플릿 & 가상 DOM 생성 : beforeMount, mounted

- 이벤트 루프 : beforeUpdate, updated

- 인스턴스 소멸 : beforeDestroy, destroyed

* 코드가 길어져서 파일로 넣습니다. 

개발자 도구를 키고 해당 페이지를 호출하면, beforeCreate, created, beforeMount, mounted

네 개의 Hook이 호출되어 로그가 남는 것을 알 수 있다. 

* update와 destroy의 경우, 위 코드 중에서 데이터의 수정 및 인스턴스 소멸이 발생하지 않아서 호출이 안된 것이다. 

* 개발자 도구에서 생명 주기를 강제 호출할 수도 있지만, 당장 필요한 내용도 아니니 지나가겠다. 

현재 웹 프레임워크 시장은?

최신 웹 프레임워크의 파이는 크게 

- 죽어가는 Angular

- 현재 웹 프레임워크의 주연 React (정확히는 프레임워크가 아닌 라이브러리라고 한다.)

- React의 바로 뒤를 쫓고 있는 Vue.js

세 가지가 있다. 

세 가지 중 Vue를 꺼낸 이유는?

셋 모두 SPA(Single Page Application)을 지향하고 인지도 있는 웹 프레임워크였지만, 재작년부터 그 희비가 뚜렷하게 갈렸다.

- Angular는 메이저 버전 업그레이드 이후 아예 다른 프레임워크로 바뀌어 버렸다고 한다. 실제로 웹 프레임워크 시장에서 하향세를 타고 있다. 버전 업그레이드가 되었다고 기존 개발자도 사용 못 할 정도로 바뀌었다면 프레임워크로서 역할을 못한 것이니 제외 했다.

- React는 공부해보겠다고 책 사서 한번 봤었는데, 지나치게 어렵다. 당장 실무에서 사용하는 것도 아닌 개인 공부용으로 보는 수준에서 보기에는 필요 이상으로 복잡해서 때려쳤다. 

- Vue는 어떤 방식인가 하고 블로그 글을 찾아 따라해봤을 때 약간 따라해봤다. 문법이 JQuery에서 개선되었다고 생각될 정도로 친숙했고, 작성된 코드가 React에 비해서 이해하기 쉬웠다. 

그렇다. 쉬워보여서 골랐다. 

Vue.js란?

Vue 공식적인 설명은 "사용자 인터페이스 구성에 집중한 프로그래시브 프레임워크"이다. 

여기서 말하는 프로그래시브 프레임워크(progressive framework)가 Vue의 최대 장점이다. 이름대로 점진적으로 적용이 가능한 프레임워크라는 것이다. 운영/개발 중이던 기존 환경(HTML과 Javascript)에서 개발을 이어서 진행할 수 있다. 

근데 다들 튜토리얼 잘되어있다고 그거 보고 공부하면 된다고 했는데 역시 돌머리라 잘 이해를 못하겠어서 책 한권 사서 보고 있다.