[Vue] Vue란 무엇인가?

Do it! Vue.js

✏️ Vue.js를 사용하는 이유

"Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 만들 수 있도록 도와주는 데 있다." - 에반 유(Vue.js 창시자)

진입 장벽이 낮다

✏️ Vue.js란?

웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크

뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있음

✏️ 뷰의 장점

1. 배우기가 쉽다.
2. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
3. 리액트의 장점과 앵귤러의 장점을 갖고 있다.

 

✏️ 뷰의 특징

1. UI 화면단 라이브러리

UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리

화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 함

• MVVM 패턴이란

마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
- 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식

• 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 직관적으로 이해할 수 있고 유지 보수가 편해지기 때문

 

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

레고 블록과 같은 컴포넌트들을 잘 조합하여 원하는 화면을 구성할 수 있음

• 사용하는 이유
  • 코드를 재사용하기가 쉬움
  • HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있음

 

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

앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)과 리액트의 단방향 데이터 흐름(One-way Data Flow)의 장점을 모두 결합한 프레임워크

• 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것
• 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미. 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있음
• 빠른 화면 렌더링(Rendering)을 위해 리액트의 가상 돔(Virtual DOM) 렌더링 방식 적용
  • 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신
  • 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있음