Angular

Angular의 등장으로 웹 애플리케이션은 기존의 데스크톱 애플리케이션이 처리하던 많은 기능을 담기 시작했다. 그러면서 웹 화면은 점점 더 복잡도가 증가하게 되었고, HTMl DOM의 특성상 복잡도가 증가할수록 웹은 점점 무겁고 느려지게 되었다.

HTML DOM은 트리구조로 되어 있어서 복잡도가 많은 웹일수록 끊임없이 연결된 트리구조를 갖게 되고, 변경이 일어날 때마다 트리를 매번 갱신해야한다. 이 작업은 매우 큰 성능 저하를 가져오게 된다.

장점 : 양반향 데이터 바인딩(Two-way data binding)
단점 : 속도(성능) 문제

※ 양방향 데이터 바인딩 : 모델(Model)에서 데이터를 정의한 후 뷰(View)와 연결하면 모델과 뷰 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 반영되는 것을 의미

React

이러한 단점을 극복하고 빠르고 고성능을 가진 웹 애플리케이션을 위해 나온 것이 React이다.

React는 이러한 DOM의 문제를 개선하기 위해 Virtual DOM(가상돔) 개념을 제공한다. Virtual DOM은 가상의 DOM을 만들어서 화면에 변화가 생기면 새로운 가상 DOM을 생성한 후 기존의 DOM과 비교하여 변경이 일어난 부분만 동기화한다. 이 과정을 재조정 또는 조화과정이라고 한다.

이를 통해 기존 DOM이 가지고 있던 단점을 개선하고 웹에서도 고성능 애플리케이션을 구현할 수 있도록 하였다.

특징 : 단방향 데이터 바인딩

Vue

Vue는 Angular의 데이터 바인딩 장점과 React의 Virtual DOM 장점을 모두 수용하고 있는 프레임워크이다.

특징

• MVVM 패턴 사용
• 컴포넌트를 사용한 높은 재사용성
• 양방향 데이터 바인딩(Two-way data binding) 지원

1. MVVM 패턴

   • Model-View-ViewModel
   • 프로그래밍 로직과 View(UI)를 분리해서 개발하기 위해 설계된 패턴
   • 일반적으로 웹은 HTML DOM이 View, 자바스크립트가 Model의 역할을 한다.
   • MVVM 패턴은 View와 Model 사이에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발 편의성을 제공하기 위해 만들어졌다.

2. 컴포넌트

   • 웹 화면은 수많은 요소로 구성되어 있다. 이러한 요소들은 작은 단위의 요소부터 특정 기능을 처리하는 더 큰 단위의 요소들이 있고 이런 요소들로 화면(View)이 이루어져있다.
   • 이런 View 중에서는 다른 화면에서도 사용되는 View가 있고 View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트라고 부른다.
   • vue로 개발된 파일(.vue)들은 하나하나 모두 컴포넌트이다.
   • 컴폰너트는 한 화면을 이루는 작은 요소일 수도 있고 한 화면 전체일 수도 있다.