VueJS 선택 가이드

작성일 Edited on In , Disqus:
Symbols count in article: 3.3k Reading time ≈ 3 mins.

서문

Angular1와 React16로는 서비스 레벨까지 SPA 를 만들었고,
Angular 프레임워크와 Vue SPA로는 큰 프로젝트는 아니지만 사이트를 운용 중이며, Vue는 멀티페이지에 서비스 레벨로 사용 중에 있다.

결국엔 VueJS가 최고라는 걸 삽질⛏️로 깨달았다.
페이지를 만드는 기본적인 구조는 다른 프레임워크와 똑같지만 Vue는 쉽고 간결하고 멋지다.

인지도

인지도에서 Vue가 밀린다고 생각하는 당신께,
1804 현재 VueJS의 ⭐ 수는 전체랭킹 6위며
React와는 아주 근소한 차이며 이 위에는 부트스트랩 뿐이다.

JS 프레임워크 별 비교

공식문서에 아주 자세히 설명되어있지만 주관을 덧붙혀보자.

보통 Angular Framework는 너무 프레임워크 종속적이라 제쳐두고
React와 Vue를 많이 비교하게 되는데, React가 더 무겁고 느리며 배울게 많다.
React는 느려서 Preact라는 가볍고 빠른 버전이 있다.

그럼에도 불구하고 리액트가 인기 있는 이유는 React-Native가 있어 한 번 배우면 모든 Client 화면 코딩이 가능하게 되는 것이라고 생각한다.
Vue는 Weex라는 Native 라이브러리가 있지만 테스트환경 조차 갖추기 힘든 인큐베이터 라이브러리며 Angular에는 Ionic이 있지만 같은 듯 다른 느낌의 컴포넌트라 러닝 커브가 또 있고 웹뷰로 돌아가서 느리다는 단점이 있다.

코드 별 비교

세 프레임워크를 사용한 웹 중 유지보수를 위해 하나를 택해야 된다면 어떤 걸 맡고 싶을까?
모든 구문은 다음과 같은 html 안에서 실행된다고 가정한다.

1
2
3
4
5
6
7
8
9
<!-- 컴포넌트가 붙기 전 -->
<div id="container">
  <App />
</div>

<!-- 컴포넌트 렌더링 후 -->
<div id="container">
  <div>○○○가 최고야</div>
</div>

Vue

JS 버전별 구문 차이가 거의 없다.
또한 누가 봐도 id=container에 div가 렌더링 될 것이라는 예상이 가능하다.

ES6 + Component

1
2
3
4
5
6
7
8
9
10
11
Vue.component('App', {
  template: '<div>Vue가 최고야</div>',

  mounted() {
    console.log('컴포넌트 로드 완료');
  },
});

new Vue({
  el: '#container',
});

ES5 + Component

1
2
3
4
5
6
7
8
9
10
11
Vue.component('App', {
  template: '<div>Vue가 최고야</div>',

  mounted: function () {
    console.log('컴포넌트 로드 완료');
  },
});

new Vue({
  el: '#container',
});

React

JSX가 어떻게 변환되는지 알아야되며, ES6는 선택이 아닌 필수다.

ES6 + JSX + Component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class App extends Component {
  componentDidMount() {
    console.log('컴포넌트 로드 완료');
  }

  render() {
    return <div>React가 최고야?</div>;
  }
}

ReactDOM.render(App, document.getElementById('container'));

ES5 + Component

JSX를 안 쓰면 예쁜 코딩은 물건너간다.
또한 createElement API를 봐야할 것 같은 느낌이다.

1
2
3
4
5
6
7
8
9
10
11
var App = React.createClass({
  componentDidMount: function () {
    console.log('컴포넌트 로드 완료');
  },

  render: function () {
    return React.createElement('div', null, '정말 React가 최고야?');
  },
});

ReactDOM.render(React.createElement(App), document.getElementById('container'));

Angular5

이건 파일 하나로 합치면 읽다가 지치기 때문에 세 파일로 나눴다.
Decorator, TypeScript에 대한 이해가 필요하며 API 문서가 옆에 있어야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'App',
  template: '<div>Angular가 최고는 아닌 것 같아</div>',
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('컴포넌트 로드 완료');
  }
}

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],

  imports: [BrowserModule],

  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.log(err));

시작하기

스크립트 하나면 충분하다.

1
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

기본

Watcher

모듈화

Event Bus

Component

MultiPageApp

SPA

Vuex

Nuxt

Laravel-Mix