VueJS의 핵심 기능

VueJS 홈페이지 왈)

접근성

HTML, CSS, JaavaScript. 기본 Web 개발을 할 줄 안다면 사용 가능하다

 

유연성

라이브러리와 모든 기능을 담은 프레임워크의 사이에서 서서히 스케일 업 하여 적용할 수 있습니다.

 

고성능

20KB min+gzip 컴팩트 런타임. 초고속 Virtual DOM

 

** 용어사전

• View : 사용자에게 보이는 화면

• DOM : HTML 문서에 들어가는 요소 등을 담고 있는 데이터 트리

• DOM Listener : 돔의 변경에 반응하여 특정 로직을 처리하는 장치

• Model : 데이터를 담는 객체. 보통은 서버에서 가져온 데이터를 JS 객체형태로 저장한다. Data Binding을 통해 View에 표시되는 내용과 모델의 데이터를 동기화한다.

• View Model : 뷰와 모뎅의 중간 영역으로 돔 리스너와 데이터 바인딩을 제공한다.

• MVVM 패턴 : 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴.

 

 

1. UI 화면단 라이브러리

뷰는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM 패턴은 화면을 [Model - View - view Model ]로 구조화하여 개발한다. 이러한 방식은 화면의 요소를 제어하는 코드와 데이터를 제어하는 로직을 분리하여, 편리한 유지보수와 직관성을 가지게 해준다.

view의 구성 요소인 dom을 조작하게 된다면(ex 클릭) 돔 리스너는 이를 감지하고 해당 조작에 정의되어있는 로직을 수행한다. 이 과정에서 보통 서버에서 넘어온 데이터를 모델에서 가져와 화면에 보여준다. 이처럼 뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는 역할을 한다. 화면의 표현에 주로 관여하기 때문에 화면단 라이브러리라고 불리운다.

 

 

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

뷰는 컴포넌트 기반의 프레임워크이다.

컴포넌트 기반의 프레임워크는 코드를 재사용하기 쉽고, 화면 구조를 직관적으로 파악하기에 용이하다. 그렇기에 구현이 빠르며, 남이 작성한 코드를 분석 할 때에도 쉽다.

 

3. React + Angular

앵귤러와 리액트의 장점을 결합한 프레임워크이다. 특히나 리액트와 가장 유사하지만 리액트보다는 좀 더 많은 사람들이 쉽게 접근할 수 있도록 제작되어있다.

• Angular의 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한 쪽도 자동으로 변경된다.

• React의 단방향 데이터 흐름 : 컴포넌트 구조에서의 단방향 흐름을 뜻한다. 데이터가 항상 상위 컴포넌트에서 하위 컴포넌트로 전달되게끔 구조화 되어 있다.

• React의 가상 돔(Virtual DOM) 렌더링 방식을 사용한다. 가상 돔을 이용하면 특정 돔 요소를 추가하거나 삭제할 때 화면 전체를 다시 그리지 않기에 성능 부하가 줄어든다.