Vue.js 가 React.js 를 제꼈다!!

[ 이글은 2017년 06월 17일에 최종 수정되었습니다. ]
§

현재 front-end 개발자 중, jQuery 를 제외하고 가장 많이 사용하는 library/framework/이외 js 도구는 React.js 입니다.

출처: https://www.sitepoint.com/front-end-tooling-trends-2017/#librariesandframeworks

React.js 를 도구로 사용하고 있는 front-ender 의 비율이 37.6% 인것에 비해, Vue.js 를 사용하는 front-ender 는 9.6% 밖에 되지 않습니다. 물론 앙2 보다는 이제 사용비율이 더 높아졌습니다. (잘가라 앙2. ㅋㅋㅋ)

이런 상태인데 어떻게 Vue.js 가 React.js 를 앞서나가기 시작했다고 주장할 수 있냐구요?

실제 사이트에서 사용율을 보면 React.js 는 거의 정체상태에 가까운데, Vue.js 의 사용율은 계속 높아지고 있고, 2017년 1월 이후 계속 React.js 보다 높은 점유율을 유지하고 있으며, 그 차이가 더욱더 크게 벌어지고 있기 때문입니다.

출처: https://w3techs.com/technologies/comparison/js-react,js-vuejs

무슨 얘기인지 설명 안드려도 되겠죠? 훨씬더 많은 개발자가 React.js 를 사용하고 있음에도 불구하고, 실섭에 적용되는 완성물은 Vue.js 쪽이 더 많아 지고 있는 겁니다.

저는 React.js 봤을때 처음부터 css 하고 html 을 개밥처럼 js 에 섞어야 하는데, 개발 효율성 (productivity) 은 일단 배제하고 생각해도, 이걸 어떻게 유지보수 해야 해? 라는 생각이들어, 저는 React.js 망할거라고 봤습니다. 작년에 제가 썼던 글에서도 그렇게 밝혔었고….

그리고 요즘 Vue.js traction 도 장난아니고, 물론 워드프레스 커뮤니티내에서도 React 이냐 Vue 냐를 놓고 꽤 heated 된 의견교환? 논쟁? 이 일어나고 있는데, Vue.js 쓰시는 분들은 확신이 있으실겁니다. 왜 결국 Vue.js 가 대세가 되는지에 대해. ㅎㅎㅎ

카테고리: ,

Ω
  • bastcode

    vue에 대해서 조사를 해 보니 치명적인 단점이 있군요.

    “Vue는 ECMAScript 5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다. ”

    켁… 이런 IT 후진국 헬조선 같으니 라고…

    아무래도 저의 JS 프레임워크의 대한 시각은 이렇습니다.

    ajax가 가능 한가?
    selector 가 편의 한가?
    bind가 용이한가?
    php와 js 를 짬뽕으로 스크립트 하지 않아도 되는가?
    얼만큼 가벼운가?
    설치가 쉬운가?
    호환문제가 발생 안하는가?
    슬라이더 만들기에 얼만큼 지원을 하는가?

    이런 부분들인데…
    다 떠나서라도 설치가 쉬워야 하고 호환이 가능 해야하고 슬라이더와 ajax는 잘되어야 합니다.

    문제는 vue의 가벼운 수준의 이용은 jquery 와 같이 한줄만 선언해 주면 사용가능 한데..
    ajax를 사용하거나 기타 추가적인 기능을 사용하게되면 node 와 함께 설치를 해야 한다는 부분이 걸리네요.

    vue의 ajax 사용법은 js 순수 문법이나, jquery, vue-resource , axios 등이 있습니다.
    js 와 jquery 는 제쳐두고… vue-resource는 개발 안된지 오래되고 문제가 많아서 못쓸 수준이고 대안은 axios 인데… 별도의 npm 설치를 통해서 사용된다는 부분이… 조금 걸리네요.

    모든 문제를 고려했을때 현재로선 ang1 에게 손을 들어주고 싶긴 합니다.
    [jquery 대안 js 를 찾고 있으니 jquery 제외]

    단순히 vue가 속도가 빠르고 점진적 개발이 가능하고… 이런 부분을 떠나서
    대세가 될 만한다고 확신이 드는 부분이 어떤 부분인지 궁금 합니다 ㅜㅜ
    찾아보니 한국에 vue 포럼이 있던데 아직 많이 활성화는 안되었네요 ㅜㅜ

    • http://hackya.com Matthew

      jQuery 는 자스 abstraction 입니다.

      그것도 let toTop = document.getElementsByClassName(‘scroll’) 이걸 딸랑 $(“.scroll”) 이렇게 쓸수 있게 해주는 매우 강력한 도구 입니다.

      저의 jQuery 이전 자스 실력은 그냥 ctrl+c,v 였고, 이 jQuery 를 통해 자스를 배웠습니다. 그래서 jQuery 에 애착이 많았었습니다. 지금도 저는 jQuery 를 꼭 버려야 할 물건이라고 생각하지 않습니다. 지금도 상황에 따라서는 얼마든지 쓸 의향도 있구요.

      axios 는 promise based http ajax 가 가능해 널리 쓰이지만 사실 jQuery 의 ajax 도 promise based 라는. ㅎㅎㅎ

      vue.js 는 앙1 보다 더 가벼운 SPA 만들때 정말 사용하기 좋은 도구 입니다. 사실 SPA 는 앙1 만큼 더 편한게 없긴 했었습니다만, vue.js 는 그 편리함을 그대로 가져왔고 + react.js 보다도 더 빠른 performance 를 자랑합니다.

      저는 오래전에, 대략 2013년쯤, 내가 지금 router 를 만들고 있는건지도 모르고 router 를 만들고, SPA 를 만들고 있는건지도 모르고 SPA 를 만들어 공개한적이 있었는데, 그때 느꼈던게, 이거 참 어렵다.. 였습니다.

      물론 jQuery 로도 SPA router 만들수 있긴 한데, Anguar 나 vue, 또 react 처럼 router 가 미리 만들어져 있는 제품이 훨씬 더 좋은 선택인거죠.

      이런 앙1/2, vue, react 같은 제품이 주목을 받고 있는 이유는 현재 웹이나 앱 개발이 back-end 의 data 를 API 로 받아서 SPA 형태의 웹앱이나 모바일앱을 구축하는 것이 요즘 추세이기 때문입니다.

      한국에서도 라라벨 + vue 로 모바일앱이나 웹앱 만드시는 개발자, 개발회사들 많습니다. (진짜 많습니다.) 단지 다들 꿀먹은 벙어리? 조용히 입다물고들 계시는거죠.

      제가 봤을때 다들 조용히 하고 있는 이유는, 이 vue.js 가 진입장벽이 상당히 낮습니다. 기본적인 자스 지식, 스크립팅 실력만 갖고 있다면, documentation 한 30분 보고 바로 스크립팅 시작할 수 있거든요. (더구나 앙1 하시던 분들은 그냥 앙1 쓰던 기분으로 스크립팅하면 됩니다.) 사실 스크립팅이라고 말하기가 좀 부끄러울 정도로 그냥 조합만 해주면 됩니다.

      이래서 떠들 건덕지도 없는거죠. 물론 직접적인 비교대상은 아니지만, 어떤면에서는 jQuery 보다 더 쉬운데요… 그리고 개발자 커뮤니티에서도 정말 좋은 물건이 나오면 잘 안떠드는 경향이 있는 것 같습니다. ㅎㅎㅎ

      왜 vue.js 가 대세가 될거라고 생각하는가?

      라라벨 + vue 혹은 워드프레스 + vue

      일반 웹호스팅에서도 돌아가는 제품을 만들어 낼수 있기 때문입니다.

      그건 react + 워드프레스도 마찬가지잖아? 라고 생각할 수 있는데, 요즘 미국 워드프레스 커뮤니티 에서 오가는 대화들을 살펴보시면 절대 그렇게 생각하시지 않으실 겁니다. (궁합이 잘 맞는다고 해야 하나, 앙1/vue.js 는 기존의 제품에 잘 조합될 수 있는 구조고, react 은 그렇지 못합니다.)

      마지막으로 IE8 은 무슨 물건인지 제가 잘 몰라서… 먹는건가요? ㅋㅋㅋㅋ

      • bastcode

        저도 ang1 을 처음 접했을때 SPA 기능 보고 미친거 아닌가? 싶을정도로 신세계를 본것 같았습니다.
        jquery 대안은 성능 이슈 때문이 있기도 하고, 난잡한 jqeury 난발이 이젠 보기 싫은 점도 있고…
        그래서 대안들을 찾아 보고 있는것입니다.

        실제 vue 포럼쪽에서도 굳이 ajax 하나 때문에 jquery 를 넣지 말라고 하더군요.

        문제는 jquery 순수 기능 보단… jquery 가 설치되어야 사용 가능한 라이브러리들이 생각보다 꽤 많더군요.

        아참. 저는 윈10을 사용해서 그런지… 자동으로 엣지 브라우저가 설치되어서 한번 사용해 보니, 엣지 브라우저에 호환 안되는 애들 많더군요 ㅋㅋㅋ
        뭔놈의 호스팅 회사가 엣지 브라우저에서 결제가 안되서 서비스 연장을 못하겠던…. 좀 최신 플러그로 바꾸라고 했는데 바꿀 생각이 없는듯 싶더라구요.
        다들 돈 벌 생각 없나 봅니다 ㅋㅋ

        • http://hackya.com Matthew

          jQuery 가 abstraction 이라는 점이 장점이지만, 그 장점이 디버깅이 어려워지는 단점이 되기도 합니다.

          console 에 에러도 안뜨는데 작동이 안된다던가 이러면 정말 그 괴로움이란… ㅠㅠㅠㅠ

          지금은 마음이 편합니다. 일단 에러뜨면 내 잘못이라는걸 아니까 그것만큼 속편한것도 없더라구요. ㅋㅋㅋ 그리고 디버깅도 jQuery 는 완전 장님에 가까운식으로 개삽질해야 하는데 쌩자스는 코드만 잘 살펴보면 되니까…

          저는 jQuery 를 너무 오래 붙잡고 있었다는 생각/ 후회도 조금 합니다. jQuery 순서바꿔서 에러 해결보고, jQuery conflict 해결하는 잔
          기술만 늘고, jQuery 식 스크립팅 방법 및 꼼수만 늘고, 정작 자스 스크립팅 자체를 많이 하지 않은게/ 못한게…. 지금와서 되돌아 보면 아쉽기도 합니다.

          jQuery 기반 라이브러리는 찾기가 조금더 힘들어서 그렇지 완제품이 아닌 반제품으로 눈을 조금 낮추고 github 뒤지면 다 나옵니다. 그리고 저는 반제품을 쓰는게 더 작업이 편하기도 합니다. 반제품에 코딩조금 추가해주는 것 보다 완제품 뜯는게 더 시간이 많이 걸릴때도 있거든요.

          Edge 는 와 정말… uninstall 하는 방법을 찾아내서 uninstall 하고 재설치를 했는데도 작동이 안되고…

          결국 Edge 고장나면 윈도우를 재설치 하는게 유일한 해결책 이더라구요. 마소는 브라우져 만들 기술이 안되면 그냥 포기하던가.. 도대체 뭐하는 짓들인지…

          https://www.google.com/search?q=edge+won%27t+stay+open&oq=edge+won%27t+stay+open&aqs=chrome.0.69i59j0l2j69i60.4191j0j4&sourceid=chrome&ie=UTF-8

  • jebum Lee

    vuejs 컴포넌트 작성방식이 예전부터 제가 생각하던거를 완전히 만족시켜줘서 보자마자 마음에 쏙 들었었죠…
    헌데 실서비스에서는…IE8 1%이하로 내려가는 날만 기다리는 중입니다. ㅠ

    • http://hackya.com Matthew

      한국 클라들이 IE8 까지 대응해달라는 이유가 궁금합니다.

      NetMarketShare (IE 수치를 가장 높게 잡아주는걸로 유명한) 에 의한 통계를 봐도

      http://www.zdnet.co.kr/news/news_view.asp?artice_id=20170203150802

      IE8 은 통계에 잡히지도 않을 정도로 사용자가 없습니다.

      지금은 없지만, 저도 작년에 한국 클라분 플젝 2개를 진행했었는데 IE8 맞춰달라는 요구는 없었습니다.

      IE8 대응 해달라는 클라는 아마 관공서 정도일 것 같은데요.

      IE8 은 악성스크립트를 뿌리는 수단으로 주로 사용되기 때문에 통계에 높게 잡히는 경향이 있어왔지만 (특히 중국에서) 요즘은 수치에 잡히지도 않습니다.

  • 0rok

    하이브리드 개발 프레임워크인 ionic을 사용하려면 ang을 사용해야한다고 하던데요.

    점점 더 많은 분들이 ionic을 사용하게 된다면 ang 사용률도 높아질까요?

    • http://hackya.com Matthew

      hybrid 앱을 구축하는 이유는 낮은 진입장벽과 쉬운 난이도 때문입니다. ionic 의 속도도 거의 native 수준만큼 빠르지만 (그래서 각광받고 있지만) native 앱은 아니니게 integration 부분에서 애로사항이 존재합니다.

      페북만 해도 자체 개발한 react.js 로 hybrid 앱을 구축하려다가 이런 애로사항들 때문에 react.js 사용을 포기하고 native 로 바꿔야 했으니까요.

      이 진입장벽이 높은 native app 을 쉽게 만들어주는 솔루션을 마소에서 개발해 내놓았는데, Xamarin 이란 제품입니다.

      https://www.xamarin.com/

      Xamarin 의 최대 장점은 native app 을 hybrid app 만큼이나 쉽게 만들수 있게 해준다는 것 입니다.

      이게 지금 현재 상황이라, 앞으로 angular1/2 의 사용률이 높아질지는… 잘 모르겠습니다. vue.js 는 지금 현재 장난아니게 점유율이 높아지고 있습니다.