000. Vue.js란?

Vue란 무엇인가?

 

사용자 인터페이스를 만들기 위한 Progressive(점진적) 프레임워크 입니다.

다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있습니다. 

또한 명시적 렌더링(코어 라이브러리) + 컴포넌트 기반 + 클라이언트 사이드 라우팅(프레임워크 기능) + 상태관리 + 빌딩 시스템을 할 수 있습니다. 

 

Vue의 장점

 

배우기가 쉽다, 리액트와 앵귤러에 비해 성능이 우수하고 빠릅니다.

리액트의 장점과 앵귤러의 장점을 갖고 있습니다.

데이터 바인딩 + 가상 돔(Virtual DOM)

 

Vue.js에서 사용하는 용어 설명

 

View, 화면 : 사용자에게 보이는 화면, 브라우저를 만나서 보여지는 최종적인 화면

 

DOM : HTML 문서에 들어가는요소 ex) 태그, 클래스, 속성 등 

 

DOM Listener : DOM에서 일어나는 이벤트를 감지하는 장치

 

Model : 데이터를 담고 있는 객체

 

Data Binding : 뷰(View, 화면)에 표시되는 내용과 모델의 데이터를 연동 시킴 

 

ViewModel : 뷰와 모델의 중간 영역. DOM Listener가 이벤트를 감지하고 모델에 있는 데이터가 화면에 잘 배치될 수 있도록 틀을 만들어주는 것

 

Vue에서 말하는 컴포넌트(Component)기반 프레임워크의 장점

 

컴포넌트 - 레고블록 같다.

리액트, 앵귤러 - Component 기반 프레임워크

코드의 재사용이 쉽다.

화면의 구조를 직관적으로 판단하기 쉽다.

 

 

리액트와 앵귤러의 장점을 어디서 가지고 있나요?

 

앵귤러의 양방향 데이터 바인딩(Two-Way Data Binding)

화면(View)에 표시되는 값과 프레임 워크의 모델(Model)데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경됨

 

리액트의 단방향 데이터 바인딩(One-Way Data Binding)

컴포넌트의 단방향 통신을 말한다.

컴포넌트 간에 데이터를 전달시 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달