- 프론트엔드 자바스크립트 프레임워크
- Angular, Backbone, React 에 비하여 매우 작고 가벼우며, 복잡도도 낮음
- CDN 으로 불러와서 사용하기도 매우 간편, 원한다면 webpack 으로도 구성 가능
- 매뉴얼이 타 프레임워크 / 라이브러리에 비해서 한글화가 엄청 잘 되어있음
1. vue의 구조
- 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공
. 즉, 단순 라이브러리의 기능 외에 프레임워크 역할도 수행
2-1. vue의 특징 - MVVC 패턴
- UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리
- MVVM 패턴이란. 화면을 모델(Model) - 뷰(View) - 뷰 모델(Viewmodel)로 구조화하여 개발하는 방식
- 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해짐
| 용어 | 설명 |
| 뷰(View) | 사용자에게 보이는 화면 |
| 돔(DOM) | HTML문서에 들어간느 요소(태그, 클래스, 속성 등)의 정보를 담고있는 데이터 트리 |
| 돔 리스너(DOM Listener) | 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
| 모델(Model) | 데이터를 담는 용기 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 |
| 데이터 바인딩(Data Binding) | 뷰(view)에 표시되는 내용과 모델의 데이터를 동기화 |
| 뷰 모델(ViewModel) | 뷰와 모델의 중간영역, 돔 리스너와 데이터 바인딩을 제공 |
- MVVM 구조의 처리 흐름은?
구글 검색창을 예시로 들자면, (실제 구글은 뷰로 개발되지 않음)
뷰(View) : 사용자에게 비춰지는 구글 검색화면 전체
돔(DOM) : 구글로고, 검색창, 키보드, google 검색 버튼 등의 HTML 요소
여기서 만약 검색어를 입력하고 버튼을 클릭한다면?
위와 같은 검색화면이 나옴
즉, google 검색 버튼을 클릭하였을 때, 돔 리스너에서 버튼의 클릭을 감지, 버튼이 동작하면 검색결과를 보여주는 로직 실행
이 처리 과정에서 데이터 바인딩이 관여, 검색 결과에 해당하는 데이터를 모델에서 가져와 화면에 나타내는 것
2-2. vue의 특징 - 컴포넌트 기반 프레임워크
- 컴포넌트란. 레고 블록을 조합하는 것과 비슷
- 화면을 왼쪽같이 구성하면 오른쪽과 같은 컴포넌트 트리 구조를 가지게 됨
- 컴포넌트 기반의 프레임워크를 사용함으로서 코드의 재사용성이 향상, 직관적인 화면 구조를 가짐
3. vue의 장점; 리액트와 앵귤러의 장점을 가진 프레임워크
- 뷰는 Angular의 양방향 데이터 바인딩과 React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크
- 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 값이 변경되는 것
- 단방향 데이터 흐름 : 컴포넌트의 단방향 통신
- 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 것을 말함
- 이 외에도 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖춤
- 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신
- 따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.
--수정중--
*출처 :
