Vue.js 란?

• 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크
• 화면단 라이브러리이자 프레임워크라고도 볼 수 있다.
  • 프레임워크 : 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구
  • 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집
• 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.
• 즉, 라이브러리 역할 뿐만 아니라 프레임워크 역할도 할 수 있다.

Vue.js의 장점

• 리액트와 앵귤러에 비해 배우기 쉽고 성능이 우수하고 빠르다.
• 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 가지고 있다.

Vue.js의 특징

UI 화면단 라이브러리

• UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리이다.
  • MVVM 패턴 : 화면을 Model - View - ViewModel로 구조화하여 개발하는 방식. 화면 앞단(프런트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 깔끔하게 코드를 구성한다.
  • MVVM 패턴으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 유지 보수가 편해지기 때문이다.
  • View : 사용자에게 보이는 화면
  • DOM : HTML 문서에 들어있는 모든 요소의 정보(태그, 클래스, 속성)를 담고 있는 데이터 트리
  • DOM Listener : DOM의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
  • Model : 데이터를 담는 용기. 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
  • Data Binding : View에 표시되는 내용과 Model의 데이터를 동기화
  • ViewModel : View와 Model외 중간 영역. DOM Listener와 Data Binding을 제공하는 영역
• 뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여 주는 역할을 한다.
• 즉, 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 한다.

컴포넌트(Component) 기반 프레임워크

• 컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다.
• 뷰는 웹 화면을 구성할 때 navigation bar, table, list, input box 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.
• 뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다.
• 컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기가 쉽기 때문이다.
• 뷰의 경우 컴포넌트를 사용했을 때 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있다.
• 따라서 프레임워크에서 컴포넌트 방식으로 개발하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있으며 남이 작성한 코드를 볼 때도 수월해진다.

리액트와 앵귤러의 장점을 가진 프레임워크

• 뷰는 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.
  • 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것
  • 단방향 데이터 흐름 : 컴포넌트의 단방향 통신을 의미한다. 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게 끔 프레임워크가 구조화되어 있는 것
• 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용했다.
  • 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때마다 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.