최근 몇 년 동안 프론트엔드 개발 분야에 수많은 프레임워크가 등장하여 사람들이 어떻게 선택해야 할지 혼란스럽고 혼란스러워졌습니다. 오늘 우리는 가장 인기 있는 5가지 프런트엔드 JavaScript 프레임워크를 비교하고 개요를 제공하며 주요 기능, 도구, 학습 곡선 및 선택에 도움이 되는 기타 요소를 소개합니다.
인기 측정
2020년 JavaScript 현황 설문조사에 따르면 프레임워크 사용을 통해 프레임워크 인기를 확인하세요. 설문 조사는 23,765명의 응답자를 대상으로 완료되었으며 결과는 다음과 같습니다.
React：80％ Angular：56％ Vue.js：49％ Svelte：15％ PreACT：13％
또한 동일한 설문 조사의 "프레임워크 인식"도 고려했습니다.
React：100％ Angular：100％ Vue.js：99％ Ember：88％ Svelte：86％
프런트 엔드 프레임워크 정의
이 기사의 목적에 따라 텍스트는 Fowler가 제공한 Martin 정의를 사용합니다.
라이브러리는 기본적으로 개발자가 호출할 수 있는 함수 집합이며 일반적으로 클래스로 구성됩니다. 호출은 일부 작업을 수행하고 제어권을 클라이언트에 반환합니다.
프레임워크는 추상적인 디자인을 구현하고 더 많은 내장 동작을 가지고 있습니다. 개발자는 자신의 클래스를 서브클래싱하거나 삽입하여 프레임워크의 다른 위치에 동작을 삽입할 수 있으며, 프레임워크는 이러한 지점에서 코드를 호출합니다. 반응 프레임. 페이스북, 넷플릭스, 에어비앤비 등 기업 제품에 활용되고 있으며, 다수의 개발자와 풍부한 활용 학습 리소스를 보유하고 있습니다.
React 관련 도구가 많이 있습니다. 팀에서 제공하는 CLI를 사용하면 새 프로젝트를 쉽게 빌드할 수 있으며 도구 확장은 Chrome 및 Firefox에 적합합니다. 여기에는 다양한 작업(예: 라우팅, 양식 처리 및 애니메이션)을 위한 많은 타사 패키지와 Next.js 및 Gatsby와 같은 여러 React 기반 프레임워크가 포함되어 있습니다. React는 "한 번 배우고 어디서나 작성"이라는 개념을 고수합니다. React Native로 모바일 앱을 강화하고 Node로 서버에서 렌더링할 수 있으며 뛰어난 SEO 지원을 제공합니다.
React는 너무 단순하다는 생각이 주류입니다. 이는 애플리케이션의 뷰 계층에만 관련되어 있고 모든 것이 개발자에게 넘겨지며 과도한 자유도에 대해 엇갈린 의견이 있습니다. 
추천: "
Angularjs Video Tutorial
" Google이 프론트엔드 박스에 제공하는 제품으로 AngularJS(또는 Angular) 형태로 탄생했습니다. 1) 10년 만에 즉각적인 히트를 쳤는데, 이는 개발자들이 현재 단일 페이지 애플리케이션으로 알려진 최초의 프레임워크를 구축할 수 있었기 때문입니다. 성능 문제와 대규모 JavaScript 애플리케이션 구축의 과제를 해결하기 위해 Google은 AngularJS를 다시 작성하여 2016년에 Angular 2를 출시했습니다(오늘은 Angular만 해당). 쉽게 마이그레이션할 수 없기 때문에 AngularJS와 Angular는 두 개의 독립적인 프레임워크가 됩니다. Angular는 프론트엔드 프레임워크에서 중요한 위치를 차지하고 있으며, 엄격한 테스트를 거쳐 Google, Microsoft 등의 기업에서 프로덕션에 사용하고 있으며 관련 온라인 리소스도 풍부합니다.뷰 레이어만 다루는 React와 달리 Angular는 단일 페이지 클라이언트 애플리케이션 구축을 위한 완벽한 솔루션을 제공합니다. Angular 구성 요소는 양방향 데이터 바인딩을 구현하여 이벤트를 수신하고 상위 구성 요소와 하위 구성 요소 간에 동시에 값을 업데이트합니다. 템플릿은 Angular의 많은 기능을 활용하기 위해 특수 구문을 사용할 수 있는 HTML의 일부입니다. TypeScript는 Angular 개발에 사용되는 주요 언어이므로 프레임워크는 기업 및 애플리케이션에 적합합니다.
관련 도구의 관점에서 Angular는 애플리케이션을 초기화, 개발, 빌드 및 유지 관리할 수 있는 매우 완벽한 CLI와 Angular 애플리케이션 디버깅을 위한 Chrome 및 Firefox Dev Tools 확장 기능을 제공합니다.
그러나 학습 관점에서 보면 Angulard는 가장 가파른 학습 곡선을 가지고 있습니다. 개발자가 작업하려면 TypeScript에 익숙해야 합니다. 이는 초보자에게 최선의 선택이 아니며 팀에서 역할을 수행하는 데 더 적합합니다.
3. Vue.js
권장: "최신 5개 vue.js 비디오 튜토리얼 선택"
통계는 Vue v2용이며 버전 3을 사용할 수 있으며 설치해야 합니다. vue@next.
Vue는 사용자 인터페이스 및 단일 페이지 애플리케이션을 구축하기 위한 MVVM(Model-View-ViewModel) 프런트 엔드 프레임워크입니다. Evan You가 집필했으며 2014년에 처음 출판되었습니다.
Vue는 현재 Alibaba, Gitlab 및 Adobe와 같은 회사에서 제작에 사용되고 있습니다. 이는 틀림없이 모든 프레임워크에 대한 최고의 문서이며 포럼은 코딩 관련 질문에 대한 도움을 받을 수 있는 훌륭한 리소스입니다. Vue는 PHP 세계에서 널리 사용되며 Laravel 프레임워크의 일부입니다.
Vue의 핵심 판매 포인트는 처음부터 설계되었으며 점진적으로 채택될 수 있다는 것입니다. 즉, Vue는 일반 웹 페이지 기능을 향상하거나 구성 요소를 구성하여 단일 페이지 애플리케이션을 향상시킬 수 있다는 것입니다. HTML 기반의 기본 데이터 모델에 단일 파일 구성 요소를 제공합니다.
관련 도구의 완성도 측면에서 한편으로는 공식 CLI를 사용하여 스캐폴딩을 생성하고 Vue 애플리케이션을 개발할 수 있으며, 추가적으로 Chrome 및 Firefox에서 devtools 확장 프로그램을 사용하여 디버깅을 도울 수 있습니다. React와 달리 Vue는 라우팅 및 상태 관리를 위한 공식 패키지를 제공하여 편리하고 표준화된 처리 방법은 물론 다양한 타사 도구 및 Vue 기반 프레임워크를 제공합니다.
하지만 다른 프레임워크에 비해 진입 장벽이 매우 낮기 때문에 경험이 부족한 개발자에게 적합합니다.
4. Svelte
은 Rich Harris가 2016년에 출시했습니다. 프런트엔드 프레임워크의 새로운 구성원으로, 웹 애플리케이션을 구축하기 위해 다른 프레임워크와는 다른 접근 방식을 사용합니다.
가상 DOM의 개념을 피하고 빌드 중에 코드를 개발자의 애플리케이션 상태 변경에 따라 DOM을 업데이트하는 작은 원시 JavaScript 모듈로 컴파일합니다. 작은 크기와 빠른 적용을 실현합니다.
Rich Harris는 학습 곡선이 낮고 커뮤니티도 작지만 IBM, New York Times 등의 회사에서 제작에 사용되었으며 앞으로도 큰 잠재력을 가지고 있습니다.
성숙도가 낮아 소규모 프로젝트로만 선호되고 있으나 점차 상황이 변화하고 있습니다. SvelteKit은 공개 베타 버전이며 커뮤니티는 지속적으로 성장하고 있습니다. Svelte는 현재 젊지만 개발자는 주의를 기울여야 합니다.
5. Ember.js
마지막으로 소개된 Ember는 프런트엔드 프레임워크가 등장한 이후부터 존재해 왔습니다. 원래 2011년에 출시되었지만 여전히 개발 세계에서 인기가 있습니다.
React, Vue, Svelte 및 기타 모든 제품 이전으로 거슬러 올라갑니다. 프레임워크는 프런트 엔드 과대 광고의 최전선에 있었던 적이 없지만 계속해서 꾸준한 발전을 이루고 있습니다. 파트너로는 2020년 유럽 상위 50개 핀테크 기업 중 두 곳인 Qonto와 CLARK가 있습니다.
Ember는 Angular와 유사하게 앱 개발에 배터리를 더 많이 사용하는 접근 방식을 취하고 최신 프런트 엔드 JavaScript 애플리케이션을 구축하는 데 필요한 모든 것을 제공합니다. 6주 릴리스 주기를 따르며 안정성이 뛰어납니다.
관련 도구의 경우 Ember CLI부터 Ember Inspector까지 많은 관련 도구가 있으며 사용 가능한 타사 라이브러리도 많이 있습니다.
커뮤니티는 다른 유명 프레임워크 커뮤니티보다 크지 않지만 회원들의 참여도가 높고 포럼과 Discord 서버를 통해 코딩 문제에 대한 도움을 쉽게 받을 수 있습니다.
개발자가 배우고 싶다면 학습 곡선이 중간 정도이거나 가파릅니다. 초보자나 소규모 프로젝트의 경우 Ember가 최선의 선택이 아닐 수도 있습니다. 움직이는 부분이 많고 팀 노력의 일환으로 항목을 구성하는 데 많은 유연성을 제공하지 않습니다.
결론
이 기사에서는 현재 시장에서 가장 인기 있는 5가지 프런트 엔드 프레임워크를 비교하여 개발자가 개인 능력과 프로젝트 요구 사항에 따라 선택할 수 있는 더 나은 참고 자료를 제공합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
