[Vue.js] 프로젝트 투입 일주일 전_ch.1

 

목차

• Vue.js는 무엇인가?
• Vue.js 장점
• Vue.js 특징

 

 

 

급히 Vue.js 프로젝트에 투입되어야 하기 때문에 무작정 공부하기 위한 책을 구매하였다. 

 

Vue.js 프로젝트 투입 일주일 전

vue.js 에 대해 들어만 보았지 아는것이 거의 없기 때문에 하나씩 배워가려고 한다.

게으른 내가 공부하기 위해 (살기 위해) 블로그에 기록하기로 했다. 

 

 

 

Vue.js는 무엇인가?

Vue.js가 목표로 하는 것은 웹의 장점과 앱의 장점을 모두 수용할 수 있는 웹앱 애플리케이션을 만들 수 있는 프레임워크를 제공하는 데 있다.

 

일반적인 웹사이트

페이지 이동시마다 페이지 전체를 다시 로딩하게 된다.

매번 이동시마다 자바스크립트, CSS, 이미지 파일 등 전체를 서버로부터 받아와서 로딩을 하는 것이다. 

 

Vue.js

Vue.js는 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크이다. SPA는 단일 페이지 애플리케이션이다. 즉, 페이지 하나에서 동작하는 애플리케이션이다.

제일 처음 웹사이트에 접속했을 때, 웹사이트 전체에 필요한 모든 웹 자원(자바스크립트, CSS, 이미지 등)을 서버로부터 가져와서 로딩을 하게 된다.

페이지를 이동하면 웹 페이지 전체가 바뀌는 것이 아니라, 처음 접속했을 때 로딩된 페이지 중에서 변경이 필요한 부분만 바뀌게 된다.

• 장점 : 페이지 전환 속도가 굉장히 빠르고, 이미 로딩된 자원을 다시 서버로부터 받아 올 필요가 없어 웹 자원을 효율적으로 관리할 수 있다. 
• 단점 : 웹사이트 처음 접속시, 당장 필요하지 않은 모든 웹 자원까지도 로딩하기 때문에 화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 단점이 있다. 

 

Vue.js 장점

최근 프론트엔드 개발에 사용되는 가장 인기있는 프레임워크 Vue.js, React.js, Angular.js가 있다.

이 중  Vue.js를 선택한 이유는 다음과 같다.  

 

직관적이고 배우기 쉽다.

기존 기술 지식을 가지고 가장 빨리 익힐 수 있는 것이 Vue.js이다.

 

재사용을 통한 애플리케이션 개발 단축 및 양질의 코드를 생산할 수 있다.

컴포넌트(Component)를 통해 재사용성을 극대화할 수 있다.

양질의 코드를 개발하여 결국 애플리케이션 개발 속도를 높일 수 있다. 

 

Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다.

데이터 바인딩이란 간단하게 설명하면, 데이터와 웹 화면의 요소(HTML DOM)가 서로 양방향으로 연결되어 있어서, 어느 한쪽에 변경이 일어나면 연결되어 있는 다른 쪽에 자동으로 반영되는 것을 의미한다. 

그러나 웹 즉, HTML DOM의 트리구조 특성상 복잡도가 증가하면서 점점 무거워지고 느려졌다. 웹 화면에 변경이 일어날 때 마다 트리구조의 갱신이 일어나야 하곻 이 작업은 매우 큰 성능 저하를 가져오게 되었다. 

React는 이러한 DOM 문제를 개선하기 위해 Virtual DOM 개념을 제공했다. 

Virtual DOM은 실제 DOM 문서를 추상화하여 가상의 DOM을 만들어 메모리에서 처리한 다음 실제 DOM과 동기화함으로써 기존 DOM이 가지고 있던 단점을 개선하고 웹에서도 고성능 애플리케이션을 구현할 수 있도록 하였다. 

Vue는 Angular가 가지고 있는 데이터 바인딩의 장점과 React가 가지고 있는 Virtual DOM의 장점을 모두 수용해서 개발이 완료된 프레임워크이다. 

 

Vue.js 특징

MVVM 패턴 사용

Model-View-ViewModel의 약자.

HTML DOM이 View, 자바스크립트가 Model의 역할을 한다.

MVVM 패턴은 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가상 DOM을 통한 성능 및 개발의 편의성을 제공하기 위해 만들어졌다. 

 

컴포넌트(Component)를 사용한 높은 재사용성

작은 단위부터 특정 기능을 처리하는 좀 더 큰 단위까지 화면(View)을 이루고 있는 작은 단위의 여러 개의 View 중에는 다른 화면에서도 사용되는 View가 있다.

이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트라고 부른다.

Vue에서 하나의 컴포넌트는 HTML+CSS+Javascript로 이루어져 있고, 다른 컴포넌트에서 import해서 바로 사용할 수 있다. 

 

 

 

 

※ 출처 고승원, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭, p18-26.