Frontend Framework(Library)

🌈 Angular

2010년 구글에서 개발한 SPA(Single Page Application) 방식의 Javascript Framework.
TypeScript 기반으로 매우 안정적이고 탄탄한 프론트엔드 앱 개발이 가능하며 모바일 웹, 네이티브 모바일, 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있다.
Spring MVC와 굉장히 유사한 방식으로 프로그래밍이 진행된다.

 

💧 장점

• Component 기반
  기능에 따라 코드를 분리하고, 재사용 하는 것이 굉장히 쉽다.
• 양방향 바인딩 지원
• 웹페이지 속도
  Angular로 만든 SPA는 다른 페이지로의 전환 속도가 굉장히 빠르다.
• TypeScript
  TypeScript를 기반으로 하기 때문에 엄격하지만 그만큼 직관적이고 오류를 줄일 수 있다.
• 프레임워크
  Angular는 프론트엔드 웹 개발을 위한 종합 프레임워크이므로 전체를 아우르는 구조를 제공한다. 뷰에서부터 테스트까지 많은 모듈을 가지고 있으며, 기본 제공되는 모듈이기 때문에 각 모듈의 정합성을 보장할 수 있고 자연스러운 데이터 연결이 보장된다.
• 가장 체계적이고 잘 정리되어있는 문서와 튜토리얼

💧 단점

• 방대한 학습 분량
  주력 언어가 Typescript인데 Typescript만 배우면 끝이 아니라 Angular가 가지고 있는 여러가지 개념들을 익히고, 그 개념들이 어떻게 Typescript로 표현되는지도 익혀야 한다.
  그리고 Angular의 장점이 라우팅, 상태관리, 폼 유효성 등 필요한 도구를 모아놓은 All In One 프레임워크라는 것인데, 그렇기 때문에 가장 배울 것이 많고 어려운 편이다.
• 느린 초기 로딩 속도
  Angular로 만든 SPA의 초기 로딩 속도는 다소 느린 편이다.
• 검색엔진 인덱싱
  Angular로 만든 SPA를 제대로 인덱싱하지 못하는 크롤러가 생각보다 많다.

🔥Angular와 AngularJS의 차이

AngularJS의 문제점을 보완해서 나온 것이 Angular이다. 호환성이 없는 새로운 프레임워크로 이해하는 것이 좋다.

• AngularJS는 Javascript 기반이고 Angular은 Typescript 기반이다.
• AngularJS는 Controller와 $scope 기반 개발이고 Angular은 Component 기반 개발이다.
• AngularJS보다 Angular가 좀더 향상된 모듈 시스템과 DOM 제어 기능을 제공하며 API 또한 단순화되었다.
• 선택적 데이터 바인딩을 지원하고 디렉티브와 서비스, 의존성 주입은 간소화되었다.

 

🌈 Vue

2014년 Evan You라는 개인이 개발한 Framework. 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠르다.

 

💧 장점

• 적은 러닝커브
  jQuery에 익숙한 기존 개발자도 쉽게 배울 수 있다.
• Component 기반의 프레임워크
• 가볍고 빠른 개발
• 양방향과 단방향 바인딩 지원
• Virtual DOM

💧 단점

• 다른 프레임워크보다 적은 생태계
• 낮은 인지도
• 적은 수의 Plugin/Components
• 언어 장벽
  메이저 개발자들이 대체로 중국 커뮤니티에 집중되어 있다.
• 일정하지않은 업데이트 주기
• 자체 템플릿 사용
  자체 템플릿을 사용하기 때문에 큰 규모의 애플리케이션 개발에 문제를 겪을 수 있고 JS와의 직접 연계 측면에서도 불편하다.
• 필요 이상의 유연성
  프로젝트가 더 복잡해지거나 더 많은 에러가 발생할 수 있다.

 

🌈 React

"지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것" 을 목표로 2013년 페이스북에서 개발한 Javascript 라이브러리. MVC Architecture(ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다. 페이스북의 지속적인 관리와 함께 생태계가 활성화되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가하고 있다.

 

💧 장점

• Virtual DOM
  DOM 트리를 추상화하여 Javascript 객체로 만들어 두고 변경되는 부분은 Virtual DOM에서 처리하여 성능을 높인다.
• SSR - Next.js
• 🔥 SSR이란?
  서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다.
• JSX - JavaScritp + XML
  JSX(자바스크립트 확장 문법)을 사용하여 컴포넌트를 생성할 수 있다.
• React Native
  앱 개발까지 가능하게 해준다.

💧 단점

• View Only
  데이터 모델링, Routing, Ajax 등등의 기능을 제공하지 않는다. View 이외의 기능은 써드파티 라이브러리(Third party library. 패키지, 모듈로 불리기도 함)를 이용하거나 직접 구현해야한다.
• IE8 이하 지원하지 않음
  IE8 이하 버전을 지원해야 할 경우 v0.14 버전을 사용 해야한다.
• Javascript에 대한 지식이 없을 땐 배우기 힘들다.
  View 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 JavaScript 배경지식이 부족할 경우에는 사용이 힘들다.