Vue - Vue 란?

Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의

Introduction | Cracking Vue.js

TS 강의를 들으면서 다른 프레임워크에 대한 공부의 필요성을 느꼈습니다!

따라서 뷰를 공부하기 위해서 위 동영상를 듣고, 해당 강의 교재를 통해 배운 기초 내용을 정리하고자 글을 작성합니다 !

1. 뷰 란 ?

- MVVM 패턴을 기반으로 디자인되어 재사용가능한 UI를 묶어서 사용하는 JS 프레임 워크 입니다.

- MVVM이란 Mode-View-ViewModel의 약어입니다. Vue는 이러한 MVVM패턴에서 View Model에 위치한 JS 프레임 워크 입니다.

 

• View : 사용자에게 보여지는 UI
• Model : 요청시 어플리케이션에서 사용되는 데이터의 처리 기능
• VIew Model : DOM Listners, DOM Bindings을 통해 View와 Model을 이어주는 역할
• DOM : html 문서에 들어가는 요소들 (tag, class, attributes . . .)
• DOM Listners : 돔 변경 내역에 따라 즉각 반영하여 로직을 수행
• Data Bindings : VIew에 표시되는 내용과 Model의 데이터를 동기화

 

- Vue는 SPA(Single-Page-Application) 프레임워크로 불리기도 합니다.

 

• SPA란 요청시 마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하던 기존 방식이 아닌, 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식입니다.
• 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에 좋은 효율을 가지며 새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동이 가능하다는 장점이 있습니다.
• 웹 어플리케이션에 필요한 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동 속도가 느린 단점이 있습니다
  

 

2. 뷰의 특징

• MVVM 패턴의 View 모델에 해당하는 화면단 라이브러리 입니다.
• 컴포넌트 기반 프레임워크로 재사용성, 구현 속도, 코드 가독성 측면에서 좋은 효율을 보입니다.
• Angular / React의 장점을 가지고 있습니다.
• Angular의 장점
  양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화 => 한쪽이 변경되면 다른 한쪽도 자동으로 변경
• React의 장점 
  단방향 데이터 흐름 : 컴포넌트 단방향 통신 구조화 (상위 컴포넌트 -> 하위 컴포넌트)
  가상 DOM 렌더링 방식 : 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신

 

 

💪 Vue 공부 시작 !!