안녕하세요.

오늘은 Angular 프레임워크에 대해 알아보겠습니다.

Angular

1. Angular 란?

Angular란 TypeScript 기반으로 개발된 개발 플랫폼이면서 동시에
확장 가능한 컴포넌트 구조로 웹 애플리케이션을 만드는 프레임워크 입니다.

라우팅, 폼 관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 조화롭게 통합한 모음집입니다.
애플리케이션 개발, 빌드, 테스트, 수정에 필요한 개발자 도구를 제공합니다.

2. Angular와 AngularJS의 차이점

Angular1 버전을 AngularJS, Angular 2버전 이상을 Angular라고 부릅니다.

AngularJS란 Google에서 개발한 SPA(Single Page Application) 방식의 프론트엔드 개발을 위한 자바스크립트 프레임워크입니다.
웹 어플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 어플리케이션까지 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있습니다.

• Angular는 AngularJS의 단순한 업그레이드 버전이 아닙니다.
• Angular는 정적 타이핑과 ECMAScript6 스펙을 충족시키기 위해 TypeScript로 재작성 되었고, AngularJS와는 호환성이 없는 브레이킹 체인지를 다수 포함하고 있습니다.

Angular와 AngularJS의 차이점 정리

1) AngularJS의 Controller와 $scope 기반 개발에서 컴포넌트 기반 개발(CBC, Component Based Development)로 전환되었다.

2) AngularJS의 angular.module과 jQlite보다 향상된 모듈 시스템과 DOM 제어 기능을 제공하며, API 또한 단순화되었다.

3) 선택적 데이터 바인딩(one-way, two-way)을 지원하고 디렉티브(directive)와 서비스, 의존성 주입(DI, dependency injection)은 간소화 되었다.

4) 주력 개발 언어로서 TypeScript를 도입하여 대규모 개발에 적합한 정적 타입과 인터페이스, 제네릭 등 타입 체크 지원 기능을 제공한다.

5) ECMAScript6에서 새롭게 도입된 모듈, 클래스 등과 ECMAScript7의 데코레이터를 지원한다.

6) 강력한 개발환경 지원도구인 Angular CLI를 제공한다.

즉, Angular는 AngularJS의 후속 버전이기는 하지만, 호환성이 없는 새로운 프레임워크로 이해하는 것이 좋습니다.

Angular는 AngularJS보다 배우기 쉬우며, 성능은 향상되었고, 애플리케이션 구조는 보다 단순해졌습니다.

3. Angular 프레임워크의 특징 및 장단점

Angular의 특징 및 장점

1) SPA(Single Page Application) 를 위한 Framework입니다.
프레임워크 라는 것이 장점이 될 수 있고, 단점이 될 수도 있습니다.
프레임워크는 개발자에게 일종의 틀을 제공해 줌으로 써 작성하는 코드 스타일의 일관성을 유지할 수 있게 해주며 유지 보수의 측면에 있어서도 확실한 장점이 된다.
또한 Angular 가 제공하는 여러가지 기능들 (Router, Template, Http 통신 등..) 은 개발자의 고민을 덜어주는 장점이 됩니다.

2) 뒷 배경이 Google이다. 개발사가 Google 이라는 것은 큰 장점이라고 생각한다. 전 세계에서 가장 똑똑한 개발자들이 모여서 만든 프레임 워크인 만큼 성능이 보장되고 오랜 기간 프레임 워크를 서포팅이 가능하겠다는 판단을 할 수 있다. (AngularJS 사례를 보면 그 믿음이 …)

3) Component 와 Service 단의 분리Angular 에서 Component 는 View 를 처리하는 로직만을 다루며 Service 를 다루는 로직은 분리하여 작성한다. 여기서 사용되는 Service 는 기존의 MVC 패턴에서 사용되는 Service 의 개념과 비슷하다. Component 에서 Service 단 코드를 분리함으로서 코드의 중복성을 줄여주며 유지보수에 용이하게 해준다.

4) DOM 조작 방식React 와 Vue 는 Virtual DOM 을 활용하여 DOM을 조작한다. 그에 반해서 Angular 는 Incremental DOM 방식을 채택하여 DOM 을 조작한다.

5) 데이터 바운딩 (양방향 바운딩)React 에서는 데이터가 위에서 아래로 흐른다. 즉 부모 컴포넌트에서 자식 컴포넌트에 props 를 흘리는 방식으로 단방향 데이터 바운딩이 이뤄진다. 그에 비해 Angular 에서는 데이터가 양방향으로 흐른다. 부모 컴포넌트에서 자식 컴포넌트로, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 흘려 보낼 수 있다.

6) 주력 개발 언어Angular의 주력 개발 언어는 Typescript 이다. 이는 Typescript 가 가진 장점을 Angular 을 채택함으로써 그대로 누릴 수 있다는 것이다. Typescript 는 정적 타입 바운딩을 통해서 개발 시 에러를 줄이며, 안정성을 추구하고 자동 완성 기능을 통해 개발자의 개발 경험을 향상 시킨다는 장점이 있다.

7) Angular CLI(Command Line Interface)앵귤러를 이용하는데 있어서 큰 장점은 CLI 가 아닐까 생각한다. CLI 를 통해서 컴포넌트, 서비스 등.. 필요한 기능들을 간단하게 생성하고 이용할 수 있다. 그리고 CLI 를 이용하기 때문에 디렉토리의 구조나 코딩 스타일을 획일적으로 유지할 수 있다.

8) 생각보다 친절한 Document생각보다 친절한 앵귤러의 Docs 또한 앵귤러의 장점이다. 한글화 번역이 완벽하게 되어있으며, 프레임 워크로써 러닝 커브가 높다는 인식을 타파하기 위해서인지 문서가 세세하게 잘 정리되어 있다. 심지어 코딩 스타일 가이드까지 정리해서 알려주고 있을 정도로 친절하다.

9) SSR (Server Side Rendering) 지원Angular 는 SPA 를 위한 프레임 워크이다. SPA 는 CSR 을 기반이지만, Angular 는 SSR 를 위한 기능들을 지원하고 있다.

10) Web 표준Angular 는 Web 표준 (일반적인 웹 페이지나 웹 사이트는 HTML, CSS, Javascript 를 포함하고 있어야 한다.) 을 정확하게 지키고 있다.

Angular의 단점

1) 생각보다 높은 Learning curve
Angular 을 이야기 할 때 보통 러닝 커브가 높다고 이야기 한다. 왜 Angular 의 러닝 커브가 높다고 이야기 하는지 생각해보면, Angular 를 통해서 처음 개발을 접하고자 할 때 진입 장벽이 타 Framework, 혹은 Library 보다 알아야 할 것이 많기 때문이다. Angular 의 Template 문법, CLI, Rxjs, HTTPClient, Routing 등.. 진입 할 때 배워야 할 것이 많아 보인다. 하지만 초기 진입 장벽만 해결한다면, Framework 의 특성 상 빠른 속도로 개발하고 유지 보수에 있어서 특화 되어 있다는 장점이 있다.

2) 자유도 저하
Angular 는 Framework 이다. Framework 의 특성 상 개발자는 개발 시 일종의 틀에 맞춰서 개발을 해야 하며 이는 개발자가 어느정도의 개발 자유도를 포기해야 함을 의미한다.

4. Angular DOM 조작

React 와 Vue 는 Virtual DOM 이라는 기술을 채택하여서 비교 알고리즘을 거친 후 DOM 을 조작한다. 그에 반해서 Angular 는 Incremental DOM 이라는 기술을 채택하여 DOM 을 조작한다. 그럼 Incremental DOM 은 무엇일까?

먼저 React 가 채택한 Virtual DOM 에 대해서 간단하게 알아보자.

React 는 컴포넌트 별로 가상 DOM 을 만들어 놓고 랜더링 시 새로운 가상 DOM 트리를 생성해 이전의 가상 DOM 과 어떤 차이가 있는지 비교 알고리즘을 통해서 비교 후 변경 사항이나, 새로운 추가 사항이 있을 시 이를 실제 DOM 에 반영하는 식으로 랜더링 한다. 이를 재조정 (Reconcilation) 이라고 하는데 React 에서는 재조정 과정을 하는데 있어서 Fiber 엔진을 사용한다.

즉, React 에서는 재조정 과정을 위해서는 메모리에 가상 DOM 을 두 개를 올려야 한다는 것이다.

Incremental DOM 방식은 랜더링 과정에서 변화를 감지하고 이를 DOM 트리에 반영하는 과정에 있어서 추가적인 메모리 공간을 요구하지 않는다.

랜더링 과정에서 변화를 감지하기 위해 실제 DOM 을 이용하며 변경 사항이 있을 시 이를 즉시 반영한다. Virtual DOM 을 활용할 때 보다 훨씬 메모리 관리에 있어서 효율적이다.

왜 Google 의 Angular 팀은 Incremental DOM 을 채택했을까? Angular 팀은 모바일의 발전에 따라서 저용량의 메모리에서도 Application 의 퍼포먼스가 저하되지 않아야 한다고 생각했다. 이를 해결하기 위해서 두 가지 옵션을 최적화 했어야 했는데, 한 가지는 번들링 된 사이즈 이며, 다른 한 가지는 메모리 관리였다.

번들링된 사이즈는 Tree Shaking 을 통해서 해결할 수 있는 이슈이다. Tree-shaking 을 통해서 실제로 DOM 에 반영되지 않을 Component 들은 번들링에서 제외시킨다. 메모리 관리에 있어서는 Incremental DOM 은 추가적인 메모리 공간을 요구하지 않기 때문에 최적화가 가능한 부분이였다.

이에 Angular 팀은 Incremental DOM 을 랜더링 방식으로 채택하게 되었다.

5. Angular에 대한 오해

1) Angular 는 무겁다?
아래 포스팅을 살펴보면 앵귤러의 버전이 높아질 수록 번들링 되는 결과물의 사이즈가 작아지고 있다는 것을 확인할 수 있다.
포스팅 보기

2) Angular 의 퍼포먼스는 다른 Library or Framework 에 비해서 느리다?
아래 사진은 프레임워크 및 아키텍처의 랜더링 퍼포먼스를 수치상으로 기록 해놓고 있다. 위 사진을 살펴보면 앵귤러는 82 point 를 지니고 있다. 그에 비해서 React + Redux 는 67 point 를 지니고 있다. 결론적으로 가장 많이 사용되는 아키텍처인 React + Redux 보다 수치상으로 15 Point 를 앞선다고 볼 수 있다. (물론 환경이나 여러가지 변수를 고려하지 않은 수치 데이터임을 확인해야 한다.)

6. 개발자들의 Angular 사용추이

과거 React, Vue.js 와 함께 개발자들이 자주 사용하는 프론트엔드 프레임워크였지만,
React, Vue.js 에 비해 점점 사용이 줄어드는 추세를 보이고 있습니다.

개발자들의 프론트엔드 프레임워크 사용량 추이

npm Trend분석