Angular와 Angular.JS의 차이 Google은 왜..?

Angular와 Angular.JS 분명 과거 SPA의 가장 선발자였던 Angular.js는 어째서 대규모 개편을 통해 대세가 될수도 있던 자리를 박차고 Angular로 만들어 많은 개발자들이 React와 vue로 떠나게 하였을까 Angular.js면 안되었던것일까 그 이유에대해 구글의 큰그림에대해 조사하고 정리해보았다.

 

 

 

Angular.js vs Angular

---

 

Angular라는 이름을 처음 접하고 Google에 검색을해보면 Angular.js와 Angular가 보인다. 이건 어떤차이인지 Java와 JavaScript같은것인가 생각하기도 한다. 하지만 그것이 아니라는것은 쉽게 파악을하게됩니다.

Angular는 Typescript을 지향하는 동적웹 응용프로그램을 만드는 프레임워크이고 Angular.js는 javascript를 기반하고있습니다.

 

• 이미 알고있으시겠지만 Angular.js는 Angular의 v1.x 버전를 지칭하는것이고 일반적으로 불리는 Angular는 Angular의 v2.x 이상 부터 부른 말입니다.
  
  
• Angular는 ES6의 상위집합인 TypeScript를 사용하고 이는 본질적으로 Component의 차이가 있습니다.
  
  
• 또 다른 차이점으로는 Angular에서 작업하는것은 components의 계층구조를 기반으로 한다면 AngularJS에서는 코드의 재사용을 가능하게하고 고유한 코드를 작성하는 directive pack이 있다는 것입니다.
  
  
• Angular에도 지시문은 있지만 AngularJS에는 rootScope와 contorller를 사용하여 고유의 지시문을 사용합니다.
  
  
• AngularJS는 모듈정도의 크기임에 반해 Angular는 프레임워크입니다.

 

 

왜 AngularJS는 Angular가 되었을까

 

다양한 이유가있는데 아래 링크들을 참조하였습니다.

https://opensource.com/article/20/8/upgrade-angular

https://www.upgrad.com/blog/angular-vs-angularjs/

 

업그레이드 한 이유

이름	설명
Archiectural	AngularJS의 범위와 컨트롤러개념은 상대적으로 딱딱하며 재사용성이 좋지 않습니다. Angular는 component와 service의 순서를 기반으로하는데 이는 테스트 가능성과 유지보수에 성능을 높이며 만은 요소를 재사용 할 수 있게 만들었습니다.
Framework	AngularJS의 경우에도 다재다능하지만 Angular에 비해 많은부분이 덜안전하고 Angular는 component간의 정보를 교환하는 정확한 방법인 구조화되어있는 컴포넌트기반의 방법론을 시행합니다(Structure) 이를 통해 엔터프라이즈급 애플리케이션을 개발할때 생성과 유지관리가 용이합니다.
Language	AngularJS에서는 우리에게 친숙한 JavaScript를 사용하여 상대적으로 쉽게 배울수있지만 JS의 경우 Type체크기능이 없어 컴파일시 error를 확인할수 없습니다. Angular의 경우 TypeScript는 언어의 균일성과 유연성을 잘 활용할수있어 코드를 향상 시키고 런타임오류를 줄이며 여러 시스템에서 잘 작동합니다.
모바일 서비스 지원	AngularJS는 모바일 앱용으로 제작을 고려하지 않았습니다. Angular는 5version 이상부터는 progressive web application 흔히 들어본 PWA를 위한 핵심 구성요소인 service worker introduction를 제공합니다.
Material design	Angular5 이후 부터는 Angular에서 CDK를 도입하여 개발팀이 UI의 구성요소를 생성할수있게 Bootstrap과 유사한 Material Design을 지원합니다 이는 반응형과 다중 플랫폼의 응용프로그램을 개발할 수 있게 도와줍니다.
속도	AngularJS는 효율적인 프레임워크이지만 그럼에도 다양한 범위와 데이터의 바인등으로 인해 대규모 애플리케이션에서 코드가 느리게 동작합니다. Angular6에서는 더 빠른 컴파일, 감소된 패키지 크기, 더나은 디버깅, 더 큰 다형성을 제공하는 Angular IVY를 도입하였습니다.
데이터 바인딩	AngularJS는 데이터 바인딩은 traffic jams을 일으키는 반면 angular는 어트리뷰트 바인딩,이벤트,템플릿,프로퍼티,등등 다양한 바인딩형식을 지원함으로서 효율성을 높이고 교환작업을 분할시켜 작업 속도를 향상시켰습니다.
도구지원	AngularJS를 사용할때에는 WebStorm과 같은 다른 IDE에 의존하지만 Angular는 CLI를 이용하여 개발자가 파일과 엔터티 ,요소, 컴포넌트, 솔루션과같은 항목을 만드는 부담이 굉장히 줄어들어 편리합니다.
업데이트 투자	Angular는 중요한 앱의 최적의 안전성을 제공하는것을 목표로 Google에서 정기적으로 업데이트와 릴리즈를 하여 이 글을 작성하는 2021년 11월 현재는 12.2.12v까지 제공되었다.

 

그럼 Angular.JS도 장점과 단점이있고 , Angular또한 장점과 단점이있을것 같아 정리하였습니다.

Angular vs Angular.JS 의 장단점

	장점	단점
Angular	Angular는 데이터 바인딩을 위해 상대적으로 효율성이 높고 다양한 알고리즘과 components기반의 아키텍쳐를 도입하여 Angular.JS에 비해 5배이상 빠릅니다.	angular는 TypeScirpt를 도입하여 정적타입을 사용하고 RxJS를 사용하여 JS에서 promise를 사용하였던것을 Observable을 또다시 학습하여야 사용하기 편하기에 러닝커브가 높습니다.
	Angular애플리케이션의 구성요소는 독립적이고 자급자족 즉 의존성을 낮춤으로서 캡슐화가 잘 되어 재사용성이 높고 부분적인 테스트를 친화적이게 재작되었습니다.	Angular는 components가 복잡한 방식으로 관리되어있기때문에 verbose language 즉 장황한 언어라고 불립니다.
	독립적인 component를 통해 변경, 유지보수와 확장성을 넓히는 난이도가 낮습니다.	Angular CLI는 사용하기 편리하지만 문서화가 불친절하여 개발자들사이에서 불평이 많이 나옵니다.
	Angular는 응용프로그램의 서버측에서 렌더링을 위한 확장기능이 내장되어있습니다. 이는 개발자가 콘텐츠의 클라이언트와 서버를 동기화하여 사용할 수 있습니다. 이를 이용하면 SEO(Search Engine Optimization) 검색엔진을 최적화 하기 상당히 용이하여 자료를 수집하고 순위를 매기기 좋습니다.
	Angular는 JIT 컴파일러를 지원하여 필요한 구성요소만 로드되게 만들 수 있어 애플리케이션이 더 빠르게 랜더링하도록 지원합니다.
	타입스크립트를 도입하여 개발자가 더 clean한 코드를 작성하고 생산성을 높이기 좋습니다.
Angular.JS	JavaScirpt를 기반으로 하여 AngularJS는 상대적으로 배우는것이 쉽고 빠르게 사용할수있습니다.	AngularJS 응용프로그램을 실행하려는 시스템에서 JS가 비활성화되어있으면 응용프로그램이 실행되지 않습니다.
	양방향 데이터 바인딩은 개발자의 개입이 없더라도 빠르고 쉽게 데이터를 운반할 수 있습니다	AngularJS를 사용하려면 개발자가 MVC아키텍쳐에 익숙해야합니다.
	프로토타이핑이 지원이 잘되어있어 빠르게 코딩하며 개발자의 생산성이 좋습니다.	AngularJS는 @routeProvider.when을 사용하여서 라우팅 정보를 정의합니다 Angular는 URL을 사용해서 클라이언트 를위한 지시문을 모방하여 @Route 컴포넌트를통해 쉽게 라우팅정보를 적용할 수 있습니다.
	AngularJS의 MVC와 MVVM아키텍쳐는 데이터와 디자인을 분리함으로서 복잡한 웹 애플리케이션을 더 쉽게 개발하고 유지보수할 수 있습니다. 이는 현재 React와 Vue가 만들어질때에도 많은 영향을 끼쳤습니다.	AngularJS는 Directive만을 사용하지만 Angular는 DI를 사용하여 구조적으로 의존성을 주입할 수 있습니다.

Angular와 Angular JS는 모두 개발자에게 제공하는 명확한 장점이 있지만 Angular는 여러 범주에서 1위를 차지합니다. 또한 Angular의 SPA 즉, 동적 웹 및 단일 페이지 애플리케이션은 모바일 친화적입니다. 반면에 AngularJS 코드는 모바일 응용 프로그램을 지원하지 않으며 이것이 Angular가 AngularJ에 비해 가진 가장 큰 장점입니다.

 

위에서 업그레이드를 한 이유에보면 Angular v6.x 부터 Angular IVY를 지원한다고 했는데 이 것은 무슨기능을 하는지 알아보며 정리했습니다.

 

Angular IVY?

Angular 공식 문서에 "Angular Ivy는 Angular의 다음 세대 컴파일러이자 렌더링 파이프라인의 코드 네임 렌더링 엔진입니다."라고 표기되어있습니다.

 

• 이 랜더링 엔진은 효율성을 중점으로 두고 작성되었으며 CPU를 조금 사용해도 동일한 작업을 할 수 있게 만들었습니다. 그렇기때문에 성능이 떨어지는 장치에서 Angular를 불러올때 부담을 줄여줄 수 있습니다.
  
  
• 위를 위해 CLI는 빌드 프로세스의 일부 레거시(ES5)와 최신버전(ES2015+)의 JavaScript번들을 모두 생성합니다. 이 번들을 클라이너트 측에서 차등적으로 불러와서 최신 브라우저의 로딩 속도와 TTI를 개선합니다. 이 작업은 Manfred Streyer의 ngx-build-modern을 기반으로 구축되었습니다. 즉 AOT컴파일을 View Engine이 아니라 IVY로 한다는 것입니다.
  
  
• 대규모의 프로젝트의 업그레이드 경로를 단순화하여 Router의 이전 버전과 호환하게 만들어 AngularJS로 만들어진 앱을 지연시키면서 로딩할 수 있음으로 Angular로 마이그레이션하기 수월하게 만들었습니다.
  
  
• 결국 기존 사용하던 View Engine에서 Ivy로 전환한다면 런타임에서 더 쉽게 읽고 디버그할수있게 코드를 생성해주고, 빌드하는시간을 줄여주며 , 페이지를 로드하는 크기를 개선, 향상된 템플릿 타입체크, 하위 Angular호환성을 높일수 있다.

 

이렇게 굉장히 많은 기능을 지원하며 SW를 개발하는데 있어 세계적인 큰 기업으로서 많은 투자를하며 개발자를 위한 프레임워크를 제작하는데 Angular.JS보다는 처음이 조금 어려울지 몰라도 SPA와 MSA를 지향하는 요즘 Angular 만큼 좋은 프레임워크는 있을까 싶다.