본문으로 바로가기

Vue.js 를 시작하기에 앞서 ...

category Web Tech/Vue.js 2019. 2. 18. 13:29

기존의 웹 애플리케이션 개발은 브라우저마다 자바스크립트와 DOM 의 이벤트 처리방식이 달라서 브라우저마다 달리 개발을 해야 했습니다. 하지만 2010년대부터 브러우저와 상관없이 동작 방식을 단일화(크로스 브라우징)해줬던 jQuery, Underscore.js 와 같은 JS 라이브러리가 등장하면서 웹 애플리케이션의 개발은 터닝포인트를 맞이하면서 그 후 Backbone.js, Ember.js, AngularJs 등의 단일형 웹 프레임워크 (새로운 페이지로 브라우저 화면을 변경할 때 서버로 페이지 요청을 하지 않고 단일 자바스크립트 프로그램 내에서 URL,DOM 변경등을 모두 처리하는 프레임워크) 가 발전하면서 프론트엔드 웹 애플리케이션 개발을 선도하고 있습니다.


Vue.js 는 이런 발전 과정의 연장선에서 등장한 프론트엔드 웹 프레임워크입니다.
앞에서 소개한 라이브러리나 단일형 웹 프레임워크와 달리 기존의 웹 애플리케이션에 부분적 적용할 수 있다는 장점이 있습니다.
이는 달리 말해, 웹 페이지의 표현"뷰 레이어"라고도 함에 초점을 두어 다른 자바스크립트 라이브러리, 프레임워크, CSS 를 효과적으로 통합할 수 있다는 뜻입니다.



Vue.js 탄생 배경

Vue.js 는 구글 크리에이티브 랩스(Google Creative Laps)에서 근무하던 에번 유가 개발했습니다.
구글은 이미 단일형 웹 프레임워크인 AngulaJS 를 개발해 사용자에게 진보적인 프로그램을 경험케 해주었으나, 웹 애플리케이션 개발자에게 AngularJS 는 배우기 쉬운 프레임워크는 아니었습니다.
AngularJS 의 장점 중 하나는 양방형 데이터 바인딩(데이터의 변화를 템플릿에 결합하여 화면을 업데이트한 후 화면에서의 입력에 따라 데이터를 업데이트하는 개념) 기능을 사용하는 개발인데, Vue.js 창시자인 에번도 AngularJS 가 제공하는 양방향 데이터 바인딩을 장점으로 눈여겨봤습니다.
에번이 Vue.js 를 만들 때 생각했던 건 "AngularJS 에서 내가 좋아하는 특성만 담은 가벼운 라이브러리를 만들 수 있지 않을까?" 라는 점과 좀 더 쉽게 접근할 수 있는 웹 프레임워크를 만들고자 함이었습니다. React.js 는 현재 Vue.js 와 함께 인기있는 프론트엔드 웹 프레임워크지만 ECMAScript 6(이하 ES6)를 주로 사용해야 하며, 개발 중인 웹 사이트에 React.js 로 개발된 프로그램을 추가하려면 별도의 프로젝트를 생성해 빌드해야하는 어려움이 있습니다.
이 때문에 기존의 웹 애플리케이션과 효율적으로 통합하기가 어렵습니다. 이와는 달리 Vue.js 는 WebComponents2014년에 발표된 HTML 및 DOM 의 재사용을 돕는 웹 컴포넌트 에 기반을 두고 컴포넌트 개발 방식을 지원합니다.
Vue.js 를 사용해 웹 애플리케이션을 개발한다면 사용자에게는 우수한 사용자 경험을 제공할 수 있으며 개발자는 개발 효율성을 얻을 수 있습니다.



가상 DOM 방식

웹 애플리케이션을 개발하고 사용하는 방식은 웹 2.0(개방,참여,공유의 정신을 바탕으로 사용자가 직접 정보를 생산하여 쌍방향으로 소통하는 웹 기술을 말한다.) 이전과 다릅니다. 웹 애플리케이션은 브라우저가 웹 서버에 요청한 페이지나 이미지 정보를 받거나, 폼 입력 데이터를 검증하거나, 간단한 애니메이션 등을 표현하는 정도였지만, 웹 2.0 이후 자바스크립트는 웹 페이지를 새로고침하지 않아도 웹 서버로부터 새로운 데이터를 받아 표현할 수 있게 되었고 자바스크립트로 DOM 을 동적으로 수정할 수 있게 되었습니다.
이전보다 미려한 웹 페이지를 만들어내기 용이해진 것입니다.

그렇다 보니 웹 애플리케이션의 특정 부분을 완전한 DOM 하나로 다룬다면 브라우저가 웹 페이지의 DOM 전체를 처리하지 않으므로 부담을 줄일 수 있을 것으로 생각하기 시작했습니다. 이를 구현한 결과가 가상 DOM입니다.


그럼 자바스크립가 웹 페이지를 다루는 DOM 의 동작 원리를 살펴보겠습니다.
예를 들어 다음과 HTML 페이지가 있다고 가정해 봅니다.

html 기본 구조
<html>
<head>
	<title>HTML DOM</title>
</head>
<body>
	<p>HTML 에 접근하려면 DOM 을 사용해야 합니다.</p>
</body>
</html>

body 엘리먼트의 자식 엘리먼트는 p 엘리먼트 하나이므로 DOM 에서 body 엘리먼트 childNodes 의 개수는 1개일 것으로 예상할 수 있습니다.
js 파일을 생성하여 import 한 후 아래의 코드를 브라우저 콘솔에서 확인해 보세요.

javascript
var dom = document.querySelector('body');
console.log(dom.childNodes);
	
// 실행결과
// NodeList(3) [text, p, text]

예상과는 달리 자식 엘리먼트를 3개로 인식할 것입니다. 이는 HTML 문서를 브라우저가 읽어 들여 DOM 구조로 만들 때 개행이나 공백(탭 포함)을 하나의 DOM 엘리먼트로 보기 때문입니다.
DOM 에서는 개행이나 공백이 여러 번 반복되면 #text 노드로 인식합니다. html 태그도 엘리먼트입니다. 위의 웹 페이지는 엘리먼트의 수가 매우 적지만 보통 웹 페이지는 수십에서 수만에 이르는 엘리먼트가 있습니다.
웹 페이지에서 일어나는 DOM 조작은 단순히 하나의 엘리먼트만 수정하는 것이 아니라 자바스크립트에서 여러 개 DOM 엘리먼트를 한 번에 조작하는 일이 비일비재합니다.

그런데 DOM 조작이 동시 또는 시간 차이를 두고 일어나면 브라우저는 DOM 조작을 처리하기 위해 DOM 의 최상위에서 조작의 대상이 되는 엘리먼트까지 찾아가야 합니다.
이는 비효율적이고 DOM 에 발생한 이벤트를 처리하는 과정에서도 엘리먼트의 수가 많을수록 처리 속도가 느려질 수밖에 없습니다.
이럴 때 가상 DOM 을 사용하면 웹 애플리케이션은 개별의 가상 DOM 에만 접근하면 되므로 처리 속도가 빨라집니다.
Vue.js 는 가상 DOM 에 변경 사항이 발생하면 가상 DOM 의 내용과 웹 페이지의 DOM 을 비교해 웹 페이지의 DOM 이 다르면 가상 DOM 의 내용으로 업데이트합니다. React.js 도 가상 DOM 을 사용합니다.


Vue.js 2.0 과 가상 DOM

Vue.js 는 발표 당시 가상 DOM 을 사용하지 않았지만 Vue 2.0 부터 가상 DOM 을 사용합니다.
이후 Vue.js 는 더 빠른 속도로 문서를 렌더링하는 것은 물론이고 메모리 소비 효율도 2~4배 정도로 향상되었습니다.

가상 DOM 을 사용하면 웹 페이지를 효율적으로 업데이트할 수 있어 앞으로 더 많은 웹 프레임워크가 이런 가상 DOM 을 사용할 것으로 기대하고 있습니다. 웹 표준을 정의하는 W3C 에서도 가상 DOM 에 관심을 두면서 Shadow DOM[W3C 의 가상 DOM 표준으로 DOM 안에 있는 엘리먼트(자식 엘리먼트 포함)를 효과적으로 캡슐화할 수 있으며 2018년 3월 기준 크롬 53 이상 버전에서만 사용 가능]을 초안 발표 이후 꾸준히 작업중에 있습니다.

많은 브라우저에서 Shadow DOM 을 구현하기 시작하면서 가상 DOM 을 개별적으로 구현하는 자바스크립트 프레임워크도 구현체를 Shadow DOM 으로 변경할 것으로 예상됩니다.




Vue.js 의 장점

Vue.js 가 빠른 시간에 많은 사람이 사용하는 프레임워크가 된 이유는 단순히 사용하기 쉽다는 것만이 아니라 Vue.js 는 가상 DOM 을 사용하는 React.js 와 비교했을 때 템플릿, 확장성이라는 장점이 있습니다.
단점으로는 규모가 큰 웹 애플리케이션의 구현이 어렵고, React.js 보다 생태계가 작다는 점을 들 수 있습니다.



템플릿

Vue.js 는 Vue 인스턴스나 컴포넌트에 있는 데이터를 표시하는 방법으로 기존 HTML 템플릿을 그대로 활용합니다.(컴포넌트에서 다루는 CSS 도 기존 문법 그대로 사용)
덕분에 기존의 웹 애플리케이션에 vue.js 코드를 부분적으로 통합할 수 있습니다.
React.js 는 인스턴스의 데이터를 표현하는 방법으로 HTML 을 변형한 템플릿 문법인 JSX 를 사용합니다. 사용자 엘리먼트를 효과적으로 표현하는 방법으로 인기 있지만, 짧은 시간이라도 별도로 배워야 한다는 점은 부담스럽기도 합니다.



확장성

웹 애플리케이션 대부분은 웹 페이지를 10개에서 20개 정도로 구성하며 동적 기능을 추가하려고 다양한 라이브러리와 프레임워크를 사용하기도 합니다.
그 중 jQuery 와 같은 라이브러리는 script 태그로 CDN 을 추가해 쉽게 사용할 수 있습니다.

Vue.js 도 jQuery 처럼 script 태그로 CDN 을 추가할 수 있습니다. CDN 은 웹 애플리케이션에 자바스크립트 프레임워크나 라이브러리를 바로 사용할 수 있는 호스팅 서비스입니다.
또한 Vue.js 는 점진적으로 커지는 프로그램 규모에 맞게 필요한 라이브러리를 선택해 사용할 수 있습니다.
예를 들어 Vue.js 기반 웹 애플리케이션의 상태를 추후에 다룰 Vuex 를 사용할 수 있고, 싱글 페이지 웹 애플리케이션 개발이 필요하다면 Vue-router 를 사용하는 식입니다.
webpack, parcel 과 같은 동적 웹 애플리케이션 개발에 필요한 번들링 빌드 도구를 사용하면 웹 사이트에 작업한 내용을 배포할 수 있습니다.
Grunt, gulp 를 사용해 자바스크립트 파일만 별도로 취급하는 빌드 작업을 자동하할 수도 있습니다.




Conclusion

지금까지 Vue.js 에 대한 배경과 장점에 대해 알아보았습니다.
이후부터는 Vue.js 개발환경을 비롯한 Vue.js 주요 개념들에 대해 알아보도록 하겠습니다.



Jaehee's WebClub