[Vuejs] Front-end Framework Vue.js

이 전 포스팅들 중에서 Vuejs관련해서 작성한 것들이 몇몇 있었는데, 알고보니 정작 중요한 것을 올리지 않았습니다. Vuejs가 어떤 것인지, 그리고 어디에 사용하면 적절한지의 대한 설명이 부족했던 것 같습니다. 그래서 이번 포스팅에서는 Vuejs의 관하여 주절주절 떠들어볼까합니다. 해당 글은 공식 메뉴얼에 설명되어 있는 것도 언급하겠지만 개인적인 의견도 포함되어 있을 수도 있기 때문에 “아, 이러한 의견도 있구나” 정도로 가볍게 읽어주시면 감사할 것 같습니다 : )

Vue.js가 무엇일까요?

공식홈페이지에서 내용을 가져와보면,

Vue (/vju:/ 로 발음하며, view와 발음이 같습니다). 사용자 인터페이스를 만들기 위한 진보적인 프레임워크라고 합니다. 다른 Front-end 프레임워크와는 달리 강제적인 것보다는 점진적으로 채택할 수 있도록 설계되었고, 뷰(화면)에 초점이 맞춰져 있다보니 기존에 사용하고 있는 웹 프로젝트나 다른 라이브러리와 섞어서 사용하기 매우 쉽습니다.

추가적으로 최대한 기본에 충실하여 만들어졌다보니, HTML, CSS, JavaScript만 알고 있다면 꼭 개발자가 아니더라도 누구나 쉽게 접근할 수 있도록 되어 있습니다.
(우스갯소리로 하루만 공부하면 바로 Vuejs로 개발할 수 있다라고들 하지요)

프레임워크간의 비교

다른 프레임워크 메뉴얼에서는 이렇게까지 설명하고 있는지는 모르겠지만 Vuejs 공식 메뉴얼에서는 다른 프레임워크와의 비교를 잘 설명해주고 있습니다. 다른 프레임워크는 좋지 않고, 무조건 Vuejs만 옳다라는 내용이 아닌 타 프레임워크가 이정도로 우수하게 만들어져 있으며, 우리는 이 것을 보고 영향을 받고 견고하게 만들기 위해 노력했다로 이해하면 좋을 것 같습니다.

여러 프레임워크들과 비교 글들이 있는데, 그 중에서도 많은 분들이 관심있게 보고 있는 React, Angular와 Vuejs를 어떻게 비교하고 있는지 요약해서 설명 및 정리하도록 하겠습니다.

React

React와 Vue 둘 다 사용해보신 분들은 아시겠지만, 뭔지는 모르겠지만 비슷한 점이 많이 있다라고 느끼셨을 것입니다. 실제로도 많은 공통점을 가지고 있습니다.

• 둘다 가상 DOM을 활용하여 UI를 표현하고 있습니다.
• 컴포넌트단위로 개발할 수 있으며, 반응형 개발을 지원합니다.
• React/Vue 둘다 코어만을 제공하며, 그 외 라우팅, 상태관리 등의 라이브러리는 서드파티로 제공하도록 합니다.

Vue가 아무리 유명해지고 핫하다고 하더라도 생태계 자체는 React가 훨씬 광범위하며, 실제 운영모드에서 사용하는 사례들이 많이 있습니다. 그렇지만 그 가운데서도 Vue를 사용하는 것이 적합한 환경이 있을 수도 있습니다. 그러면 어느부분에서 Vue가 React보다 장점을 가지고 있는지 계속 설명하도록 하겠습니다.

# 성능

Vue 공식 홈페이지에도 설명되어 있듯이 Vuejs에서 진행했던 테스트 시나리오에서 Vue가 React보다 월등히 우수하다고 말하고 있습니다.
둘 다 렌더링시 가상 DOM을 사용하고 있지만 Vue의 가상 DOM은 오픈소스 snabbdom을 포크해서 작업했고, 이 가상 DOM은 엄청 가볍기 때문에 React보다 더 적은 오버헤드가 발생한다고 합니다.

아래는 2014년 MacBook Air의 Chrome52에서 성능테스트를 진행한 결과라고 합니다. (Vuejs 공식홈페이지)

	Vue	React
Fastest	23ms	63ms
Median	42ms	81ms
Average	51ms	94ms
95th Perc.	73ms	164ms
Slowest	343ms	453ms

그리고 React의 경우에는 불필요한 자식 컴포넌트의 재 렌더링을 피하려면 shouldComponentUpdate를 구현하고 변경 불가능한 데이터 구조를 사용해야 한다고 하는데, Vue의 경우는 이러한 부분을 자동으로 추적하고 진짜 렌더링해야하는 컴포넌트를 정확하게 파악하여 갱신해준다고 합니다.
( 이 부분은 제가 직접 실험해보지는 않았기 때문에, 공식 홈페이지에서 그대로 가져왔습니다 _{_})

뭐, 결론적으로는 이러쿵 저러쿵 뭔짓을 하더라도 최적화된 React보다도 Vue가 빠르다라고 설명되어 있습니다.

# HTML & CSS

React에서 JSX를 채택하고, 이 것은 혁신적이다라고 했던 적이 있습니다. js파일에서 모든 것을 관리하고 매끄럽게 lint까지 반영해주니, 일석이조였습니다.
그런데 Vue는 제가 사용해본바로 더 혁신적이였습니다. .vue라는 확장자를 통해 그 안에서 기존 웹 기술을 수용하고 그 위에 새로운 모든 것을 할 수 있도록 했습니다. (아직까지(?)는 JSX의 툴링 지원 (lint, 자동완성)이 더 좋다고는 합니다)

또한 원한다면 Vue에서 렌더링시 JSX를 지원하며 Pug(구 Jade)와 같은 전처리기를 사용하여 Vue 템플릿을 제작도 가능하다는 것이 최대 장점인 것 같습니다.

또한 Style(css) 적용시 stylesheet 형식 그대로 사용할 수 있으며 scoped라는 것을 사용하여 컴포넌트 독립적으로 스타일을 지정할 수도 있습니다.

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

여기에 scss/sass 도 아주 쉽게 적용해서 사용가능합니다. (vue-cli 사용시)

# 확장성

확장성하면 대표적으로 라우팅과 상태관리 라이브러리들이 있습니다. React에서는 Flux/Redux들이 많이 들어본 라이브러리일 것 같습니다. Vue도 마찬가지로 Vuex들이 있고, 지금도 지속적으로 확장되어가고 있습니다.
그리고 실제 프로젝트 적용시에는 정말 일부분만 조금씩 바꿔가면서 적용해야하는 경우가 많이 있습니다. React의 경우는 학습하고 나면 정말 좋기는 하지만 처음에 진입장벽이 엄청 높은 것으로 알고 있습니다. 또한 JSX, ES2015+, React 클래스들을 미리 학습해놓아야 합니다. 또한 어느정도 빌드 시스템도 알고 있어야 하구요. Vue의 경우는 바로 웹페이지에서 순수 JavaScript만으로도 동작할 수 있도록 만들어졌습니다. (이는 jQuery를 생각하시면 좋을 것 같네요)
웹에서 Vue를 사용하고 싶으면 아래와 같이 한 줄만 추가하면 됩니다 : )

<script src="https://unpkg.com/vue/dist/vue.js"></script>

# 네이티브 렌더링

네이티브 렌더링 하면 ReactNative를 먼저 언급하는 것이 이해하기 쉬우실 것 같습니다. React를 학습하고 나면 ReactNative를 이용하여 모바일(iOS, Android) 개발까지 가능해집니다. 이는 웹 개발자들에게 엄청난 강점으로 작용할 것이라 생각됩니다.
Vue도 이제 걸음마 단계이기는 하지만 알리바바 그룹에서 개발한 Weex와 공식 협업을 맺고 있습니다. 이는 ReactNative처럼 Vuejs를 이용하여 모바일 플랫폼까지 개발이 가능하도록 하는 것입니다.
그러나! 이 부분은 아직까지는 (글 작성시 2017.05) ReactNative가 훨씬 강력해보입니다. 제가 Weex를 실제 사용해보려고 시도 했지만 Weex에서 제공해주고 있는 프리뷰와 실제 디바이스에 올렸을 때랑 너무 다른 UI를 표현하고 있기 때문에 아직은 사용은 할 수 없구나 라고 생각했습니다.

Angular1/2

개인적으로 Angular도 좋아하는 편입니다. (2말고 1이요 ㅎ_ㅎ)
Angular1의 경우는 서버개발자들이 넘어와서 Front-end를 개발할 때, 이해하기 쉽도록 잘 만들었다고 생각됩니다. 그러다보니 뭔가 부수적으로 지원하는게 너무 많은게 아닌가 싶기도 하구요. 그래서 이러한 복잡도 때문인지 Vue가 당연히 장점을 가질 수 밖에 없는 것 같습니다.
그리고 성능 부분은 이미 Vue가 핫해지기 전에 Angular 1.x vs React 관련 글들로 인해 Angular 1.x가 어느정도 알고 계신 부분이라고 생각합니다.

그러면 비교해야할 부분은 Angular 2.x 인데, TypeScript를 메인으로 가고 있는데, Vue역시 TypeScript와 함께 사용할 수 있도록 지원하고 있습니다. 성능면에서는 두 프레임워크 둘 다 빠른 속도를 내고 있기 때문에 공식홈페이지에서 결론을 따로 내지는 않았습니다. (그래도 일부면에서 Vue가 빠르다고 자랑하고 있네요 ㅇ_ㅇ)
용량의 경우는 Angular 2.x가 작기는 하지만 컴파일러가 완전히 포함된 경우(동등한 조건)로 본다면 Vue 2.x가 훨씬 작다고 합니다. 하지만 정말 가볍게 사용하려는 목적이라면 Angular 2.x가 용량이 더 작습니다!

학습곡선은 Angular 2.x가 TypeScript를 제외한다 하더라도 많이 어렵습니다. 빠른 시작 가이드가 있기는 하지만 그 양 조차도 작다고는 할 수 없습니다.
그러나 Vue의 경우는 아래 코드 정도면 바로 시작할 수 있지 않을까요?

<script src=“https://unpkg.com/vue”></script>

<div id=“app”>
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: ‘#app’,
    data: {
      message: ‘Hello Vue.js!’
    }
  })
</script>

어떤 것부터 시작해야할까요?

공식홈페이지에서 메뉴얼부터 읽어보세요! 너무 집중해서 읽지말고, 소설책 보듯이 스르르르~
읽어보면서 당장 그 뜻이 뭔지 몰라도 상관없습니다. 나중에 그 단어를 들었을 때 어디서 들어본 것 같기는 하다 정도로 읽어내려가시면 됩니다.
한국어로 잘 정리되어 있기 때문에 별로 어려움 없이 읽을 것이라고 생각됩니다.

Vuejs 공식홈페이지 (한국어)

만약 튜토리얼 형식을 원하신다면 해외 서적이 잘 번역된 책도 있습니다. e-book 형태로 제공 되기 때문에 PC 혹은 아이패드, 전자책리더기에 넣어서 보실 수도 있습니다 : )
책을 구입해서 봐야하지만 정기적으로 계속 업데이트되기 때문에 한 권 쯤은 구입해놓는다면 Vuejs로 개발하는데 도움은 되실 것 같습니다 : )

The Majesty of Vue.js 2 (영어판)
The Majesty of Vue.js 2 (한국어판)

혹시 더 궁금한 내용이 있으신가요? 해당 포스팅에 댓글로 달아주셔도 되고, 이메일로 궁금한 내용보내주시면 제가 알고 있는 선에서 답변드릴 수 있습니다 :D

또한 Vue.js 한국어 사용자 모임이 슬랙에서 활발하게 활동 중이니, 언제든 함께하셔도 좋습니다!

Vue.js 한국어 사용자 Slack 채팅방
Vue.js 한국어 사용자 블로그
Vue.js 한국어 사용자 페이스북 그룹

긴 글 읽어주셔서 감사합니다 :D