TIL | #2 React, Angular, Vue.js 비교

2021.02.11(목)
약 2주간 진행한 웹 제작 팀 프로젝트를 어제 마치고 다시 TIL을 시작한다 o(￣▽￣)ブ

자바스크립트 프론트엔드 프레임워크 및 라이브러리

이번에 알아볼 것은 자바스크립트 기반 웹 프론트엔드 프레임워크 중 대중적으로 가장 많이 알려지고 사랑받고 있는 Vue.js, React, Angular가 무엇이고, 어떤 차이가 있는지 비교해보자!

• 운영하는 사람이나 업체는 어떤 곳인지
• Virtual Dom 지원 유무 (Virtual Dom에 관한 적절한 예시 영상)
• SSR(Server Side Rendering) (SSR 설명 추천 링크)
• 기타 특징

이미 유명한 프레임워크들이라 커뮤니티는 대체로 잘 갖추어져있어서 따로 설명하지 않는다.

React

• 라이브러리이며 페이스북의 개발자 Jordan Walke가 처음 만들었다. 페이스북에서 지원하며 공동체의 의해 유지보수 된다.
• Virtual Dom 지원
• SSR - Next.js
• JSX(JavaScritp + XML)
• React Native (앱 개발까지 가능하게 해준다)

라이브러리이지만 컴포넌트를 사용한다면, 프레임워크처럼 규칙을 지켜야한다.
장점은 Virtual Dom이다. Dom 트리를 추상화하여 자바스크립트 객체로 만들어 두고 변경되는 부분은 virtual dom에서 처리하여 성능을 높혔다.
SPA(Single Page Application) 방식으로 진행한다면 검색엔진 노출(SEO : Search Engine Optimization)에 관련된 문제를 생각 했을 때 SSR을 염두해 둘 수 밖에 없었는데 Next.js를 사용하여 해결 할 수 있다. 그리고 UI를 구성하는 개별적인 뷰 단위인 컴포넌트 단위로 작성하여 생산성과 유지보수에 도움이 된다. JSX(자바스크립트 확장 문법)을 사용하여 컴포넌트를 생성할 수 있다. React Native를 이용해서 앱 개발까지 이어지는 부분이 엄청 큰 메리트가 있지 않을까, 그래서 더욱 사랑 받는 것이라 생가한다.

Angular

• 타입스크립트 기반 오픈소스 프레임워크이며 구글 앵귤러팀이 만들고, 구글에서 지원하며 공동체에 의해 유지보수 중에 있다.
• 양방향 바인딩 지원
• TypeScript 기반
• RxJs(Reactive Extensions For JavaScript) : 스트림을 통한 비동기 처리 방식 지원
• 가장 체계적이고 잘 정리되어있는 문서와 튜토리얼
• 큰 러닝커브 (배울 것이 많고 어렵다)

라우팅, 상태관리, 폼 유효성 등 필요한 도구를 모아놓은 All In One 프레임워크인 것이 큰 장점이다. 그렇기 때문인지 React와 Vue.js와 비교했을 때 가장 배울 것이 많고 어려운 편이다. 가볍고 빠르게 작업을 해야하는 프로젝트 보다는 큰 프로젝트에 사용하기 적합하다.
TypeScript를 기반으로 하기 때문에 엄격하지만 그만큼 직관적이고 오류를 줄일 수 있지 않을 까 생각한다.
또한 웹사이트가 빠르고 효율적으로 렌더링 되게 설계되어있다. MPA를 구성하기에는 복잡하고, SPA에서는 매우 빠르게 작동한다. 애초에 구글이 SPA를 위해 만든 것이라고 한다.

Vue.js

• 오픈소스 자바스크립트 프레임워크이며 Google의 전 개발자 Even You가 만들었다. 그를 주축으로 유지보수 중에 있다.
• Virtual Dom 지원
• SSR - Nuxt.js
• 양방향과 단방향의 바인딩 지원
• TypeScript 지원
• NativeScript
• Single File Component
• 작은 러닝커브(학습 및 적응이 빠름)

React의 장점인 Virtual Dom과 Angular의 양방향 바인딩을 가져왔다는 점에서 볼 때 앞으로도 발전을 기대해 볼 만한 프레임워크라고 생각한다.
자바스크립트의 기본 스타일을 적극적으로 적용하고 있어서 학습하고 적응하기 쉽다!
그리고 Single File Component는 .vue 파일에 HTML과 CSS 그리고 Script까지 하나로 묶어서 컴포넌트 단위로 직관적인 구성이 가능하다는 것인데, 개인적으로는 파일 분리를 선호하지만 디자이너나 퍼블리셔와 협업하는 과정에서는 생산성이나 유지보수에 큰 도움이 될 것이다.

소감

직접적으로 사용하고 겪어보고 비교를 해야 더 정확하게 실감하겠지만, 선행학습이라 생각하고 알아보는 시간을 가졌다. 일단 React는 학원에서 배울 것 같아서 개인적으로 제일 쉽게 배울 수 있다는 Vue.js로 포트폴리오 사이트를 작성해보겠다!
다 작성하고 보니 정말 좋은 글을 발견.. 삼성SDS 인사이트 리포트, 아니 여기 엄청 유용한 정보가 많자나?!!