1. Vue.js

1. vue.js란

뷰 코어라이브러리는 화면단 데이터 표현에 관한 기능을 중점적으로 지원하지만 프레임 워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공한다. 따라서 라이브러리역할 뿐만 아니라 프레임워크 역할도 한다. 

뷰는 앵귤러의 데이터 바인딩(뷰에 표시되는 내용과 모델의 데이터를 동기화) 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있다.  리액트나 앵귤러보다 성능이 우수하고 가볍고 빠르고 누구나 쉽게 배울 수 있다. 

 

2. UI 화면단 라이브러리

뷰는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM패턴이란 화면을 모델-뷰-뷰모델(돔리스너, 데이터 바인딩처리)로 구조화해 개발하는 방식을 의미한다. 

1) 돔 리스너(DOM Listener) : 예를 들어 검색 버튼 누르면 돔 리스너에서 버튼의 클릭을 감지 

2) 데이터 바인딩 : 검색결과에 해당하는 데이터를 모델에서 가져와 화면에 나타내준다. 

 

3. 컴포넌트 기반 프레임워크 

컴포넌트 기반의 개발 방식은 Header, Content, Aside, List, Footer등을 나누어 개발하는 방식으로 코드의 재사용성이 높아지고, HTML에서 화면의 구조를 직관적으로 파악할 수 있게 된다. 

 

3-1. 뷰 인스턴스 

- 뷰 인스턴스 생성자 = new Vue()

- 인스턴스 유효범위 =

<div id="app">

</div>

- 뷰 인스턴스 라이프 사이클  : 인스턴스의 상태에 따라 호출할 수 있는 속성을 라이플 사이클 속성이라고 한다.  그리고 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅이라고 한다. 

라이프 사이클 속성에서는 인스턴스 생성, 변경, 소멸과 관련되어

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed등이 있다. 

src = https://joshua1988.github.io/vue-camp/vue/life-cycle.html#%EB%9D%BC%EC%9D%B4%ED%94%84-%EC%82%AC%EC%9D%B4%ED%81%B4-%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8