vue.js 란?

 

 

 

 

 

vue.js 란?

 

vue.js 란 프런트엔드 웹 프레임워크다.

프레임워크는 건축을 할 때 뼈대를 두고 살을 붙이는 작업이라기 보다는 건축을 할 때 필요한 재료들(이미 재단이 되어있는 재료들)을 제공을 해주어서, 우리가 그것들을 가지고 이리저리 합치고 뭉치고 해서 건물을 만드는 것이라고 한다. 

 

-

 

 vue.js 는 구글에서 일하던 에번 유가 개발했는데, 구글에서는 AngularJS 라는 프레임워크를 이미 개발한 

상태였다. 이미  AngularJS 가 있음에도  vue.js 를 개발한 이유는 다음과 같은 이유여서이다.

 

1. AngularJS 는 배우기 쉬운 프레임워크가 아니다.

2. AngularJS 는 양방향 데이터 바인딩 기능을 사용하는 싱글 페이지 어플리케이션 개발인데, 작성해야하는

프로그램의 크기가 거지기 마련이었다.

 

 

따라서 에번 유는 

 

1. AngularJS 의 장점인 양방향 데이터 바인딩을 할 수 있으면서 단방향 데이터 흐름의 장점을 모두 가지며

2. 기존의 웹 어플리케이션과 효율적으로 통합할 수 있고

(React.js 는 현재 vue.js와 함께 많은 관심을 받은 프렌트엔드 웹 프레임워크지만, ES6 를 주로 사용해야하며 개발 중인 웹 사이트에 React.js로 개발된 프로그램을 추가하려면 별도의 프로젝트를 생성해서 빌드를 해야하기 때문에, 기존의 웹 어플리케이션과 효율적으로 통합하기 힘들다.)

3. 가벼원 라이브러리

 

인 vue.js를 개발하게 되었다.

 

*양방향 데이터 바인딩 이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도자동으로 변경되는 것을 말하고, 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 말한다. 컴포넌트간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트로 한 방향으로만 전달하게끔 프레임 워크가 구조화 되어있는게 단방향 데이터이다. 

 

 

 

 

vue.js 특징 및 장점

 

1. 가상 DOM 방식

: vue.js는 가상 DOM의 방식으로 좀 더 효율적이고 빠른 처리 속도를 가진다.

 

가상 DOM에 대해서 이해를 하려면 그 전에 html을 화면에 어떻게 그려지는지, 우리가 보는 웹페이지가 어떻게 

보여지는지에 대해서 알아야 할 것 같다.

 

우리가 브라우저를 띄우면 html을 읽어서  DOM트리를 만들게 된다.

-----------------

html

body

section

div

p

span..

-----------------

이런식으로 말이다.

DOM이 화면 위치를 잡고, css의 스타일을 받을것이다.

 

 

이것이 그냥 html을 가져와서 가만히만 있으면 문제가 없겠지만,

요즘 single page application (SPA) 이 생겨나면서 DOM을 수시로 변경하게끔 요청을 한다는 것이다.

 

*SPA: 서버로부터 완전한 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹사이트 (단일 페이지 어플리케이션)

 

DOM을 변경하는 요청이 들어오면, DOM트리에서 요청한 특정 노드를 찾아서 원하는 대로 변경을 해준다.

그렇다면, 우리가 쓰는 웹페이지에 노드가 적으면 좋겠지만 

우리가 쓰는 웹 페이지에는 수천개의 노드가 있을 수 밖에 없다. 

즉, 100번 요청을 하면 DOM트리에서 노드를 찾고, 바꾸는 것을 100번 반복한다는 것이다. (극한직업;;)

그러다보면 당연히 처리속도는 느려질 수 밖에 없고, 비효율적이게 되는 것이다.

그것을 해결하기 위한 것이 가상 돔이다.

 

가상 DOM을 활용하면 특정 DOM 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 

않고 프레임 워크에서 정의한 방식에 따라 화면을 갱신한다.

 

즉, 수정 요청이 오면 가상 DOM은 브라우저 대신 DOM 변경을 인지하고 그 내용을 가상돔에 반영한다.

100번 할 것을 한번에 변경되는 값을 가상의 html코드로 만들어서 수정하고 실제 사용되는 DOM에 한번에

적용시키는 방법이다.

 

따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴수 있게 된다.

 

 

2. 템플릿

: vue.js는 vue 인스턴스나 컴포넌트에 있는 데이터를 표시하는 방법으로 기존 html 템플릿을 그대로 사용한다.

컴포넌트에서 다루는 css도 기존 문법을 그대로 사용한다. 즉 별도로 배워야하는 부담감이 적어지는 것!

 

 

3. 확장성

: 웹 어플리케이션에서 우리는 동적 기능을 추가하기 위해 다양한 라이브러리와 프레임워크를 사용하기도 한다.

그중 jQuery와 같은 라이브러리는 script 태그로 CDN을 추가해 쉽게 사용한다.

vue.js도 jQuery 처럼 script태그로 CDN을 추가할 수 있다.

*CDN: 웹 어플리케이션에 자바스크립트 프레임 워크나 라이브러리를 바로 사용할 수 있는 호스팅 서버

 

--

 

따라서 vue.js를 활용하면 로그인이나 회원가입 등 특정한 컴포넌트를 따로 만들고 필요한 곳에 적용해 기능을 쉽게 추가할 수 도있고, DOM 조작이 매우 빈번하게 일어나거나 사용자의 입력을 다로 받지 않는 프로그램(데이터 시각화 프로그램 등) 은 vue.js 를 통해 DOM 조작 횟수를 많이 줄일 수 있고, 성능을 향상 시킬 수 있다.