ReactJS vs Angular5 vs Vue.js
[번역] JavaScript 프레임워크 3대장, 무엇을 써야 할까?
* 이 글은 Tech Magic의 ReactJS vs Angular5 vs Vue.js - What to choose in 2018?을 번역한 글입니다.
** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요!
얼마 전에 우리는 Angular 2와 React를 비교한 글을 올렸습니다. 그 글에서는 이 프레임워크들의 장점과 단점을 소개하고, 특정 목적을 위해 2017년에는 무엇을 선택하면 좋을지 제안했습니다. 그렇다면 2018년 프론트엔드 진영 상황은 어떨까요?
JavaScript 프레임워크들은 매우 빠른 속도로 개발되고 있습니다. 이는 우리가 Angular, ReactJS 그리고 이 진영의 또 다른 플레이어인 Vue.js의 버전을 자주 업데이트 한다는 의미입니다.
특정 프레임워크의 지식을 필요로 하는 전세계의 오픈 포지션 수를 분석했습니다. Indeed.com의 자료에 따르면 60,000개 이상의 구인 제안이 다음과 같은 분포를 보이고 있습니다.
데이터를 고려하여 모든 프론트엔드 프레임워크의 주요 장점과 단점을 공유하고, 기술 전문가 또는 엔지니어가 그들의 개발 요구사항에 가장 적합한 프레임워크를 선택할 수 있도록 하였습니다.
Angular 5의 장점과 단점
Angular는 2009년에 만들어진 슈퍼히어로 같은 JavaScript MVVM 프레임워크입니다. 매우 인터렉티브한 웹 애플리케이션을 구축하기 좋습니다.
Angular 5의 장점:
강화된 RXJS, 빠른 컴파일(3초 이내), 새로운 HttpClient 런치와 같은 새로운 기능들
동료들에게 질문할 필요가 없을 정도로 혼자서 일하는 개발자들에게 필요한 모든 정보를 얻을 수 있는 자세한 문서. 학습하는 데 더 오랜 시간이 필요하다는 것을 의미하기도 합니다.
에러가 발생할 위험이 적은 앱을 위해 단일 동작을 가능하게 하는 양방향 데이터 바인딩
개발자들이 동일한 데이터 셋을 사용하여 동일한 앱 섹션에서 개별적으로 작업할 수 있도록 하는 MVVM(Model-View-ViewModel)
일반적인 모듈과 모듈성이 있는 컴포넌트와 관련된 기능들의 Dependency injection
Angular 5의 단점:
Angular의 첫 번째 버전에서는 구문이 복잡했지만, Angular 5는 TypeScript 2.4를 사용하므로 비교적 덜 어렵습니다.
이전 버전에서 최신 버전으로 이전하는 동안 나타날 수 있는 마이그레이션 이슈
Angular 5를 사용하는 회사들: Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase.
ReactJS의 장점과 단점
ReactJS는 2013년에 페이스북으로부터 개발된 오픈 소스 JavaScript 라이브러리입니다. ReactJS는 정기적으로 데이터가 변경될 수 있는 거대한 웹 애플리케이션을 구축하는데 유용합니다.
ReactJS의 장점:
배우기 쉽습니다. React는 구문이 간편하여 훨씬 쉽습니다. 엔지니어들은 HTML 작성 기술만 기억하면 됩니다. Angular와 같이 TypeScript를 깊게 배울 필요가 없습니다.
높은 수준의 유연성과 최대의 응답성
웹 앱의 여러 요소들을 파싱하는 동안 HTML, XHTML 또는 XML 포멧의 문서를 웹 브라우저가 접근하기 좋은 트리 형태로 배열할 수 있게 해주는 가상 DOM(문서 객체 모델)
ES6/7와 결합된 ReactJS는 쉬운 방법으로 고부하 작업을 쉽게 처리할 수 있습니다.
하위 데이터 바인딩. 이런 종류의 데이터 흐름을 사용하는 것은 하위 요소가 상위 데이터에 영향을 미칠 수 없습니다.
100% 오픈 소스 JavaScript 라이브러리이므로 전 세계 개발자의 기여에 따라 일상적인 업데이트 및 개선 사항이 있습니다.
유저 사이드에서 수행하는 데이터를 서버 사이드에서 동시에 쉽게 나타낼 수 있기 때문에 절대적으로 가볍습니다.
Facebook이 프로세스의 대부분을 자동화하는 "codemods" 제공하기 때문에 일반적으로 버전 간의 마이그레이션이 매우 쉽습니다.
ReactJS의 단점:
공식 문서 부족. ReactJS의 초고속 개발 때문에 적절한 문서를 작성하지 않았고, 많은 개발자들이 계속해서 체계적인 접근 없이 개별적으로 기여하느라 조금 혼란스럽습니다.
React는 자유도가 높습니다. 이는 때때로 선택의 매우 넓다는 것을 의미합니다.
ReactJS는 MVC 프레임워크에 사용자 인터페이스를 통합하는 방법에 대한 깊은 지식을 필요합니다.
ReactJS를 사용하는 회사들: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft.
Vue.js의 장점과 단점
Vue.js는 2013년에 출시된 JavaScript 프레임워크입니다. 적응력이 뛰어난 유저 인터페이스와 정교한 SPA(Single Page Application)를 구축하는데 적합합니다.
Vue.js의 장점:
권한이 부여된 HTML. Vue.js가 Angular와 유사한 특성이 많고, 여러 요소를 사용하여 HTML 블록 처리를 최적화하는 데 도움이 될 수 있습니다.
자세한 문서. Vue.js는 개발자들을 위해 빠른 러닝 커브를 가질 수 있도록 하고, HTML과 JavaScript의 기본 지식만을 사용하여 앱을 개발하는데 많은 시간을 절약할 수 있도록 하는 매우 적절한 문서를 제공합니다.
적응성. 디자인과 아키텍처 측면에서 Angular와 React와 유사하기 때문에 다른 프레임워크에서 Vue.js로 빠르게 스위칭할 수 있습니다.
훌륭한 통합. Vue.js는 SPA와 그보다 더 복잡한 웹 인터페이스를 가진 앱을 구축하는데 모두 사용될 수 있습니다. 중요한 것은 인터렉티브 부분이 작아 전체 시스템에 부정적인 영향이 없이 기존의 인프라와 쉽게 통합할 수 있다는 것입니다.
대규모 확장. Vue.js는 간단한 구조는 추가적인 시간 투자 없이 만들 수 있는 꽤 큰 재사용 가능한 템플릿을 개발하는데 도움이 될 수 있습니다.
작은 크기. Vue.js는 속도와 유연성을 유지하면서 약 20KB의 용량을 유지할 수 있습니다. 이는 다른 프레임워크와 비교하여 훨씬 더 훌륭한 성능에 도달할 수 있도록 해줍니다.
Vue.js의 단점:
자원 부족. Vue.js는 여전히 React 혹은 Angular와 비교하여 꽤 작은 시장 점유율을 가지고 있습니다. 이 프레임워크에서 지식 공유가 여전히 시작 단계에 머물러 있음을 의미합니다.
과도한 유연성의 위험. 때때로 Vue.js는 거대한 프로젝트에 통합할 때 이슈가 있을 수 있고, 여전히 가능한 솔루션에 대한 경험이 없습니다. 하지만 이는 곧 제공될 예정입니다.
영어 문서의 부족. 이 때문에 개발의 일부 단계에서 부분적으로 복잡할 수 있지만 점점 더 많은 문서들이 영어로 변경되고 있습니다.
Vue.js를 사용하는 회사 : Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters.
결론
실제 엔지니어에게는 새로운 프레임워크에 익숙해지는데에 약간의 시간이 걸리기 때문에 선택할 수 있는 프레임워크에는 큰 차이가 없습니다. 우리 회사에서는 대부분 ReactJS 및 Angular 2/4/5에서 전문 지식을 쌓지만 Vue.js 또한 제공하고 있습니다. 모든 프레임워크는 그들만의 장단점이 있습니다. 제품 개발을 하는 동안 각각의 케이스에 대해 적합한 선택을 하면 됩니다.
