01-1 Vue.js란 무엇인가
Vue.js란
Vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임 워크
뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지우너하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공
뷰의 장점
- 배우기 쉽다.
HTML, CSS , JS의 기초만 아는 입문자라도 하루 안에 배울 수 있다. - 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
- 리액트의 장점과 앵귤러의 장점을 갖고 있다.
리액트의 가상 돔 기반 렌더링 특징과 앵귤러의 데이터 바인딩 특성을 갖고 있다.
01-2 Vue.js의 특징
UI 화면단 라이브러리
뷰는 UI 화면 개발 방버 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러이다.
MVVM 패턴이란 화면을
모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식
이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지 보수가 편해진다.
| 용어 | 설명 |
|---|---|
| 뷰(View) | 사용자에게 보이는 화면 |
| 돔(DOM) | HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 |
| 돔 리스너(DOM Listener) | 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
| 모델(Model) | 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 |
| 데이터 바인딩 (Data Binding) | 뷰에 표시되는 내용과 모델의 데이터를 동기화 |
| 뷰 모델(View Model) | 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역 |
MVVM 패턴이란
마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
--> 화면 앞단 (프론트엔드)의 화면 동작과 관련된 로직과 백엔드의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다
컴포넌트 기반 프레임워크
뷰는 컴포넌트 기반 프레임 워크이다.
왼쪽 화면은 각 영역을 컴포넌트로 지정하여 구분 한 것이고, 오른쪽 그림은 왼쪽 화면의 각 컴포넌트 간의 관계를 나타낸 것이다.
최신 프론트엔드 프레임워크인 리액트, 앵귤러 모두 컴포넌트 기반의 개발 방식을 추구하고 있다. <- 코드의 재사용이 용이함.
또한 뷰의 경우 컴포넌트를 썼을 때 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있다. <- 코드의 가독성이 좋아짐
리액트와 앵귤러의 장점을 가진 프레임워크
뷰는 앵귤러의 양방향 데이터 바인딩 (2way Data Binding)과
리액트의 단방향 데이터 흐름(1way Data flow)의 장점을 모두 결합한 프레임워크이다.
양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것
단방향 데이터 흐름 : 컴포넌트의 단방향 통신, 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 구조화
또한 뷰는 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖고 있다.
가상돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 렌더링하지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신함. 브라우저의 성능 부하 감소
해당 내용은 Do it! Vue.js 입문을 참고했습니다.
