✏️ 캡틴판교님의 Vue.js 시작하기 강의를 수강하고 정리한 글입니다.
🌤️ Vue.js
웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크
Vue.js는 웹 페이지 MVVN 패턴의 뷰 모델에 해당하는 화면단 라이브러리이자 프론트엔드 프레임워크이다.
리액트와 앵귤러의 장점을 모두 갖추고 있으며, 비교적 가볍고 성능이 우수하다는 점에서 주목받고 있다.
🤔 왜 프레임워크이자 라이브러리인가?
뷰는 js 스크립트 태그 내에 작성하기 때문에 얼핏 보면 라이브러리에 불과해 보이지만, 프레임워크로 불리기도 한다.
알다시피 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 제공한다.
하지만 그보다 큰 범위에서 라우터, 상태관리, 테스팅을 쉽게 결합할 수 있는 형태로도 제공된다.
이 때문에 공식 사이트에서는 뷰를 점진적 프레임워크로 칭하고 있다.
특징
(1) UI 라이브러리
Vue.js는 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.
MVVM에서 뷰 모델은 값 변환기로, MVC 패턴의 컨트롤러와 유사한 역할을 한다.
🤔 MVVN 패턴
웹 애플리케이션을 Model-View_View Model의 3가지 그룹으로 구조화하는 UI 아키텍처 패턴이다.
사용자 인터페이스 개발을 백엔드 로직으로부터 분리시켜, 뷰가 모델 플랫폼에 종속되지 않도록 해준다.
UI와 비즈니스 로직의 분리는 MVC 패턴의 특징이기도 한데, MVVM은 여기서 더 나아가 뷰와 모델의 결합도가 낮다.
- Model : 다루게 될 데이터
- View : 사용자에게 보여지는 화면
- View Model : Model이 가지고 있는 정보를 View에 보여지는 값들로 변경
(2) 양방향 데이터 바인딩
Vue.js에서는 화면에 표시되는 값이 프레임워크 모델 데이터 값과 동기화되어 있다.
따라서 모델 데이터 값이 변경되면 화면에 표시되는 값도 같이 변경된다.
한쪽 방향에서만 데이터 전달이 가능한 단방향 데이터 바인딩과 반대되는 개념이다.
양방향 데이터 바인딩은 앵귤러의 특징이기도 하다.
그럴만도 한게 Vue.js는 창시자 Evan You가 본인이 앵귤러를 사용하며 만족했던 특징들만 뽑아내 만들어냈기 때문이다.
(3) 가상 DOM 렌더링
DOM을 추가하거나 삭제하는 변경이 발생할 때, 화면 전체를 다시 그리지 않고 프레임워크에서 정한 방식에 따라 갱신하는 렌더링 방식이다.
리액트의 장점이기도 한데, 빠른 렌더링을 가능하게 해 사용자 인터렉션이 많은 최근 웹 화면에 적합한 동작 구조이다.
🤔 DOM vs 가상 DOM
DOM은 브라우저가 트리 구조로 만든 객체 모델로, 자바스크립트 코드와 HTML 태그를 이어주는 역할을 한다.
따라서 자바스크립트는 DOM을 통해 요소에 접근하고 추가, 삭제할 수 있다.
브라우저는 DOM에 변경이 발생하면 다시 css를 연산하고, 레이아웃을 구성하고, 페인팅하는 렌더링을 한다.
문제는 렌더링이 반복되면서 서버가 버그가 발생하거나 브라우저가 죽는 등 성능 이슈가 발생한다는 것이다.
여기서 가상 DOM이 등장한다.
가상 돔은 DOM을 흉내낸 자바스크립트 객체로 인메모리에 존재해 렌더링의 대상이 되지 않는다.
리액트가 가상 DOM을 반영하는 과정은 다음과 같다.
- 돔의 상태를 가상 돔으로 메모리에 저장해놓는다.
- 만약 화면에 변경이 발생하면 이 화면을 가상 돔에 렌더링한다.
- 변경 전과 후의 가상 돔들을 비교해 실제로 변경이 발생한 부분만 DOM에 반영한다.
그림을 그리고 맘에 안드는 부분이 있을 때 과감히 스케치북을 넘기고 다음장에 다시 그리는 것이 기존 렌더링이라면, 가상 DOM은 맘에 안드는 부분만 지우개로 지우고 다시 그리는 것이다.
처음부터 다시 그리는 것보다 일부분만 수정하는 것이 더 빠른 것과 마찬가지로, 가상 DOM을 사용하는 방식이 기존 렌더링에 비해 우수한 성능을 보인다.
장점
- 배우기 쉽다.
- 리액트와 앵귤러에 비해 성능이 빠르고 우수하다.
- 리액트와 앵귤러의 장점을 두루 갖추고 있다.
Cf.
공식 문서 보러가기 🔗
여담이지만 이렇게 읽고싶게 생긴 공식문서는 처음본다.
자바랑 너무 다르잖아...🥹
심지어 에반 유씨가 직접 등판해서 강의도 해준다
이정도면 뷰 안쓰기도 미안한 수준;;
직접 프레임워크를 만들고 그걸 사랑하려면 얼마나 개발에 미쳐있어야 할지 감도 안오고..그저 너무 신기..