기본 콘텐츠로 건너뛰기

React vs Vue vs Angular ( JS Framework 간단 비교 )

React vs Vue vs Angular ( JS Framework 간단 비교 )

오늘은 자바스크립트 프레임워크 중 가장 유명한

React / Vue / Angular 특징과 함께 간단하게 비교해보도록 하겠습니다.

우선 각 프레임워크의 간단한 특징은 아래와 같습니다.

React

- 웹 뿐만 아니라 앱 개발에도 사용 ( React Native )

- 페이스북이라는 거대한 업체의 지원

- 가장 거대한 커뮤니티

- Virtual Dom

HomePage : reactjs.org/

Repository : github.com/facebook/react

Vue

- 가장 적은 러닝커브 ( jQuery 등에 익숙한 기존 개발자도 가장 편하게 도입 가능 )

- 가볍고 빠르게 개발이 필요하다면 추천

- Evan You 라는 개인이 프로젝트 리더

- 2019년에 메인 리더인 Evan You 의 홍콩 시위 발언 관련하여 이슈 존재

- 상대적으로 작지만 빠르게 성장중인 커뮤니티

- 가장 최신에 릴리즈 시작한 프레임워크(2014년)

- 양방향 바인딩

- Virtual Dom

HomePage : github.com/vuejs/vue#readme

Repository : github.com/vuejs/vue

Angular

- 구글이라는 전세계적인 기업의 지원

- 가장 빠르게 릴리즈된 JS 프레임워크(2010년)

- 큰 커뮤니티

- 양방향 바인딩

- TypeScript 가장 먼저 도입

- 가장 체계적이고 잘 정리되어있는 문서

- 가장 복잡하고 큰 러닝커브 ( 내부 동작 메커니즘 등 포함 )

HomePage : angularjs.org

Repository : github.com/angular/angular.js

각 프레임워크가 실제로 얼마나 관심을 받고있는지 비교해 보았습니다.

구글 트랜드로 조사시 대한민국 기준 아래와 같습니다.

# 검색어와 주제가 모두 포함되어 차이가 있을수 있으니 주의 바랍니다.

react > vue > angular 순으로 많습니다.

# React vs Vue vs Angular For google trends

아래는 전 세계 기준으로 하여 추출한 자료입니다.

# 검색어와 주제가 모두 포함되어 차이가 있을수 있으니 주의 바랍니다.

react > angular > vue 순으로 많습니다.

Angular 가 급격히 늘어나며 Vue 보다도 커진걸 알 수 있습니다.

# React vs Vue vs Angular For google trends

아래는 각 프레임워크에 npm 에서 비교 자료입니다.

React

React npm

Vue

Vue npm

Angular

Angular npm

Weekly Downloads 로 비교할때

React > Vue > Angular 순으로 보입니다.

물론 다운로드나 검색유입이 많다고 훌륭한 라이브러리인것은 아니며

셋은 각자의 장단점을 가지고 빠른 속도로 발전중인 프레임워크들 입니다.

따라서 무엇을 공부할지는 아래 항목들을 보고 고민하시면 될 것 같습니다.

- 셋 중 어떠한 프레임워크를 공부하여도 충분히 좋은 프레임워크 입니다.

1. 본인이 입사를 원하는 회사에서 사용중인 혹은 사용 예정인 스킬

- 구인 공고에 명시하거나 현재 서비스 중인 Page 참조

2. 본인이 더 중요시 하는 프레임워크의 기준

- 러닝커브 / 커뮤니티의 크기 / Update 주기 등

3. 평균적으로 더 많은 회사가 원하는 범용적인 프레임워크

- 잡코리아 등 구인구직 사이트에서 검색하여 활용

4. 평균적으로 더 좋은 대우를 해주는 회사가 원하는 프레임워크

- 잡코리아 등 구인구직 사이트에서 검색하여 활용

참고 사이트

https://www.codeinwp.com/blog/angular-vs-vue-vs-react/#disqus_thread

https://medium.com/sjk5766/angular-vs-react-vs-vue-72046f6748b8

https://medium.com/aha-official/%EC%95%84%ED%95%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EA%B8%B0-0-angular-react-vue-js-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EC%84%A0%ED%83%9D-f797392118d0

from http://html6.tistory.com/207 by ccl(A)

댓글

댓글 쓰기

이 블로그의 인기 게시물

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15
댓글 쓰기
자세한 내용 보기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22
댓글 쓰기
자세한 내용 보기

Angular2 시작하기

Angular2 시작하기 Angular2 시작하기 1. NodeJS 설치 - https://nodejs.org/ko/ NodeJS 공식 홈페이지 접속하여 Node를 다운 후 설치. 2. NPM 을 통한 Angular-Cli 설치 Window Command 를 통하여 npm install -g @angular/cli 명령어를 실행한다. 위와 같이 정상적으로 angular-cli 가 설치되었다면 Project 가 위치할 폴더를 생성. 참고 사이트 : https://cli.angular.io/ 3. Angular-cli 를 통한 Angular Project 생성. Window Command 를 통한 ng new [폴더명] 위와 같이 Angular 기본 프로젝트가 생성됨. 해당 프로젝트로 폴더로 이동하여 ng serve 명령어 실행 Node 를 통해 Angular 프로젝트 실행. http://localhost:4200 접속하게되면 위와같이 Angular 프로젝트 실행된다. 앞으로 Angular2 의 개념들을 포스팅하면서 Spring-Boot , Spring Project의 Angular-cli 를 이용하여 ng build 하여 포팅하는 글을 올리겠습니다. from http://overclassbysin.tistory.com/3 by ccl(A) rewrite - 2020-03-07 07:55:13
댓글 쓰기
자세한 내용 보기