Vue가 가진 무언가

Yechan·2020년 6월 6일

Vue.js 기본만 하자

목록 보기

2/4

새로운 프레임워크나 라이브러리 같은 기술들을 접할 때 가장 중요한 것은 그것이 가진 철학과 본질을 이해하는 것이라고 생각합니다. 사실 이런 생각을 가지게 된지는 얼마 되지 않았습니다. 예전에는 그냥 새로운게 있으면 빨리 빨리 중요한 스킬들만 익혀서 필요한 부분에 적용시키면 그만이라 여겼습니다.
계속해서 이런 습관들이 점점 굳어지다보니 나중에 누군가 "많은 기술들 중에 왜 그걸 선택했어?" 라고 물어본다면 "음...생각해본적은 없는데,,그냥 재미있어보여서..?"라는 대답밖에는 할 수가 없다는걸 깨닫게 되었습니다.

물론 이런 기술들은 자신의 아이디어나 서비스를 구현하기 위한 도구에 지나지 않을 수 있지만 어떤 기술을 사용하기로 마음먹었다면 그 기술이 생겨나게된 배경과 그것이 가진 강점 혹은 약점을 이해하는 것이 먼저인 것 같습니다. 그래서 나름대로 자신의 선택에 대한 이유와 소신을 가지고 있어야 그 기술이 가진 본질을 가장 잘 이해하면서 제대로 사용할 수 있을 것입니다.

시작

Vue가 나오기 이전에는 이미 Angular 나 React와 같은 프레임워크들이 대세를 이루었으나 Angular 같은 경우 가파른 러닝커브 때문에 개발자들에게 쉽게 배우기에는 부담스러웠고 React 역시 진입장벽이 존재했고 무거운 프레임워크였습니다.
Vue의 창시자인 Evan You는 구글에서 근무하던 당시 보다 쉽고 가벼우며 자신이 좋아하는 기능들이 들어간, 개인적으로 사용할 목적으로 프로젝트를 만들었는데, 바로 그것이 Vue의 시작이 되었습니다.

Vue 이름의 유래 (TMI) : 원래는 View.js 를 떠올렸으나 너무 평범하다 느껴 구글번역기를 이용해서 프랑스어로 번역 했더니 나온 Vue라는 단어가 유니크하고 멋져보여서 선택했다고 합니다.

Vue를 사용해야 하는 이유 👍

작고 가벼움

다른 프레임워크들과 달리 Vue는 별도의 빌드과정이 필요하지 않습니다.

<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

위 한줄이면 바로 Vue를 사용할 수 있습니다. 또한 매우 작은 크기 (약 30.67kb)를 가지고 있어 적은 오버헤드를 가지고 빠르고 좋은 성능을 낼 수 있습니다.

이해하기 쉬움

누구나 접해보면 느낄 수 있을 정도로 러닝커브가 완만하기 때문에 부담 없이 시작할 수 있습니다.
Vue 공식 도큐먼트도 전부 한글로 잘 번역이 되어 있기 때문에 모르는 부분도 비교적 쉽게 해결할 수 있습니다.

확장성

상태 관리를 위한 vuex와 SPA 개발에 사용되는 vue-router 까지, 자체적으로 여러 모듈을 지원하고 있기 때문에 효율적으로 확장 운영할 수 있습니다.

지속적인 업데이트

2014년 처음 릴리즈된 이후 Vue는 이전보다 더 빠르고 유연하며 가벼운 프레임워크가 되기 위해 계속적으로 업데이트 되고 있습니다.
특히 최근 공개된 Vue3는 가상 DOM에 대한 개선과 반응형 방식 개선, 그리고 타입 스크립트 지원을 확장하여 앞으로의 발전 가능성이 높아보입니다.

MVVM 패턴

MVVM 패턴으로 동작하는 Vue는 View에 상당부분 최적화 되어 있습니다. 양방향 데이터 바인딩을 통해 동적 변화에 유리하기에 더 이상 jQuery를 이용해 DOM 조작을 하지 않아도 되는 장점이 있습니다.

약점 👎

React에 비해 떨어지는 점유율

Vue는 성능상으로는 React와 견주어도 전혀 뒤쳐지지 않지만 React가 프론트엔드 프레임워크 생태계에서 확실히 높은 점유율을 보여주고 있습니다. 그렇기에 상대적으로 더 많은 레퍼런스들을 가지고 있으며 학습자료도 많습니다. 채용시장 또한 React가 더 많음을 확인할 수 있었습니다.