Vue.js 의 장점 단점 및 특징 이해하기 ( feat. react와 angular 비교)

Vue.js 의 특징과 장점 및 react와 angular 비교

Vue.js 특징

Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework이다.

여기서 프로그레시브라는 것은 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사 용해 개발한 것을 뜻한다.

예를 들어 웹의 경우는 별도의 설치 없이 브라우저만 있으면 접속이 가능하기 때 문에 접근성이 매우 뛰어나다. 결국 Vue.js가 목표로 하는 것은 웹의 장점과 앱 의 장점을 모두 수용할 수 있는 진화된 웹앱 애플리케이션을 만들 수 있는 프레임 워크를 제공하는 데 있다.

 

Vue.js는 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크인데, 여기서 SPA는 단일 페이지 애플리케이션을 말한다. SPA가 무엇인지 이해하기 위해서는 기존의 웹의 동작 방식을 먼저 이해야한다.

SPA -Single Page Application

SPA의 경우는 말 그대로 단일 페이지 애플리케이션이다

이름에서 알 수 있듯이 단일 페이지, 즉, 페이지 하나에서 동작하는 애플리케이션이다.. SPA는 제일 처음 웹사이트에 접속했을 때, 웹사이트 전체에 필요한 모든 웹 자원(자바스크립트, CSS, 이미지 등)을 서버로부터 가져와서 로딩을 하고, 그 다음 페이지를 이동 및 전환하는 행동이 일어나면 웹 페이지 전체가 바뀌는 것이 아니라, 처음 접속했을 때 로딩 된 페이지 중에서 변경이 필요한 부분만 바뀌게 된다.

그렇기 때문에 페이지 전 환 속도가 굉장히 빠르고, 이미 로딩된 자원을 다시 서버로부터 받아 올 필요가 없 기 때문에 웹 자원을 굉장히 효율적으로 관리할 수 있게 된다.

SPA는 이런 장점 때문에 최근 웹 애플리케이션에서 매우 많이 사용되고 있는 방식이다.

하지만 SPA도 단점이 존재합니다.

사용자가 웹사이트에 처음 접속하면 사이트 이용에 당장 필요하지 않은 모든 웹 자원까지도 로딩하기 때문에 화면 로딩 속도가 느리고 많은 웹 자원을 가져와야 하는 단점이 있습니다. 만약에 첫 페이지 만 보고 해당 웹 사이트를 더 이상 머물지 않고 빠져나가는 사용자라면, 내가 방문 하지 않을 웹 페이지에서 사용하는 웹 자원까지 모두 로딩 되어, 속도 저하를 느낄 수도 있다.

제공하는 웹 사이트의 성격이 어떠하냐에 따라 웹 사이트를 개발하는 방식도 달라져야 한다.

최근 웹 애플리케이션을 개발할 때 프론트엔드 개발에 사용되는 가 장 인기 있는 프레임워크에는

Vue 외에도 React, Angular가 있다.

웹프론트엔드를 처음 접하는 모든 개발자들이 이 3가지 프레임워크에 대한 이야기를 많이 들었을테데, Angular가 제일 먼저 나왔고, 그 다음으로 React, Vue 순으로 세상에 나왔다.

이제야 막 웹프론트엔드를 시작하는 개발자라면 정말 고민이 될 수밖에 없을 텐데, Vue.js 를 가장 먼저 추천 하고싶다.

 

Vue.js 장점

Vue의 장점 꼽자면 아래의 4가지를 들수 있다.

1. 직관적이고 낮은 러닝커브
2. 재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있음.
3. Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있음
4. 여러명이 개발시 코드 규격을 맞추기가 쉬움

직관적이고 러닝커브가 낮음

Vue.js의 가장 큰 장점은 배우기 쉽다는 것이다.

처음 이 Vue.js를 접하는 사람들에게는 많이 와닿지 않는 말일 수도있지만 다른 언어로 개발해 본 경 험이 있는 개발자라면 이 Vue.js 알면 알수록 이게 얼마나 맞는 말인가 깨닫게 된다. 정말 단기간 안에 Vue.js를 익히고 실무에 바로 적용할 수 있 을 정도로 매우 직관적이고 배우기가 쉽다.

만약 웹 애플리케이션을 개발하여 즉시 적용해야 돼는 상황이고 React, Angular, Vue 이렇게 3가지 프레임워크 중 하나를 선택해서 개발해야 하는 상황이 라면 Vue를 사용하는 것이 가장 옳바른 선택이 될것이다. 특히나 고객사의 운영팀이 아 직 이 3가지 프레임워크에 대한 경험이 없다면 더더욱 Vue를 추천한다. 

재사용을 통한 애플리케이션 개발시간 단축 및 양질의 코드 생산

Vue는 재사용성을 극대화하고 애플리케이션 전체에 걸쳐 양질의 코드를 생산할 수 있도록 해준다.

다시말하면 코드의 통일성을 높이고 중간에 투입된 개발자들 또한 조금만 살펴보면 금방 이해 할수있는 코드를 작성 할수있어서 애플리케이션 개발 속도를 높일 수 있다.

개발을 하면서 수없이 듣는 단어중 하나는 템플릿이란 단어일 것이다. 보통 템플릿이라고 하면 무언가 정형화되어 작성된, 유사한 것을 만들 때 적용하여 빠르게 원하는 대로 만 들 수 있도록 해주는, 이미 구조화가 된 것을 뜻한다.

특정 기능을 가지고 있는 프로그램 코드 세트이며, 개발자는 템플릿을 사용해서 이미 템플릿이 가지고 있는 기능을 활용하 여 유사한 프로그램을 빠르고 안정적으로 개발할 수 있다.

Vue에서는 컴포넌트(Component)가 바로 템플릿이다. Vue에서는 컴포넌트(템플릿)를 통해 재사용성을 극대화할 수 있다. 

Angular의 장점(Data Binding)과 React의 장점(Virtual DOM)

Angular가 나오고 데이터 바인딩, 정확히는 양방향 데이터 바인딩을 제공 하는 것이 거의 혁명 수준이였다.

데이터와 웹 화면의 요소(HTML DOM)가 서로 양 방향으로 연결되어 있어서, 어느 한쪽에 변경이 일어나면 연결되어 있는 다른 쪽에 자동으로 반영된다. 이것은 단방향 데이터 바인딩시절 다른 쪽으로 데이터를 넘기기위해 작성했던 코드들이 필요 없어지면서 개발시간 단축과 간결해진 코드를 가져왔다.

HTML - Hyper Text Markup Language
DOM - Document Object Model

이처럼 멋지게 등장한 Angular에도 치명적인 단점이 존재 했는데 그것은 바로 속도(성능) 문제이다. angular의 구조적인 문제로 화면의 복잡도가 늘어나면서 점점 무겁고 느려진다. 특히 화면이 갱신 될때마다 같은 행동을 반복하게 되므로 복잡한 화면 일수록 화면의 속도저하는 피할 수 없는 문제였다.

이러한 속도의 문제를 개선해서 화려하게 등장한 것이 바로 React 이다.

React는 angular 의 DOM의 문제를 개선하기 위해서 Virtual DOM(가상 돔) 개념을 제공하게 되는데, Virtual DOM은 실제 DOM 문서를 추상화하여, 변화가 많은 화면(View)을 DOM에서 직접 처리하는 방식이 아닌, 가상의 DOM을 만들어서 메모리에서 처리한 다음 실제 DOM과 동기화함으로써 기존 DOM이 가지고 있던 단점을 개선하고 웹에서도 고성능 애플리케이션을 구현할 수 있도록 설계 되어있다. 이것이 React 의 가장 큰 장점중 하나다.

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

Vue.js 특징

1. MVVM 패턴
2. 컴포넌트(Component)를 사용한 높은 재사용성

MVVM 패턴

MVVM모델은 프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴이다. 일반적으로 웹은 HTML DOM이 View, 자바스크립트가 Model의 역할을 하게 됩니다. MVVM 패턴 View와 Model 중간에 ViewModel을 둠으로써 데이터 바인딩 처리 및 가이 01 통한 성능 및 개발의 편의성을 제공하기 위해 만들어졌습니다.

MVVM - Model View ViewModel

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

우리가 보고 있는 웹 화면은 하나하나가 수많은 웹 요소를 조합하여 만들어 진다.

예를 들어 버튼, 링크, input, 라벨 이미지 등과 같은 작은 단위의 요소부터 이러한 작은 요소가 결합되어 패키지 형식으로 만들어진 단위(내비게이션, 팝업 등)이 있다.

이렇게 작은 단위부터 특정 기능을 처리하는 좀 더 큰 단위까지 화면(View)를 이 루고 있는 작은 단위의 여러 개의 View 중에는 여러 화면에서 지속적으로 사용되는 View가 있다. 이렇게 자주 사용되는 작은 단위의 view들을 묶어서 재사용할 수 있는 구조로 개발하는 것을 컴포넌트 (Component)라고 한다.

Vue로 개발된 파일(.vue) 하나하나가 모두 컴포넌트이다.

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

vue.js 특징