기본 콘텐츠로 건너뛰기

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)

댓글

댓글 쓰기

이 블로그의 인기 게시물

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃...
댓글 쓰기
자세한 내용 보기

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자...

(주)레터플라이 채용 정보: 프로그래밍을 생각하면 가슴이 뛰는 개발자... Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. Angular.js, Python, MySQL 중 한 가지 언어에 뛰어나신 분도 좋고 개발 업무 전반적으로 센스가 있으신 분도 환영합니다. 팀 내 뛰어난 풀스택 개발자분들이 Angular.js, Python, MySQL 모두 작업 가능하시니 오셔서 함께 배우며 즐겁게 작업하시면 됩니다. 맡은 업무를 성실하게 수행해 나갈 수 있는 책임감과 태도를 갖고계신 분, 그리고 항상 새로운 방법론에 도전하고 포기를 모르는 분일수록 저희와 더욱 잘 맞을 것 같습니다. 개발 업무: 레터플라이의 핵심 기능인 편지, 사진을 제작하는 레터에디터, 포토에디터 개발. 이 기능들은 "모바일 웹을 통한 출력제품 생산 자동화 기술"(특허 출원 준비중)로서 레터플라이에서 자체개발했습니다. 근무 지역: 광화문역 5번출구 바로 앞 근무 환경: 책임과 존중을 중요시하는 수평적인 분위기, 도전적이며 서로에게 배우는 문화 근무 시간: 10-19시, 출근시간 자유 지정. 급여: 연봉/스톡옵션 협의 지원 방법: 팀 지원하기 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/721 by ccl(A) rewrite - 2020-03-20 09:20:18
댓글 쓰기
자세한 내용 보기

jqxGrid 정렬, 필터 메뉴 숨기기

jqxGrid 정렬, 필터 메뉴 숨기기 How I can remove filter to particular grid column - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets Hi, I tried that it's working. I set properties to those columns as sortable: false, filterable: false. but when I clicked on the column one drop down is appearing with options "sort ascending", "sort descending", "remove sort" and those are all in disable www.jqwidgets.com from http://devesim.tistory.com/90 by ccl(A) rewrite - 2020-03-11 04:20:29
댓글 쓰기
자세한 내용 보기