기본 콘텐츠로 건너뛰기

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)

댓글

댓글 쓰기

이 블로그의 인기 게시물

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다.

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다. - 좋아요 아래와 같은 업무를 훌륭히 감당하실 분을 모십니다.서비스 관련 DB 모델링, DB 최적화 작업서버 & DB 관리Frontend & Backend 인터페이스의 최적화 작업 화합과 성장을 같이! - Angular JS의 경험 - Node.js - javascript 능숙자 - DRMS 사용 능숙자 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/742 by ccl(A) rewrite - 2020-03-22 12:20:20
댓글 쓰기
자세한 내용 보기

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...
댓글 쓰기
자세한 내용 보기

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...
댓글 쓰기
자세한 내용 보기