Vue.js 란?

1. Vue.js 란

• 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크
• 화면단 라이브러리이자 프레임워크
• 뷰의 창시자 에반은 앵귤러의 명시적 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙여 나가기 시작하며 뷰가 탄생하였다.

* 프레임워크 : 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 (뼈대)

* 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집

2. 장점

• 배우기 쉽다.
• 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
• 리액트의 장점과 앵귤러의 장점을 가지고있다.
• 앵귤러를 더 가볍게 쓰고 싶어 만든 프레임워크
• 앵귤러의 양방향 데이터 바인딩 특성과 리액트의 단방향 데이터 흐름, 가상 돔 기반 렌더링 특징을 가지고있다.

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

* 단방향 데이터 흐름 : 컴포넌트의 단방향 통신을 의미

3. 특징

• MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리
• MVVM 패턴으로 개발하는 이유 : 더 직관적으로 이해할 수 있고, 유지보수가 편해지기 때문
• 컴포넌트(Component)기반 프레임워크

* MVVM패턴 : 모델(Model) - 뷰(View) - 뷰 모델(View Model)

* 컴포넌트 : 레고 블록과 유사.. 레고 블록을 잘 조합해서 쌓으면 원하는 모형을 만들 수 있듯이 뷰의 컴포넌트를 조합하여 화면을 구성할 수 있음

 

* 컴포넌트 기반 방식으로 개발하는 이유

  1) 코드 재사용 용이

  2) 화면의 구조 직관적으로 파악

• 뷰(View) : 사용자에게 보이는 화면
• 돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
• 돔 리스터(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
• 모델(Model) : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
• 데이터 바인딩(Data Binding) : 뷰에 표시되는 내용과 모델의 데이터를 동기화
• 뷰 모델(ViewModel) : 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역

 

 

* Do it! Vue.js 입문 책으로 공부하며 작성하는 글로 잘못된 정보가 있을 경우 댓글 달아주시면 감사하겠습니다 : )