한창 상승 중인 Front-End를 위한 JavaScript Framework인 Vue.js를 시작하기 앞서 먼저 Vue.js에 대해 알아보고 개념을 잡고 시작하자.
먼저 Vue.js에 대해 기본적인 개념부터 알아보고 다음 포스팅부터 실제로 만져 보면서 학습해보자.
Vue.js
Vue.js 공식 사이트에 접속해 보면 첫 페이지에 딱 3글자로 요약을 해 놓았다.
- Approachable (접근성)
- Versatile (유연성)
- Performant (고성능)
단어만 보아도 대강 유추는 가능하다. JavaScript 프레임워크로 HTML, CSS, JavaScript를 알고 있다면 가이드를 통해 충분히 빠른 시간내에 습득이 가능하며, 작은 용량으로 빠른 Virtual DOM을 제공한다. 다른 의미로 Vue.js를 본다면 다음과 같을 것이다.
- View를 위한 JavaScript 프레임워크
- 사용자 인터페이스를 만들기 위한 진보적인 프레임워크
- MVVM 디자인 패턴에서 영감을 얻은 프레임워크
추이
JavaScript Web Front-End Framework는 무수히 많다. 그중 가장 활성화되어 있고 많이 사용하는 대표적인 프레임워크에는 Angular.js와 React.js가 있다. 이 두 프레임워크에 비한다면 Vue.js는 아직 갈길이 멀다. 하지만 전체적으로 본다면 그렇지만 최근의 기록을 본다면 Vue.js가 곧 Angular.js와 React.js 앞지를 가능성이 보인다는 것을 알 수 있다.
또한, Most Popular Projects in 2016에서 확인해 보면 2016년도에 Github에서 star를 받은 수가 월등히 Vue.js가 높다는 것을 알 수 있을만큼 상승 중에 있다.(해당 내용은 VELOPERT.LOG의 포스트를 참조하였습니다.)
특징
Vue.js의 특징을 몇가지 꼽아 보자면 다음과 같을 수 있다.
- MVVM 패턴에서 영감을 받아 개발
- Virtual DOM의 사용
- Learning curve가 낮음
- Angular.React에 비해 매우 작고 가벼우며 복잡도가 낮음
- Template과 Componenet를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer를 정리
- Model을 통한 양방향 데이터 바인딩을 동하게 제공하지만 Component간 통신의 기본틀은 단방향(부모->자식)
- Server side Rendering 지원
Vue.js를 대강 아는 사람들이고 들어본 사람들은 이렇게도 들어보았을 것이다. angular + react = vue. 맞는 말이기는 하다. angular의 지시자(Directive)가 있을 뿐더라 react와 같이 Virtual DOM을 제공한다.
그렇다면 이렇게 장점만 합쳐 놓았다면 다른 프레임워크와 다른점이 무엇인가?
그것은 해당 공식 사이트에서 확인 할 수 있다. Vue.js 개발 팀은 편견을 버리고 객관적으로 Vue.js와 Angular.js, React.js 그리고 Ember.js와 같은 여러 프레임워크를 비교해 놓았다. 해당 내용은 다른 프레임워크와의 비교에서 확인 할 수 있다.
해당 글의 원본은 Dev.DY에서 확인할 수 있습니다.
