Vue.js 첫 시작하기..!
Vue.js란?(보통 '뷰'로 약칭)
: 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크. 뷰는 화면단 라이브러리이자 프레임워크라고 볼 수 있다.
※ 프레임워크
: 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구
※ 라이브러리
: 자주 사용되는 기능들을 모아 재활용 할 수 있도록 정리한 기술 모음집
뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합 할 수 있는 형태로도 제공. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미.
뷰의 장점
1) 배우기 쉽다.
2) 리액트와 앵귤러에 비해 성능이 우수하고 빠름.
3) 리액트의 장점과 앵귤러의 장점을 가지고 있음.
→ 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 가지고 있음.
다른 프레임워크들에 비해 성능이 우수할 뿐만 아니라 가볍고 빠르며, 무엇보다도 누구나 쉽게 배울 수 있음
→(개인적인 생각 : 앞으로 더 많은 사용자들의 학습욕구를 유발하며 거대한 커뮤니티가 생성 되며, 빠르게 발전 가능성 있겠지?)
뷰의 특징
1) UI화면 개발 방법중의 하나인 MVVM 패턴 뷰 모델에 해당하는 화면단 라이브러리
MVVM패턴이란?
: 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식
: 마크업 언어나 GUI코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
→ 프론트엔드의 화면 동작과 관련된 로직과 백엔드의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성하는것이 가능.
이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제이로직을 분리하여 코드를 더 직관적으로 이해 할 수 있고, 추후 유지 보수가 편해지기 때문.
| 용 어 | 설 명 |
| 뷰 | 사용자에게 보이는 화면 |
| 돔(DOM) | HTML문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 |
| 돔 리스너 (DOM Listener) |
돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
| 모델(Model) | 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 |
| 데이터 바인딩 (Data Binding) |
뷰(View)에 표시되는 내용과 모델의 데이터를 동기화 |
| 뷰 모델(View Model) | 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역 |
뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는 역할을함. 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 함.
2) 컴포넌트 기반 프레임워크
레고처럼 뷰의 컴포넌트를 조합하여 화면을 구성 할 수 있음. 컴포넌트 방식으로 개발하는 이유는 코드를 재사용하기 쉽기 때문. 그리고 뷰의 경우 컴포넌트를 썼을 때 HTML 코드에서 화면의 구조를 직관적으로 파악 가능.
→ 정해진 방식대로 컴포넌트를 활용하기 때문에 빠르게 구현 할 수 있고, 다른사람이 작성한 코드를 볼 때도 수월.
※컴포넌트란?
: 독립적인 소프트웨어 모듈. 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 모듈로서 이후 시스템을 유지하는데 있어 교체가 가능한 부품. → 구현, 명세화, 패키지화, 배포 될 수 있어야함.
3) 리액트와 앵귤러의 장점을 가진 프레임워크
뷰 : 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)과 리액트의 단방향 데이터 흐름(One-way Data Flow)의 장점을 모두 결합한 프레임워크
양방향 데이터 바인딩
: 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말함.
단방향 데이터 흐름
: 컴포넌트의 단방향 통신을 의미. 컴퓨넌트간에 데이터를 전달 할때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 게 바로 단방향 데이터 흐름.
- 빠른 화면 렌더링(Rendering)을 위해 리액트의 가상 돔(Virtual DOM) 렌더링 방식을 적용하여 사용자 인터랙션(user interaction)이 많은 웹 화면에 적합한 동작 구조를 갖추고 있다. 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신
→ 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있음.
Reference : Do it! Vue.js 입문
'vue.js' 카테고리의 다른 글
| [Vue.js] #5 뷰 템플릿(template)이란? (0) | 2021.11.11 |
|---|---|
| [Vue.js] #4 뷰 라우터(Router)란? (0) | 2021.11.10 |
| [Vue.js] #3 뷰 컴포넌트란? (3) | 2021.11.09 |
| [Vue.js] #2 뷰 인스턴스란? (0) | 2021.11.08 |