티스토리 뷰

Vue.JS

[Vue.JS] Vue.JS 소개

버미노트 2018. 1. 20. 02:08

많은 관심을 받고 있는 Vue의 성장과 Vue에 대한 간단한 소개를 하려고 합니다. Vue.js를 적용하여 신규 프로젝트를 진행 할 기회가 있어(이미 하나는 개발이 완료 됬고, 진행 중인 프로젝트 하나와, 앞으로 개발 할 프로젝트...) 내친김에 Vue.js에 대해 정리하고자 합니다.

1. Vue.JS의 성장

Vue가 한창 띄고 있다는 이야기를 많이 듣고 있습니다. Vue의 현재 위상이 어느정도 인지.. GitHub와 Google 트렌드, npm, Stack Overflow로 알아보겠습니다.

GitHub

vue와 react, angular를 GitHub에서 비교해 보도록 하겠습니다.

GitHub vue
GitHub react
GitHub angular

Vue는 Star를 79299개로 React와 큰 차이 없이 많은 사람들이 관심을 가지고 있는 것을 볼 수 있습니다.

Google

이번에서 vue와 react, angular 3개를 비교하여 구글 트렌드 검색을 해보도록 하겠습니다.

구글 트렌드
vue, react, angular 트랜드 검색

vue와 react, angular를 한꺼번에 보면, vue가 아직 하위권인 것으로 보입니다. 하지만 vue만 트렌드 검색으로 확인하면,

구글 트렌드
Vue 트렌드 검색

2016년도에 급격히 구글 검색량이 늘어 난 것을 볼 수 있습니다. react와 angular에는 미치지 못하지만 2016년 이후로 사람들이 관심이 늘고 있는 것은 사실입니다. react는 facebook이라는 거대한 산이, angular는 google이라는 거대한 산이 버티고 있는데, 그곳에서 vue가 선전하고 있는 것 같습니다.

npm

vue와 react를 npm에서 비교해 보도록 하겠습니다.

npm에서 react 다운로드 현황
npm에서 react 다운로드 현황

2014년부터 2017년까지 npm install react로 react를 다운로드한 현황입니다. https://npm-stat.com/charts.html?package=react&from=2014-01-01&to=2017-12-31 에서 확인 할 수 있습니다.

npm에서 vue 다운로드 현황
npm에서 vue 다운로드 현황

2014년부터 2017년까지 npm install vue로 vue를 다운로드한 현황입니다. https://npm-stat.com/charts.html?package=vue&from=2014-01-01&to=2017-12-31 에서 확인 할 수 있습니다.

총 다운로드 횟수가 react의 약 10분의 1수준이지만, react에 비해서 2017년에 급격히 vue를 다운로드한 횟수가 증가한 것을 확인 할 수 있습니다.

Stack Overflow

vue와 react, angular를 Stack Overflow에서 비교해 보도록 하겠습니다.

Stack Overflow에서 vue 질문 개수
Stack Overflow에서 vue 질문 개수

Stack Overflow에서 react 질문 개수
Stack Overflow에서 react 질문 개수

Stack Overflow에서 angular 질문 개수
Stack Overflow에서 angular 질문 개수

Stack Overflow에서 tag 검색으로, 등록된 질문들을 확인하였습니다.

vue.js와 vuejs2는 동일한 것으로 봤습니다.

angular 1.x 이하 버전과 angular 2.x 이상 버전은 서로 다른 프레임워크로 보는 것이 맞아, angular은 2.x 이상의 버전만 고려하였습니다. (angular 1.x 이하의 버전은 angular.js로 npm tag에 등록되어 있습니다.)

Stack Overflow에 등록된 질문 개수로만 보면, vue를 사용하여 개발하는 사용자가 react나 angular에 비해 많지 않아, 등록된 질문의 개수가 react와 angular에 미치지 못하지만 vue의 성장이 지금과 같이 계속 지속 된다면 react와 angular 수준으로 올라오는 것은 시간 문제 일 것으로 보입니다.

2. Vue.JS 특징

Vue.(View와 발음이 같습니다)는 2014년 릴리즈를 시작한 프론트엔트 자바스크립트 프레임워크입니다. Vue는 ECMAScript5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다.

Vue의 몇가지 특징에 대해 이야기 하도록 하겠습니다.

뷰 레이어에 초점을 맞춥니다.

Vue는 이름 그대로, 뷰 레이어에만 초점을 마추어 다른 라이브러리나 기존 프로젝트와 함께 사용하기 쉽습니다.

한글화가 매우 잘되어 있습니다.

Vue는 다른 프레임워크나 라이브러리에 비해 공식적으로 한글 문서를 제공합니다. 한국의 개발자들이 쉽게 Vue를 익히는데 큰 도움이 되는 큰 장점 중에 하나입니다.

3. React.JS와의 비교

공식문서에서 다른 프레임워크와의 비교 라는 글이 있습니다. 이 글에는 Vue의 특징들이 나와 있어 Vue를 시작하는데 큰 도움이 될 것 같습니다. 다른 프레임워크와의 비교 중에 React.JS와 비교한 것을 정리해 보도록 하겠습니다.

공통점

  • 가상 DOM을 사용합니다.
  • 재사용 가능한 컴포넌트 단위로 코딩을 합니다.
  • UI에만 집중하고 있어, 라우팅이나 state 관리는 서드 파트 라이브러리를 사용해야 합니다.

성능 비교

Vue와 React는 모두 가상 DOM을 사용합니다. 가상 DOM을 사용하여 성능을 계선하는 2가지 방법은,

  • DOM의 조작을 최소화 합니다.
  • DOM을 조작 할 때, 최소한의 계산만 합니다.

공식 문서에는 Vue의 렌더링 속도가 React의 렌더링 속도보다 빠르다고 합니다. 1번의 경우, Vue와 React 모두 거의 동일하게 동작하지만 2번은 Vue의 가상 DOM이 React의 가상 DOM보다 가벼워 더 적은 계산량이 필요하다고 설명합니다.

Vue와 React의 성능 차이
Vue와 React의 성능 차이

위의 그림과 같이 Vue가 React보다 더 나은 성능을 보인다고 합니다.

HTML

const element = (
    <div>
        <h1>Hello!</h1>
        <h2>React.JS</h2>
    </div>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

위의 코드와 같이 React는 화면에 UI를 렌더링하기 위해 JSX를 사용합니다.

<template>
    <div v-if="true">
        <h1>Hello!</h1>
        <h2>Vue.JS</h2>
    </div>
</template>

반면에 Vue는 화면에 UI를 렌더링하기 위해 탬플릿을 사용합니다. Vue에서 탬플릿은 v-if와 같은 DSL(Domain-Specific Language)를 사용하여 코드 작성을 쉽게 할 수 있습니다. v-if와 같은 Vue의 DSL 문법은 Angular의 문법(ng-if와 같은..)과 유사합니다.

CSS

React에서 CSS는 CSS in JS 즉,

let style = {
    color: 'white',
    backgroundColor: 'black'
}

const element = (
    <div>
        <h1>Hello!</h1>
        <h2 style={style}>React.JS</h2>
    </div>
);

위의 코드와 같이 javascript object 형태로 CSS를 적용합니다.

<template>
    <div v-if="true">
        <h1>Hello!</h1>
        <h2>Vue.JS</h2>
    </div>
</template>

<style>
    h2 {
        color: white;
        background-color: black;
    }
</style>

반면에 Vue는 익숙한 style 태그를 이용하여 CSS를 적용합니다.

Vue에서 각각의 컴포넌트에서 CSS를 정의 하였더라도, 어떠한 컴포넌트에서든 모든 CSS를 사용할 수 있게 됩니다. (단일 파일로 번들링 되어 나오기 때문입니다.)

<style scoped>
    h2 {
        color: white;
        backgrount-color: black;
    }
</style>

하지만 위의 코드와 같이 scoped Attribute를 추가하여 <style scoped>와 같이 사용하게 되면 style 태그를 정의한 컴포넌트에서만 CSS가 적용되게 됩니다.

Vue CSS 적용하는 방법
Vue CSS 적용하는 방법

scoped Attribute는 옵션 값으로, 필수로 선언하지 않아도 됩니다. scoped Attribute를 선언하게 되면 data-v-04c2046b과 같은 유일한 Attribute가 추가 되고, h2h2[data-v-04c2046b]로 컴파일 되어, style 태그를 선언한 컴포넌트에서만 CSS가 적용되게 됩니다.

참고

'Vue.JS' 카테고리의 다른 글

[Vue.JS] 템플릿 문법  (0) 2018.10.23
[Vue.JS] 라이프 사이클  (4) 2018.10.21
[Vue.JS] Vue 인스턴스  (0) 2018.10.11
[Vue.JS] Vue.JS 시작하기  (2) 2018.05.16
[Vue.JS] Vue.JS 설치방법  (0) 2018.02.13
댓글
공지사항
최근에 올라온 글