React를 사용하다 Vue로 넘어간 글에 대한 접근이 가장 높아서 예전에 적었던 글을 업데이트 해서 다시 올린다. 검색 키워드로 가장 높다니, 실제 업무는 Backend인데... 재미있다 :) 원 글이 2016년 초에 작성되었으니 약 2년 조금 안되게 vue를 사용하면서 느낀 점을 기존 글에 추가로 작성하였다.


React.js를 이용하여 웹 서비스를 개발하던 중, Virtual DOM의 장점을 느끼기 이전에 지속적으로 Virtual DOM을 위해 너무 많은 코드를 남발하고 있다는 점이 느꼈다. 또, 의미없는 코드(className)를 너무 많이 만들어가는 저의 모습을 보며 회의감을 React로부터 느끼고 있을 때, Vue.js를 잠깐 살펴볼 기회가 생겼다.

(1년 뒤) 초창기 react에 대한 느낌이었지만 사실 지금도 className은 아직도 매우 불만이다.

그리고 단 한장의 문장 DOM을 직접 갱신(hot update)할 때는 Vue.js가 React에 비해 최적화하지 않고도 훨씬 빠르게 동작한다 라는 글(http://vuejs.org/guide/comparison.html)을 보고 React.js 로 구현되어 있던 서비스를 Vue.js 로 변경하기로 마음을 먹었다.

React.js는 Virtual DOM이 큰 장점이지만 개인적으로는 FLUX 패턴과 이를 구현한 Redux를 너무 좋아했다. 드디어 UI도 일관된 패턴으로 구현할 수 있다는 것이 너무 좋아서 Vue.js에도 이러한 패턴을 구현한 라이브러리가 있지 않을까? 라는 생각을 하고 검색하였는데 기존에 사용하던 Redux를 그대로 사용할 수도 있고 Vuex(http://vuex.vuejs.org/) 라는 Offical Library가 존재하였다.

(1년 뒤) 솔직하게 말하자만 그 당시 react를 잘 사용하지 못해서 불필요한 이벤트 발생이 많았다는 생각도 든다. 지금 react 와 vue를 고르라면 className 외에는 기술적인 차이점은 없다고 생각된다. 하지만 vue는 아주 좋은 3rd-library들(vuex, vue-router 등)이 너무 만족스럽다. react에도 redux 등이 있지만 개인적으로는 vuex가 참 맘에 든다. 버전업이 될 수록 좋아진다!

새 부대에는 새 술이라는 명언을 가슴에 새기고 큰 맘 먹고 모든 개발 환경을 React.js에서 Vue.js로 변환 작업을 수행하다. 사실, 처음으로 React + Redux를 기반으로 구현한 서비스라서 중간 중간 숨어있는 멍청함을 개선하면서 변환 작업을 하였더니 딱 2주(Vue.js 학습 + 변환 작업)가 소요되었다.

(1년 뒤) react vs vue로 처음 뭘 사용해볼까? 라고 생각하는 분들이 많은 것 같다. 사내에서도 뭐가 좋을까라고 하는 말을 들으면 지금은 그냥 주변에 react, vue를 사용한 사람이 있다면 그 사람이 쓰는 것 배우라고 하고 싶다. 처음에 누가 살짝 개념만 잘 잡아줘도 정말 배우기 좋고, 쓰기 좋다.

하지만 나처럼 홀로(vue를 공부할 때 회사는 웹 개발을 하지 않았다. OTL) 스터디를 할 목적이라면 vue를 적극적으로 추천한다. OpenSource 문서는 이렇게 써야한다! 라는 생각이 들 정도로 지금봐도 잘 정리되어 있다.

대략적인 감을 위해서 의미는 없지만 Vue.js로 변환한 코드(Js만 카운트)는 3000 라인 정도이다. React.js일 때는 4500 라인 정도였는데 Vue.js로 변환하면서 불필요한 코드가 많이 제거되었다. 리팩토링을 하면서 약 500라인 정도는 제거한 것 같다.

이 정도면 사용하다가 다시 React.js로 돌아가도 부담이 없을 것 같다. 당연히 더 큰 프로젝트면 심사숙고 해야한다.

(1년 뒤) react 초기 버전에서 vue 1.x로 변경했을 때 경험이다. 지금은 vue 2.x가 되면서 react와 구현적인 측면에서는 매우 비슷한 구조를 가지기 때문에 더 빠르지 않을까 생각한다.


개인적으로 사용하면 느낀 Vue.js에 대한 장/단점이다.

Vue.js 장점

  • 취향 저격 (개인적인 취향임!)
    • .vue 파일 한 개로 template, script, style을 하나의 컴포넌트로 구성할 수 있다는 점
  • 편리한 Vue-cli
    • vue init webpack new-project : 명령어 하나로 생성하는 프로젝트 구성
    • webpack, lint, mocha 등의 설정이 된 상태에서 개발을 한다는 것 자체만으로도 너무 만족
  • 친절한 개발자(Evan You)
    • http://vuejs.org 에 작성된 글만으로도 충분한 레벨의 설명
    • Offical Library 를 제공하여 필요한 라이브러리 선택의 고민을 최소화 해주고, vue.js 와의 연동도 엄청 잘된다는 장점 (Vuex 개발 도구는 강추!)

Vue.js 단점

  • 낮은 인지도
    • 지나다니며 몇 번 보았지만 크게 관심을 가지진 못함
  • 적은 3rd-party 라이브러리
    • 인지도가 낮은 라이브러리의 최대 단점
    • 여기서의 3rd-party 라이브러리는 Vue.js로 만들어진 컴포넌트를 의미
  • 적은 Reference
    • 누구에게 무엇을 물어봐야할지, 그래도 외국 포럼(http://forum.vue.js)은 활성화되어 보임. 한국 포럼도 많은 발전이 있길 기원합니다.

(1년 뒤) 아.. vue.js 단점이었던 낮은 인지도는 이젠 사라졌다. gitlab도 vue를 사용하고 Laravel도 vue를 기본 지원하는 모습을 보며 굳굳을 외쳤다. 그리고 Vue.js 에 대한 서적도 한국어로 출간되고 너무나 좋다! 지금은 vue만 사용한다.

만약 Vue.js를 사용하기로 결정하였다면 기초적인 Vue.js의 특징과 Life-cycle 정도만 이해하면 React.js 를 사용하던 사람들은 매우 쉽게 적응할 수 있다.

또 개인적인 경험으로는 React.js에서 Vue.js로 변환은 Vue 가이드 문서(https://vuejs.org/guide/)의 내용을 조금만 살펴보면 Life-cycle 및 몇 가지 특징들만 주의하면 쉽게 변환이 가능하다.

기존에 FLUX 패턴(특히 Redux)으로 구현된 경우에는 매우 쉽게 변환이 진행될 것이라고 생각된다. Vuex를 이용한다면 90% 이상 동일한 패턴 & 코드를 활용할 수 있고 Vuex Tool을 이용하여 Redux Tool과 동일한 기능을 수행할 수 있다. Redux가 좋다면 그대로 사용도 가능하다. 실제 개발 중 디버깅 및 확인을 위해서 사용할 때, Redux Tool이 더 편리했고 Vuex Tool은 빨랐다. Vuex Tool도 버전이 향상되면 좀 더 편리해질 것으로 생각된다.

(1년 뒤) 지금의 Vue.js devtools은 너무나 좋아져서 완전 만족이다. 필요한 기능을 다 들어있다.

Vue.js가 장/단점을 가지고 있지만 현재 활용되고 있는 라이브러리 중 잘 만들어졌고 좋은 라이브러리임은 분명하다. 그리고 개인적으로 느낀 성능 향상도 분명히 존재한다. 하지만 회사의 기술스택과 관련된 부분이기 때문에 그 가이드를 따르는게 더 중요하다고 생각한다.

나의 경우에는 제안이 가능한 부분이 있기 때문에 적극적으로 vue를 추천한다. :)

업무에 적용하기 이전에 Vue.js를 개인 프로젝트 혹은 스터디 용도로 사용하면서 공유 & 고민하는 것도 좋을 것 같다. 개인적으로도 vue.js + golang 으로 간단한 서비스를 만들면서 계속 공부할 예정이다.

(1년 뒤) vue.js + golang으로 간단한 서비스를 만들었다. 결국 모바일 청첩장, 사내 식단 알리미를 만들었다. 두 개의 서비스를 만들며 다시 느꼈지만 역시 vue는 참 편하다.

그리고 웹서비스를 개발하는 Backend 개발자라면 간단한 관리 화면을 위해 배울만한 최고의 라이브러리라고 생각한다. 당연히 이와 함께 es6 + webpack을 함께 공부해야... 쿨럭, 넘 많군. 그래도 한 번쯤 해보길 추천한다.