부들잎의 이것저것

javascript framework 개발환경이 2017년에는 많은 변화가 있었습니다. 급부상하고 있는 Vue.js (ver.2 로 진화중) 와 엄청난 업데이트를 진행하고 있는 Angular (현재 5.x), Facebook이 이끌어가고 있는 React.js.

angular를 사용하고 있었는데, 갑작스런 angular5 와 typescript 와 혼용되면서 많은 변화에 적응을 못하고 있는 상황입니다. 가벼운 것들을 만드려고 하는데 시작부터 과대한 몸집을 가지고 있어서 균형을 맞춰주기 힘든 실정입니다.
하이브리드앱 개발을 위해서는 위에 3개의 Javascript을 잘 알아야합니다.

먼저 단일 페이지 응용 프로그램 (SPA)이 필요한지 또는 여러 페이지 접근 방식을 택해야하는지 확실하게 결정해야합니다.

• 프레임워크 라이브러리 생태계의 크기가 얼마나 되는가.
• 해당 언어의 커뮤니티가 얼마나 활성화되어 있는가.
• 프레임워크 개발자를 쉽게 접할 수 있는가
• 프레임워크의 기본개념에 대해서는 알고 있는가.
• 프로그램의 크기는 얼마나 될 것인가.
• 프레임워크의 학습곡선은 어떻게 되는가
• 어떤 종류의 성능을 기대할 수 있는가.
• 선택한 프레임워크로 어떻게 개발을 시작하는가

역사

Angular

TypeScript를 기반의 Javascript 프레임워크. 구글이 개발유지 중.
슈퍼 MVW(Model-View-Whatever) 프레임워크라고 불리운다.

React

"사용자 인터페이스를 만들기 위한 Javascript

2013년 등장해서 Facebook 이 개발, 유지관리합니다.

Facebook은 React Fiber의 출시를 위해 노력하고 있습니다. 후드에서 React가 변경됩니다. 결과적으로 렌더링 속도가 훨씬 빠르지 만 변경 후에는 이전 버전과의 호환성이 유지됩니다. 페이스 북은 2017 년 4 월 개발자 회의에서 변경 사항에 대해 이야기하고 새로운 아키텍처에 대한 비공식적 인 기사가 공개되었습니다. React Fiber는 2017 년 9 월에 React v16과 함께 발표되었습니다.

Vue

Vue는 2016 년에 가장 빠르게 성장하는 JS 프레임 워크 중 하나입니다.
Vue는 자체를 "대화 형 인터페이스 구축을 위한 직관적이고 신속하며 구성 가능한 MVVM"이라고 표현합니다.

Google 직원 인 Evan You가 2014 년 2 월에 처음 출시했습니다. Vue가 큰 회사의 후원없이 1 인 쇼처럼 많은 견인력을 얻고 있다는 점을 감안할 때 상당히 성공적이었습니다.

Vue로 제작된 페이지

트렌드

여러 가지 이름과 버전으로 인해 Google 검색 트렌드에서 Angular, React 및 Vue를 비교하기가 어렵습니다.
아래은 구글트렌드로 검색을 한 최근 5년간의 분류로 검색 이슈에 대한 기록입니다.

Stackoverflow 2017 설문 조사에 따르면 React는 조사 대상 개발자의 67 %와 AngularJS에 의해 52 %의 사랑을 받았습니다.

AngularJS (48 %) 대 React (33 %)는 "개발을 계속할 관심이 없습니다."
Vue는 두 경우 모두 상위 10 위 안에 들지 않습니다.

그런 다음 "프런트 엔드 프레임 워크"를 비교하는 statejs.com 설문 조사가 있습니다. 가장 흥미로운 사실은 React와 Angular가 100 % 인지도를 지니고 있으며, Vue는 설문 조사 대상 사람들의 23 %에게 알려지지 않았습니다.
만족도와 관련하여 React는 "다시 사용할 것"에 대해 92 %, Vue 89 % 및 Angular 2 만 65 %를 기록했습니다.

Stackoverflow 2017 설문 조사에서 재미난 설문조사 자료를 얻을 수 있습니다.

개발인력

Javascript를 더 배우고 싶지않는 개발자라면 Angular 또는 Vue를 선택하는 것이 좋습니다.
React는 더 많은 Javascript를 사용해야 합니다.

Angular 프레임 워크에 대한 좋은 점은 다른 회사의 새로운 Angular 2 개발자가 필요한 모든 규칙을 신속하게 익히게된다는 것입니다. 반응 프로젝트는 아키텍처 의사 결정 측면에서 각기 다르며, 개발자는 특정 프로젝트 설정에 익숙해 져야합니다.
Angular는 객체 지향 배경을 가진 개발자이거나 Javascript가 마음에 들지 않는 개발자에게 유용합니다.

라이브러리 생태계

Angular는 라이브러리가 아닌 프레임 워크이므로 응용 프로그램을 구조화하는 방법에 대해 강력한 의견을 제시하고 상자에서 더 많은 기능을 사용할 수 있기 때문입니다. Angular는 쾌적한 시작을 제공 할 수있는 "완벽한 해결책"입니다.
라이브러리, 라우팅 솔루션 등을 분석 할 필요가 없이 바로 시작할 수 있습니다.

반대로 React와 Vue는 유연합니다. 라이브러리는 모든 종류의 패키지와 쌍을 이룰 수 있습니다 (npm에 대한 React는 꽤 많이 있지만, Vue는 여전히 어리기 때문에 패키지가 적습니다).
React를 사용하면 Inferno와 같은 API 호환 대안을 위해 라이브러리 자체를 교환 할 수도 있습니다. 그러나 큰 유연성에는 큰 책임이 따릅니다. React에는 규칙이없고 제한된 지침이 없습니다. 모든 프로젝트는 아키텍처와 관련된 결정을 요구하며, 상황을 어렵게 만들 수 있습니다.

two-way data binding (양방향 데이터 바인딩)

React와 Angular의 가장 큰 차이점은 단방향 대 양방향 바인딩입니다. Angular의 양방향 바인딩은 UI 요소 (예 : 사용자 입력)가 업데이트 될 때 모델 상태를 변경합니다.
반응은 한 가지 방법으로 진행됩니다. 먼저 모델을 업데이트 한 다음 UI 요소를 렌더링합니다.
Angular의 메서드는 코드에서보다 깨끗하며 개발자가 쉽게 구현할 수 있습니다. 데이터가 한 방향으로 만 흐르기 때문에 (즉, 디버깅이 쉬워 짐) React의 방법은 더 나은 데이터 개요를 제공합니다.
두 개념 모두 장단점이 있습니다.
개념을 이해하고 이것이 프레임 워크 결정에 영향을 미치는지 확인해야합니다.
여기에 몇 가지 대화식 코드 예제를 찾을 수 있습니다.
마지막으로 Vue는 단방향 바인딩과 양방향 바인딩 (기본값은 단방향)을 모두 지원합니다.

코드작성에서

Angular는 하나의 객체가 다른 객체 (클라이언트)에 의존성주입 을 제공하는 패턴 인 종속성 주입을 포함합니다. 이로 인해 더 많은 유연성과 코드가 생성됩니다.

model-view-controller 패턴 (MVC)은 프로젝트를 모델, 뷰 및 컨트롤러의 세 가지 구성 요소로 나눕니다.
Angular MVC 프레임 워크는 MVC를 기본적으로 제공합니다.
React에만 V가 있습니다 - 당신은 스스로 M과 C를 풀어야 합니다.

• Vue.js 와 Angular 와 React 코드 작성 비교

유연성(Flexibility), 간소화(Microservice)

소스 코드에 Javascript 라이브러리를 추가하기 만하면 React 또는 Vue로 작업 할 수 있습니다.
Angular는 TypeScript를 사용하기 때문에 Angular에서 불가능합니다.

React와 Vue를 사용하면 실제로 필요한 것만 선택하여 응용 프로그램의 크기를 조정할 수 있습니다. 이전 응용 프로그램의 일부를 사용하여 SPA에서 마이크로 서비스로 전환하는 데 더 많은 유연성을 제공합니다. SPA에 가장 적합한 Angular는 마이크로 서비스에 사용하기에는 너무 덩치가 큽니다.

다음 사이트에서 JS 프레임워크의 벤치결과 및 테스트를 진행할 수 있습니다.

Testing (테스트)

Angular2에는 Jasmine, Facebook은 Jest를 사용하여 React 코드를 테스트합니다.

• Jest와 Mocha의 비교

Vue는 테스트 가이드가 없지만 Evan은 2017 년 미리보기에서 팀이이 작업을 계획하고 있다고합니다. 카르마를 사용하는 것을 권장하고 있습니다.
Vue는 Jest와 함께 작동하며 테스트 유틸리티로 avoriaz도 있습니다.

Universal, native apps (유니버셜, 네이티브앱)

하이브리드앱을 제작하는데 사용되고 있습니다.
어플리케이션은 웹, 데스크탑 및 네이티브 애플 리케이션의 세계로 어플리케이션을 소개하고 있습니다.

React와 Angular 모두 네이티브 개발을 지원합니다.
Angular는 네이티브 응용 프로그램 용 NativeScript (Telerik 지원) 및 하이브리드 응용 프로그램 용 Ionic Framework를 보유하고 있습니다.
React를 사용하면 반응 네이티브 렌더러를 통해 크로스 플랫폼 iOS 및 Android 앱을 제작하거나 네이티브 앱에 반응 할 수 있습니다.

Javascript 프레임 워크는 클라이언트에서 페이지를 렌더링합니다. 이것은 인식 된 성능, 전반적인 사용자 경험 및 SEO에 좋지 않습니다. 서버 측 사전 렌더링은 장점입니다. 세 가지 프레임 워크에는 모두 도움이되는 라이브러리가 있습니다. React에는 next.js가 있고 Vue에는 nuxt.js가 있고 Angular에는 Angular Universal이 있습니다.

학습곡선

확실히 Angular의 가파른 학습 곡선이 있습니다.
그것은 포괄적 인 문서를 가지고 있지만 때로는 생각보다 어렵기 때문에 좌절감을 느낄 수도 있습니다.
Javascript에 대한 깊은 이해가있는 경우에도 프레임 워크의 내부에서 진행중인 작업을 알아야합니다.
설치를 시작하면 엄청난 코드와 패키지를 한꺼번에 설치합니다. 시간이 지남에 따라 배울 필요가 있는 생태계가 있기 때문에 부정적인 요소로 작용할 수 있습니다.
다른 한편으로는, 많은 설정이 되어있기 때문에 바로 결과물을 만들 수 있는 장점이 있습니다.

React를 사용하면 타사 라이브러리와 관련하여 많은 설정을 할 수 있습니다. React에서만 선택할 수있는 상태 관리를위한 16 개의 다른 flux 패키지들이 있습니다.

Vue는 배우기가 꽤 쉽습니다.
주니어 개발자에게는 Vue가 훨씬 쉬워 보이기 때문에 Vue로 많이들 전환합니다.
여기에서는 Angular에서 Vue로 이동에 관한 글에 대해 읽을 수 있습니다. 다른 사용자에 따르면, 회사의 React 앱은 너무 복잡하여 새로운 개발자가 코드를 따라갈 수 없다고 합니다.
Vue를 사용하면 중학교 및 고위 개발자 간의 격차가 줄어들고 버그, 문제 및 개발 시간을 최소화하면서보다 쉽게 ​​공동 작업을 수행 할 수 있습니다.

어떤 사람들은 React에서 작업이 Vue에서 더 잘 작동한다고 주장합니다. 주니어 Javascript 개발자이거나 지난 10 년 동안 주로 jQuery로 작업 한 적이 있다면, Vue 사용을 고려해야 합니다.
패러다임 이동은 React로 이동할 때 더욱 두드러집니다.
Vue는 일반 Javascript와 유사 해 보이지만 구성 요소, event-driven-model(이벤트 중심 모델) 및 one-way data flow(단방향 데이터 흐름)과 같은 새로운 아이디어를 소개합니다.

결론

Typescript를 좋아한다면 : Angular
OOP(Object Orientated Programming)를 한다면 : Angular
가이드라인, 구조, 도움의 손길이 필요하다면 : Angular
거대한 생태계를 좋아한다면 : React
유연성을 원한다면 : React
원하는 패키지만 사용하고 싶다면 : React
Javascript를 사랑하고, 자바스크립트 접근법을 가지고 있다면 : React
깔끔한 코드를 좋아한다면 : Vue
가벼운 프레임워크를 원한다면 : Vue
쉬운 학습곡선을 원한다면 : Vue
혼자 일하거나 작은 팀으로 일한다면 : Vue
앱의 덩치가 크다면 : Angular
하이브리드 네이트브앱을 만들고 싶다면 : React, Angular
깔끔한 HTML 파일이 필요하고 디자이너와 일하고 있다면 : Angular, Vue
제한된 생태계를 싫어한다면 : React

다른 사이트들을 참고해서 작성했지만, 솔직히 나도 알고 싶은 결론을 도출하기까지 너무 많은 시간이 걸렸다.
React와 Vuew은 아직 사용해 보지 않아서 잘은 모르지만 혼자 간단한 사이트를 제작하는데 Vue로 작성을 고려해 보는게 좋을 꺼 같다. 그런데, Javascript 가 조금 싫은데…