Vue.js

새로운 웹 개발 트렌드에 빠르게 대응하면서 효율적으로 개발하기 위해 다양한 도구와 기술도 생겼다.
그중 하나가 프레임워크(framework)이다. 프레임워크를 사용하면 일반 작업이나 공통 패턴을 추상화해 웹 애플리케이션을 더 쉽게 만들수 있다.

1.1 뷰(Vue)란

뷰는 사용자 인터페이스(UI, User Interface)를 만드는 데 사용하는 자바스크립트 기반 오픈소스 프로그레시브 프레임워크다. 프로그레시브 프레임워크란 이미 다른 사양으로 개발된 웹 애플리케이션에서 일부분만 '점진적으로' 적용할 수 있도록 모듈화하고 유연한 구조를 갖춘 프레임워크를 의미한다.

뷰는 MVVM(Model-View-ViewModel) 아키텍처 패턴을 따른다.
MVVM 아키텍처 패턴은 데이터를 보여주는 뷰(Vvew)와 데이터를 처리하는 뷰 모델(view model)사이에 데이터를 중개하는 뷰 모델을 두어 UI와 데이터 처리 로직의 상호 의존성을 줄이는 아키텍쳐 패턴을 말한다. 뷰와 모델 사이 의존성을 낮추면, 뷰, 뷰 모델, 모델 부분을 독립적으로 모듈화하고 재사용성을 높일 수 있는 애플리케이션을 설계할 수 있다.

뷰를 사용하면 뷰와 모델을 손쉽게 중개할 수 있는, 즉 MVVM 아키텍처 패턴을 따르는 애플리케이션을 설계할 수 있다.

1.2 뷰의 특징

• 가상 DOM
  웹 브라우저는 문서 객체 모델을 생성할 수 있다. 웹 브라우저에 표시되는 모든 화면 구성요소는 HTML 문서를 파싱해 객체로 변환하고 그 결과를 화면에 보여준다. 이때 웹 브라우저가 생성하는 객체를 문서 객체 모델(DOM, Document Object Model)이라고 한다.

문서 객체는 서로 부모-자식 관계로 연결된 구조가 만들어지며, 이러한 구조를 DOM 트리 라고 한다.

자바스크립트로 DOD을 수정하면, 수정된 DOM 객체와 연결된 모든 객체를 다시 해석해 객체를 생성한다. 이러한 동작 방식은 DOM트리가 깊어질수록 수정되는 문서 객체가 많아져서 여러 문제가 발생한다.

뷰는 실제로 DOM을 사용하지 않고, 실제 DOM을 객체화한 가상 DOM을 사용한다.

변경되기 전 가상 DOM과 달라진 부분이 있으면 실제 DOM에도 해당 부분만 반영해 변경한다. 이런 방식은 실제 DOM에서 발생할 수 있는 불필요한 렌더링을 최소화하므로 뷰를 사용해 만든 웹 애플리케이션의 렌더링 성능을 효율적으로 올릴 수 있다.

• 양방향 데이터 바인딩
  뷰(Vue.js)는 뷰(view)에서 받은 요청을 모델(model)에 전달하고, 모델에서 받은 응답을 뷰에 전달하는 뷰모델로써의 역할을 한다. 이때 뷰와 뷰 모델 사이에 연결점이 되는 기능이 양방향 데이터 바인딩 이다.