"앵귤러 vs 리액트 vs 뷰", 나에게 맞는 프론트엔드 프레임워크 선택을 위한 가이드

출처 : https://www.codingworldnews.com/news/articleView.html?idxno=4192 

"앵귤러 vs 리액트 vs 뷰", 나에게 맞는 프론트엔드 프레임워크 선택을 위한 가이드 - 코딩월드뉴

웹 개발 프로젝트를 시작할 때 프론트엔드 개발을 할 때 어떤 프레임 워크, 라이브러리를 선택하는지가 매우 중요해졌다. 몇 년 전까지 주로 앵귤러(Angular) 또는 리액트(React)를 사용했다면, 최근엔 뷰(Vue.js)라는 새로운 선택지가 떠오르고 있다.

어떤 프론트엔드 프레임워크가 더 뛰어난지, 어떤 것이 더 좋은 선택인지에 대해선 개발자들 사이에서도 의견이 분분하다. 앵귤러, 리액트, 뷰 사이에서 어떤 자바스크립트 프레임워크를 선택해야 하는지 고민된다면 codeinwp가 설명한 각 프레임워크 특징 및 장단점을 참고해보자.

1 단계: 앵귤러, 리액트, 뷰에 대한 이해

앵귤러는 구글이 개발한 타입스크립트 기반 자바스크립트 프레임워크로, 2010년 출시되었다. 2016년 앵귤러 2가 출시되며 기존 이름에서 'JS'가 생략되며 상당한 변화가 일어났다. 앵귤러 2+는 '앵귤러'라는 이름으로 알려져 있다. 첫번째 버전인 앵귤러JS도 아직 업데이트되고 있지만, 최신 안정판은 2020년 11월 출시된 앵귤러 11이다.

리액트는 페이스북이 개발했으며 2013년 처음 출시됐다. 페이스북은 리액트를 페이스북, 인스타그램, 왓츠앱 등 자사 제품에 광범위하게 사용한다. 현재 안정판은 2020년 10월 출시된 17.X이다.

뷰 또는 뷰.js(Vue.js)는 이 중 가장 최근 출시된 프레임워크로 구글 출신의 에반 유(Evan You)가 2014년 개발했다. 뷰는 대규모 커뮤니티와 개발자의 도움으로 완성되었다는 특징이 있다. 최신 안정판은 2020년 9월 출시된 3.0버전이며 뷰의 기여자는 패트리온(Patreon)의 지원을 받는다. 뷰 3은 현재 자체 깃허브 저장소에 있으며, 타입스크립트로 이동했다.

오픈 소스 프레임워크를 사용하기 전에는 라이센스를 통과해야 한다. 위 세가지 프레임워크는 모두 MIT 라이센스를 제공하며, 사유 소프트웨어에서도 재사용에 대한 제한적인 제한을 제공한다.

2단계: 앵귤러, 리액트, 뷰의 인기 및 수요

2019년 스택 오버플로우 설문에 따르면, 가장 선호되는 프레임워크는 리액트로 74.5% 개발자가 이를 선호했다. 뷰가 바로 뒤를 이어 73.6%의 선호도를 받았다. 앵귤러 또는 앵귤러.js는 57.6%로 상대적으로 낮은 선호도를 보였다.

취업 시장의 동향 또한 해당 프레임워크의 인기도를 볼 수 있는 좋은 방법이다. codeinwp가 보도한 내용에 따르면, 2018년 후반 추세에서 앵귤러와 리액트는 비슷한 수준으로 많은 인력 수요를 보였지만, 뷰 채용 수요는 적은 것으로 나타났다. (약 20% 수준)


사진 출처: codeinwp
 

현재 취업 시장의 관점에서는 앵귤러 또는 리액트가 좋은 선택이다. 하지만 뷰는 최근 3년 동안 인기를 얻으며 성장하고 있다. 단 뷰를 사용하는 프로젝트나 프로젝트에 뷰를 채택하는 수가 뷰 개발자 수요 증가로 이어지는 데에는 약간의 시간이 걸릴 수 있다.

3단계: 커뮤니티 및 개발

자 이제 각 프레임워크의 개요와 동향에 대해 파악했으니 이러한 프레임워크가 실제 개발에 어떻게 쓰이는지를 알아보자.

  앵귤러 리액트 뷰
Watchers 3.2k  6.7k 6.3k
Stars 70.9k 164k  200.8k
Forks 18.6k 32.9k  31.7k
Contributors 1,352 1,533  382

깃허브의 저장소 통계를 보면 리액트가 포크(Fork)와 와치(Watch) 수에서 가장 앞서는 모습을 보인다. 하지만 별점에서는 뷰가 가장 높은 것으로 나타나고 있다.

뷰는 오픈 소스 커뮤니티에 의해 주도되는 반면, 앵귤러와 리액트는 구글이나 페이스북 직원의 점유율을 가지고 있다고 볼 수 있다.

통계상 세 프레임워크 모두 상당한 개발 활동을 보이며, 이는 앞으로도 계속될 것으로 보인다.

참고할만한 추가적인 메트릭으로 깃허브 저장소 작성자가 사용하도록 설정해야 하는 'Used By' 배지를 볼 수 있다. 이는 깃허브에 있는 다른 저장소 몇 개가 해당 저장소에 종속되어 있는지를 나타낸다. 앵귤러의 깃허브 저장소는 170만 명, 리액트는 거의 570만 명의 사용자를 보유하고 있지만, Vue는 두 개의 저장소를 모두 합쳤을 때 16만7천 명이 넘는다. 

4단계: 프레임워크 마이그레이션

웹 프론트엔드 개발을 시작할 때 프레임워크를 잘 선택하기만 하면 될까? 아니다. 하지만 선택한 프레임워크로 작업할 때 업데이트가 진행되며 코드가 엉망이 되는 것은 걱정할 필요는 없다. 대부분의 경우 버전간에 많은 문제가 발생하지 않는다. 하지만 일부 업데이트는 더 중요할 수 있고, 호환성을 유지하기 위해 수정이 필요하므로 펄스를 유지하는 것이 중요하다.

앵귤러는 6개월마다 주요 업데이트를 시행하며, 주요 API가 사용되지 않게 되어도 6개월의 기간이 주어진다. 이 기간은 필요한 경우 두 번의 릴리즈 주기(1년)를 통해 변경할 수 있는 시간을 제공한다.

앵귤러와 리액트를 비교할 때, 페이스북은 트위터와 애어비앤비 같은 대기업이 리액트를 사용하기 때문에 안정성이 가장 중요하다고 강조해왔다. 리액트는 일반적으로 버전을 통한 업그레이드가 있을 때 리액트 코드 모드와 같은 스크립트를 사용하며, 마이그레이션 하는 것이 가장 쉽다.

뷰3 문서의 마이그레이셕 섹션에 따르면, 뷰는 뷰 2, 뷰 3와 많은 부분이 동일하다. 1.x에서 2로 마이그레이션 하는 경우 API의 90%가 동일하다. 또한 뷰 2에서 뷰 1로 마이그레이션하는 것을 돕는 콘솔에서 앱 상태에 접근할 수 있는 마이그레이션 도우미 도구가 있다.


5 단계: 프레임워크 특징 비교

여기서 살펴봐야 할 몇 가지 중요한 특성이 있는데, 그중 가장 중요한 것은 전체 크기와 로드 시간, 사용 가능한 구성요소 및 학습 곡선이다.

- 크기 및 로드 시간
요즘은 캐싱과 소형화가 상당히 표준적이기 때문에 라이브러리의 크기는 그리 크지 않을 것이다. 프레임워크 크기 사이에 상당한 차이가 있을 수 있지만(셋 중 앵귤러가 가장 크다), 평균 웹 페이지 크기(약 2MB)와 비교하면 여전히 작다. 또한 널리 사용되는 CDN을 사용해 이러한 라이브러리를 로드하는 경우, 사용자는 해당 라이브러리를 로컬 시스템에 이미 로드했을 가능성이 높다.

- 구성 요소
구성요소는 세 가지 프레임워크에서 공통으로 필요한 부분이다. 구성요소는 일반적으로 입력을 가져오고, 그에 따라 동작을 변경한다. 일반적으로 이 동작 변경은 페이지의 일부 U가 변경하는 모습으로 나타난다. 구성요소를 사용하면 코드를 쉽게 재사용할 수 있다. 구성요소에 전자상거래 사이트의 카트 또는 소셜 네트워크의 로그인 상자 등이 있다.
앵귤러에서 구성요소는 '디렉티브(directive)'라고 불린다. 디렉티브는 DOM 요소에 있는 마커로, 앵귤러는 특정 동작을 추적하고 부착할 수 있다. 앵귤러는 구성요소의 UI 부분을 HTML 태그의 속성으로 구분하고, 자바스크립트 코드 형태로 동작한다. 이는 앵귤러와 리액트의 차이를 만드는 부분이다.

흥미롭게도, 리액트는 구성요소의 UI와 동작을 결합한다. 예를 들어 아래는 리액트에서 'Hello World' 구성 요소를 생성하는 코드이다.

     ReactDOM.render(
       

Hello, world!

,
       document.getElementById('root')
     );

리액트에서 코드의 동일한 부분은 UI 요소를 생성하고 해당 동작을 받아 쓰는 역할을 한다.

뷰와 리액트를 살펴볼 때, 뷰에서는 UI와 동작도 구성 요소의 일부이므로 직관적으로 사용할 수 있다. 또한 뷰는 사용자 지정이 용이해 스크립트 내에서 구성 요소의 UI와 동작을 결합할 수 있다. 또 CSS 대신 뷰에서 라이브러리 프로세스를 사용할 수도 있다. 부트스트랩과 같은 다른 라이브러리와 통합할 때 뷰는 유용하다.

6단계: 학습 곡선

그렇다면 세 프레임워크를 학습하는 데 걸리는 시간은 어떨까?

앵귤러는 완전한 솔루션이기 때문에, 학습 곡선이 가파른 편이다. 앵귤러를 익히기 위해서는 타입스크립트 및 MVC와 같은 관련 개념을 학습해야 한다.

리액트는 약 한시간 내의 리액트를 설정하는 데 도움이 되는 시작 가이드를 제공한다. 이 문서는 빈틈없고 완전하며 이미 스택 오버플로에 있다. 리액트는 완전한 프레임워크가 아니며, 고급 기능을 사용하려면 타사 라이브러리를 사용해야 한다. 따라서 리액트의 핵심 프레임워크를 배우는 데 학습 곡선은 가파르지 않지만, 추가 기능을 사용해 취하는 경로에 따라 달라진다. 한편 리액트를 사용하는 방법을 배운다고 해서 반드시 모범 사례를 사용해야 하는 것은 아니다.

뷰는 높은 사용자 정의 기능을 제공해 앵귤러나 리액트보다 학습이 쉽다. 또한 뷰는 구성요소의 사용과 같은 기능 면에서 앵귤러, 리액트와 겹친다. 따라서 앵귤러나 리액트에서 뷰로 전환하는 것은 쉬운 선택이다. 그러나 뷰의 단순성과 유연성은 양날의 검이 되기도 한다. 이는 부실한 코드를 허용하고 디버그와 테스트를 어렵게 만든다.

앵귤러와 리액트, 뷰는 주요 학습 곡선을 가지고 있다. 하지만 숙달 되었을 때 이를 사용하는 방법은 무한하다. 예를 들어 앵귤러나 리액트를 워드프레스, WooCommerce와 통합해 진행형 웹 앱을 만들 수 있다.

마지막 단계: 그래서, 어떤 것을 선택해야 할까?

이제 각 프레임워크의 특징을 고려해 나에게 맞는 프레임워크를 선택해보자.

앵귤러는 프레임워크 중 가장 성숙하며 기여자 측면에서 훌륭한 지원을 제공한다. 또한 완전한 패키지이다. 하지만 학습 곡선이 가파르고, 앵귤러의 개발 개념은 새로운 개발자를 미룰 수 있다. 앵귤러는 이미 타입스크립트를 사용하고 있는 대규모 팀과 개발자를 보유한 기업에게 좋은 선택이다.

리액트는 충분히 성숙해진 프레임워크이며 커뮤니티 기여도 또한 높다. 리액트를 채택하는 기업 또한 많아 고용 시장이 매우 좋고 장래성이 좋다. 리액트는 프론트엔드 자바스크립트 프레임워크, 스타트업 및 유연성을 좋아하는 개발에게 적합한 선택이다. 다른 프레임워크와 원활하게 통합할 수 있어 유연성을 원하는 사용자에게 큰 이점을 제공한다.

뷰는 대기업의 지원 없이 가장 최근에 생긴 무대다. 지난 몇년 간 성장하며 앵귤러와 리액트의 강력한 경쟁자로 떠오르고 있다. 특히 뷰 3.0이 출시되며 더욱 커지고 있다. 여기에 알리바바와 바이두와 같은 많은 중국 대기업이 뷰를 주요 프론트엔드 자바스크립트 프레임워크로 선정한 것이 영향을 미친 것으로 보인다. 단순성을 선호하지만 유연성을 좋아한다면 뷰가 좋은 선택이다.

앵귤러, 리액트, 뷰 세 라이브러리들은 각각 장점과 단점이 있다. 어떤 프로젝트를 진행하고 있는지, 어떤 것을 개발하고 싶은지에 따라 적합한 프레임워크가 달라질 수 있다. 항상 결정하기 전에는 스스로에게 맞는지 검토하는 것이 중요하다. 특히 개인 프로젝트가 아닌 비즈니스 벤처에 종사한다면 충분한 리서치가 더욱 중요하다.