Part Ⅱ. Angular Basic, 앵귤러개요

Part Ⅱ. Angular Basic

앵귤러 구조를 파악한 후 간단한 예제를 통해 빠르게 개념을 확립합니다. 앵귤러의 핵심 구성요소인 컴포넌트, 서비스, 파이프, 디렉티브, 모듈을 앵귤러 CLI 툴과 같이 학습합니다.

Angular

앵귤러는 구글에서 만든 자바스크립트 프레임워크다. 2010년 10월 정식버전을 발표하였다. 2016년 9월 앵귤러2 버전을 발표하였다. 앵귤러2는 이전 버전의 처리속도를 개선하기 위해서 여러 단계를 거쳐 호출해야 하는 복잡한 단계를 제거했다. 더불어 자바스크립트의 장점인 높은 자율도에 의해서 발생되는 단점인 디버깅에 어려움을 해결하기 위해서 타입스크립트를 도입했다. 타입스크립트는 마이크로소프트가 2012년 10월 출시했다.

구글 트랜드 검색으로 살펴본 결과입니다. 경쟁관계에 있는 3가지 기술로 검색했습니다.

특징

• 양방향 데이터 바인딩(Two-way Data Binding)
  앵귤러는 Model-View-Controller 아키텍처로 구축되었습니다. 그리고 프레임 워크는 모델과 뷰를 동기화합니다. 모델의 데이터가 변경됨에 따라 뷰도 변경됩니다. 양방향 데이터 바인딩을 통해 개발자는 지속적인 뷰 및 모델 동기화를 제공하기 위해 추가 코드를 작성할 필요가 없으므로 개발 시간을 단축 할 수 있습니다.

• 디렉티브(Directive)
  디렉티브를 사용하면 개발자가 DOM(Document Object Model)에 특수 동작을 할당하여 개발자가 HTML로 동적 인 내용을 만들 수 있습니다.

• 의존성 주입(Dependency Injection)
  종속성은 서로 다른 코드가 서로 상호 작용하는 방식과 한 컴포넌트의 변경이 다른 컴포넌트에 미치는 영향을 정의합니다. 일반적으로 종속성은 컴포넌트 자체에서 직접 정의됩니다. 따라서 의존성의 모든 변화에는 컴포넌트 변경이 필요합니다. 앵귤러를 사용하면 의존성을 외부 요소로 정의한 인젝터를 사용하여 종속성에서 컴포넌트를 분리 할 수 ​​있습니다. 의존성 주입 서비스로 컴포넌트의 재사용이 가능하고 관리 및 테스트가 쉬워졌습니다.

Angular를 사용해야 하는 이유

• 크로스 플랫폼 지원
  앵귤러를 사용하면 어떠한 브라우저에서도 자바스크립트 코드가 작동함을 보장합니다. 이 서비스로 인기가 있었던 기술은 jQuery를 예로 들 수 있습니다.

• 처리 속도
  앵귤러로 짠 코드의 처리 속도는 순수 자바스크립트로 짠 코드의 필적합니다.

• 개발 생산성 앵귤러의 모듈기반 프로그래밍은 코드의 재활용을 극대화 합니다. A 프로젝트에서 개발한 로직을 B 프로젝트에서 바로 사용할 수 있으면 기존 코드를 다듬는 작업은 필요하지 않습니다. 앵귤러의 Lazy Loading Module 기술을 이용하면 쉽게 AMD(Asynchronous Module Definition) 기술의 혜택을 얻을 수 있는 것처럼 항시 최신 기술의 혜택을 쉽게 적용할 수 있습니다.

• 유지 보수성 앵귤러는 프레임워크로써 거의 모든 기술 항목에 대해서 표준적인 적용방법을 제공합니다. 다수의 개발자가 협업 시 표준적인 적용방법은 협업을 위해서 매우 중요합니다. 휴가를 떠난 개발자가 짠 코드를 대신 유지보수하는데 커다란 어려움이 없게 됩니다.

패러다임의 변화

최근 들어 브라우저에서 동작하는 자바스크립트의 역할은 화면처리에 머물지 않고 화면을 통제하는 역할까지로 확대되었고 데이터를 재 사용하기 위해서 데이터를 관리하는 역할까지 수행하게 되었습니다. 앵귤러는 서버 사이드에서 사용하던 MVC 아키텍처를 클라이언트 사이드에 적용한 프레임워크입니다. 이에 따라 일부 서버의 기능이 클라이언트로 넘어오게 되었고 그 만큼 주고 받는 트래픽은 감소하게 되었습니다. 서버의 역할은 데이터를 제공하는 공급자의 역할로 축소되고 있는 추세입니다.

앵귤러는 프로젝트가 크면 클 수록 그 위력을 발휘하는 기술입니다. 협업 시 코드의 가독성은 매우 중요합니다. 그러한 만큼 앵귤러가 프레임워크로써 제공하는 모듈, 컴포넌트, 템플릿 관련 기술이 매력적으로 느껴지게 됩니다.

앵귤러의 단점으로 높은 학습비용을 예로 듭니다. 그러나 이는 섣부른 판단입니다. 앵귤러가 채택한 타입스크립트는 객체지향 언어에 익숙한 개발자들이 쉽게 자바스크립트 기술을 이용할 수 있다는 차원에서 오히려 득 입니다. 타입스크립트 학습은 기존의 자바스크립트를 계속해서 이용하시던 분이라면 하루면 되고 그렇지 않은 객체지향 개발자분들도 몇 일이면 적응할 수 있는 수준입니다. 앵귤러를 쉽게 배우고 익혀서 보다 많은 분들이 사용하기를 바라는 마음으로 앵귤러의 세계로 안내해 보도록 하겠습니다.

오히려 자유도가 높아서 개발자의 개성이 코드에 녹아들게 되는 React는 협업 차원에서 불리하다 할 수 있습니다. 앵귤러와 경쟁관계에 있는 기술들이 여럿 있지만 몇 가지만 언급해 보자면, 자바스크립트를 잘 다루는 개발자가 많지 않다는 전제하에서 React는 소규모 팀 작업 시 적합하며 Vue.js는 중간 규모에 프로젝트 개발에 적합하며 앵귤러는 대규모 프로젝트에 적합한 기술입니다. Vue.js는 진입이 쉬운 기술이라는 점이 강점이라고 홍보하지만 실제로 프로젝트에 적용하자고 고려하면 체계적인 개발이 필요해지고 그에 따라 점점 개발자가 직접 알아보고 적용해야 하는 많은 번거로움을 떠 안게 됩니다.

Angular Pros and Cons

다음사이트의 내용을 번역했습니다.
https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-angular-development/

Pros

Component-based architecture that provides a higher quality of code

컴포넌트는 서로 독립적 인 인터페이스의 작은 부분으로 생각할 수 있습니다. 아이템 목록과 단어 검색으로 항목을 검색하는 해당 검색 상자가 있는 간단한 응용 프로그램이 있다고 가정 해보십시오. 나열된 이름이 있는 상자, 검색 상자 및 다른 두 상자가 있는 주 시트는 모두 개별 컴포넌트로 취급합니다. 버전 2부터 시작하여 Angular는 MVC와 매우 유사하지만 응용 프로그램 전체에서 컴포넌트의 재사용 성을 향상시킵니다. 이를 통해 많은 움직이는 부분이 있는 UI를 만들 수 있으며 동시에 개발자를 위한 개발 과정을 간소화 할 수 있습니다.

• Reusability
  비슷한 성격의 컴포넌트는 잘 캡슐화되어 있습니다. 즉, 자급 자족합니다. 개발자는 응용 프로그램의 여러 부분에서 다시 사용할 수 있습니다. 이것은 다른 시스템이 수렴하지만 검색 상자, 날짜 선택기, 정렬 목록 등과 같은 많은 유사한 요소를 가질 수있는 엔터프라이즈 범위의 응용 프로그램에서 특히 유용합니다.

• Readability
  캡슐화는 또한 최근에 프로젝트에 탑재 된 새로운 개발자가 코드를 더 잘 읽고 궁극적으로 생산성의 고지에 도달 할 수 있게합니다.

• Unit-test friendly
  컴포넌트의 독립적 인 특성은 단위 테스트, 응용 프로그램의 가장 작은 부분 인 단위의 성능을 검증하기위한 품질 보증 절차를 단순화합니다.

• Maintainability
  서로 쉽게 분리 할 수있는 컴포넌트는 더 나은 구현으로 쉽게 대체 될 수 있습니다.

TypeScript: better tooling, cleaner code, and higher scalability

Angular는 기본적으로 자바스크립트의 상위 집합 인 TypeScript 언어를 사용하여 작성됩니다. 자바스크립트로 완전히 컴파일되지만 코드를 실제로 입력 할 때 흔히 저지르는 실수를 제거하는 데 도움이 됩니다 . 작은 자바 스크립트 프로젝트는 이러한 향상을 필요로하지 않지만 엔터프라이즈 급 응용 프로그램은 개발자가 코드를 보다 명확하게 만들고 품질을 더 자주 확인하도록 합니다.

TypeScript와 관련된 불만은 개발 도상국 사이에서 매번 나타납니다. 개발자는 또 다른 언어를 배워야합니다. 그러나 TypeScript는 이유가 있기 때문에 익힐 만한 가치가 있습니다. 현재 TypeScript는 Angular의 기본 언어로 간주됩니다.

Google Angular 팀의 전 개발자 인 Victor Savkin 은 자바 스크립트에서 TypeScript 로의 전환이 대기업 규모의 프로젝트를위한 도구로 정당화된다고 설명 합니다. TypeScript는보다 나은 탐색, 자동 완성 및 리팩토링 서비스를 제공합니다.

RxJS: efficient, asynchronous programming

RxJS는 비동기 데이터 호출을 처리하기 위해 Angular와 함께 일반적으로 사용되는 라이브러리입니다. Henry Ford의 자동차 제조 조립 라인처럼 RxJS를 자바 스크립트 코드로 보는 것이 좋습니다. 일부 이벤트가 발생하기를 기다리지 않고 웹 페이지가 응답하지 않는 상태에서 독립적으로 이벤트를 병렬로 처리하고 실행을 계속할 수 있습니다. 원칙적으로 이것은 조립 라인과 같이 작동합니다. 조립 라인은 한 사람과 묶이는 대신 개별 및 상호 교환 가능한 부품으로 나누어집니다. 분명히 비동기 프로그래밍은 RxJS 이전에 존재했지만, 이 라이브러리는 많은 일을 더 쉽게 만들어 주었습니다.

라이브러리는 데이터 스트림이 결합되는 방법과 응용 프로그램이 이러한 스트림의 변수에 반응하는 방식을 설명하는 청사진과 같은 Observables로 작동합니다. 일단 Observables에 대한 이해가되면, 레고 블록처럼 쉽게 재 사용하고 결합 할 수 있습니다. Angular는 RxJS가 필수적으로 필요합니다.

The platform-agnostic philosophy

Angular는 모바일 우선 접근성을 염두에 두고 개발되었습니다. 아이디어는 궁극적으로 웹, iOS 및 Android 응용 프로그램에서 코드 기반과 엔지니어링 스킬 셋을 공유하는 것입니다.

이러한 야심 찬 포지셔닝을 실현하기 위해 2015년 Angular 개발자는 NativeScript 프레임 워크 팀과 협력 했습니다. 코드 자체뿐만 아니라 종속성 삽입, 데이터 바인딩, 서비스 및 라우팅과 같은 개념은 NativeScript와 Angular 모두에서 비슷합니다.

그러나, 이 불가지론은 재사용 자체를 코드화하지 않고, 오히려 동일한 엔지니어링 스킬 셋에 적용됩니다. 다시 말해 NativeScript UI 컴포넌트를 사용하여 모바일 인터페이스를 구축해야하지만 친숙한 JavaScript 및 앵귤러 환경에서 작동하므로 모바일을 다루는 학습 곡선이 그렇게 가파르지는 않습니다.

What is NativeScript?
https://academind.com/learn/flutter/react-native-vs-flutter-vs-ionic-vs-nativescript-vs-pwa/

High Performance

응용 프로그램을 더 빠르게 만드는 데 여러 요소가 도움이 될 수 있습니다. 주요 부스트는 계층 적 종속성 삽입 및 앵귤러 유니버설 지원에 의해 보장됩니다.

• Hierarchical dependency injection
  이 기술은 실제 컴포넌트를 서로 병렬로 실행함으로써 종속성과 실제 컴포넌트를 분리합니다. Angular는 컴포넌트를 재구성하지 않고도 변경할 수있는 종속성 인젝터 트리를 만듭니다. 따라서 클래스는 자체에 종속성이 없지만 외부 소스에서 사용합니다. 이 접근법은 Angular 응용 프로그램에 대해 높은 점수를 제공합니다. Angular 팀의 주장에 따르면 Angular 2는 Angular 1.x보다 5배 빠르며 엔지니어들이 주장 하듯이 이후 버전에서는 성능이 더 향상되었습니다.

• Angular Universal
  Angular Universal은 클라이언트 브라우저 대신 서버에서 응용 프로그램보기를 렌더링 할 수있게 해주는 서비스입니다. Google은 응용 프로그램을 사전 렌더링하거나 사용자가 요청할 때마다 다시 렌더링 할 수있는 일련의 도구 를 제공합니다 . 현재 이 도구 세트는 Node.JS 서버 측 프레임 워크에 맞게 조정되었으며 ASP.NET 코어를 지원합니다. Google은 PHP, Python 및 Java에 대한 지원을 추가 할 것이라고 주장합니다.

• Ivy renderer
  Renderer는 템플릿과 컴포넌트를 브라우저에서 이해하고 표시 할 수있는 JavaScript 및 HTML로 변환하는 엔진입니다. Ivy는 원래의 컴파일러와 Renderer 2 이후 Angular Renderer의 세 번째 반복입니다 . 다른 업데이트 외에도 Ivy는 Tree Shaking 기술을 적용합니다. 즉, 사용되지 않는 코드 조각을 제거하여 응용 프로그램의 크기를 줄이고 로드 속도를 높입니다. 이전 버전과 호환 가능: Angular 업데이트 후에는 기존 응용 프로그램이 추가 번거 로움없이 Ivy로 렌더링됩니다. 기본 아키텍처가 이를 지원할뿐만 아니라 엔지니어가 생산하는 코드의 품질도 향상시킵니다.

Google Long-Term Support

일부 소프트웨어 엔지니어는 Angular를 Google에서 지원한다는 단순한 사실을 중요하게 생각합니다. 이것도 의미가 있지만 Google 자체로는 충분하지 않습니다. 그래도 좋은 징조는 구글이 기술에 대한 장기 지원(LTS)을 발표했다는 것이다. Igor Minar와 Steven Fuin (Angular의 엔지니어)은 ng-conf 2017 기조 연설 에서이 약속을 확인했습니다 .

이것이 의미하는 바는 Google이 Angular 에코 시스템을 고수하고 개발하여 프런트 엔드 엔지니어링 도구 중에서 주도적인 위치를 유지하려고 한다는 것입니다.

Angular Material streamlines Material Design interface engineering

Google 생태계에 있거나 Material Design이 멋진 디자인 가이드라고 생각 하면 Angular 팀이 Material 설계 요소로 프레임워크를 업데이트하고 있음을 알게되어 기쁩니다. Material Design에 대한 가장 큰 장점은 사람들이 디지털 제품과 어떻게 상호 작용 하는지를 고려하고 그들의 경험을 매끄럽고 심미적으로 즐겁게하기 위해 노력하는 일관되고 깊이있는 정당화 된 시스템이라는 것입니다. Google 드라이브, Google 클라우드 또는 Android를 사용하고 있다면 대부분 친숙합니다.

Angular Material을 사용하면 폼 컨트롤, 탐색 요소, 레이아웃, 단추 및 표시기, 팝업, 모달 창 및 데이터 테이블에 걸쳐있는 다양한 미리 만들어진 컴포넌트를 얻을 수 있습니다. 프로젝트에 쉽게 적용할 수 있습니다.

Seamless updates using Angular CLI

Angular CLI는 여러 가지 이유로 여러 엔지니어가 선호합니다. 초보자에게 친숙하고 쉽게 설정할 수 있으며 테스트 툴링을 즉시 사용할 수 있고 간단한 명령 등이 제공됩니다.

버전 6의 인상적인 기능 중 하나는 ng update <package> 명령입니다. 패키지를 검사하고 로더 및 플러그인을 포함하여 모든 종속성에 필요할 수있는 업데이트에 대한 권장 사항을 만듭니다. 타사 종속성을 포함하는 일부 코드 업데이트는 타사에서 자동으로 업데이트 할 수 있습니다(예 : 해당 제품에서 제품을 수정하기로 결정한 경우). 앵귤러 업데이트 가이드 페이지 에서 이것이 어떻게 작동하는지 확인할 수 있습니다 .

Angular 자체에서도 마찬가지입니다. 팀이 약 6 개월에 마다 새로운 버전을 내 놓는 인상적인 리듬을 가지고 있다고 생각하면 Angular 자체를 업데이트하는 간단한 방법이 있어야합니다. ng update @angular/core 는 프레임 워크 패키지, TypeScript 및 RxJS를 새로 고칩니다.

Powerful ecosystem

Angular는 꽤 오랜 기간 동안 사용해왔기 때문에 패키지, 플러그인, 부가 기능 및 개발 도구에 의해 덮여 있습니다. 당신은 앵귤러 리소스 목록을보고 커뮤니티의 일부분을 탐색 할 수 있습니다. 여기에는 IDE, 툴링, UI 환경, 위에서 언급 한 서버 측 렌더링을위한 Angular Universal, 분석 도구, ASP.NET을 위한 기능, 데이터 라이브러리 등이 포함됩니다. 평범한 엔지니어가 길을 잃으면 항상 튀어 나오는 문제를 해결하는 데 도움이되는 도구가 있습니다.

Angular elements

일부 프로젝트가 Angular가 아닌 여러 프로젝트를 실행하는 경우 6번째 업데이트로 다른 엔지니어링 환경에서 Angular Elements를 사용할 수 있습니다. VueJS, React 또는 심지어 jQuery로 작성된 앱일 수 있습니다. Angular Elements를 DOM 요소로 래핑하여 재사용 할 수 있습니다. 다양한 환경 사이를 전환해야하는 경우에 매우 편리합니다.

Cons

Divided and churning community

LTS 지원에 관계없이 모든 기술을 둘러싼 커뮤니티가 시장에서 강력한 영향을 미칩니다. 그리고 앵귤러 공동체 이야기는 논쟁의 여지가 있습니다. 2018년 StackOverflow Developer Survey에 따르면 Angular(Angular 1.x 및 Angular 둘 다)는 프레임 워크, 라이브러리 및 기타 기술 범주에서 두 번째로 많이 사용되는 기술입니다.

그러나 Angular를 일반적으로 사용하는 개발자는 가장 사랑하고, 두려워하고, 원하는 프레임 워크, 라이브러리 및 도구 범주에서 동일한 설문 조사에 따라 변동될 가능성이 큽니다. 응답자의 45.4%는 Angular를 가장 두려운 기술이라고 생각하고 있습니다. Hadoop (46.1), Xamarin(51) 및 Cordova(59.6)보다 낮지만 여전히 상당히 높습니다. 밝은 면에서 그 결과는 전년도 (48.3)보다 낮으며 레거시 제품에 AngularJS가 붙어있는 사람들도 투표했을 것입니다. 따라서이 부정적인 반응의 일부는 AngularJS에 실제로 전달 될 수 있습니다.

이것은 AngularJS 1.x 사용자가 변동될 가능성이 높고 현대 Angular로의 전환을 고려하지 않기 때문에 주로 발생합니다. 기억 하듯이 AngularJS 1.x에서 직접 업데이트 할 수는 없습니다.

Migrating legacy systems from AngularJS to Angular requires time

앞서 말했듯이 AngularJS와 Angular의 차이는 너무 커서 과거에서 미래로의 마이그레이션 경로도 커집니다. 앵귤러 5에서 앵귤러 6으로 업데이트하는 것과 달리, 특히 기존의 괴물을 다루는 경우에는 쉽지 않습니다.

이를 수행하는 방법에는 여러 가지가 있으며 그 중 하나는 하이브리드 방식을 사용하는 것 입니다. 전체 제품을 점진적으로 업데이트하는 동안 이전 및 새로운 앵귤러 작동을 동시에 수행해야합니다. 시간이 오래 걸릴뿐만 아니라 여러 도구를 검토하고 새로운 언어로 전환해야하며 Angular를 실행하면서 무거운 앱을 다루어야합니다.

Angular is verbose and complex

앵귤러 개발 공동체에서 듣는 가장 빈번한 불만은 너무 많은 수단입니다. 이 문제는 AngularJS 이후 변경되지 않았습니다.

컴포넌트 기반 아키텍처를 주요한 이점으로 언급했지만 컴포넌트를 관리하는 방식은 너무 복잡합니다. 예를 들어, Angular로 단일 컴포넌트에 대해 최대 다섯 개의 파일이 필요하고 종속성을 주입해야하며 컴포넌트 수명주기 인터페이스를 선언해야 할 수 있습니다. 우려할만한 다른 사항은 Angular 특유의 써드파티 라이브러리 및 구문입니다. 결과적으로 Angular의 개발 시간은 반복적인 작업을 수행하는 데 소비됩니다.

Steep learning curve

학습차원에서 비슷한 React 또는 Vue와 비교되어 도전받을 것입니다. 다루게 될 주제가 많습니다. 예를 들어 모듈, 의존성 주입, 컴포넌트, 서비스, 템플릿 등등.

RxJS는 비동기 프로그래밍을위한 리액티브 프로그래밍 라이브러리입니다. 기본적인 수준에서 학습하는 것은 Angular를 사용하는 데 필수적입니다. 엔지니어들은 시행 착오를 거친 후에 추가 연구없이 파악하기에는 너무 이상한 오류 메시지에 대해 불평합니다.

TypeScript는 논쟁의 핵심입니다. TypeScript는 코드의 유지 보수성을 향상 시키지만 이를 배워도 러닝 커브를 부드럽게 만들지는 못합니다.

CLI documentation is lacking details

일부 엔지니어는 CLI 설명서의 현재 상태에 대해 우려를 표시합니다. 커맨드 라인은 Angular 개발자들에게 매우 유용하고 사랑스럽지만, GitHub의 공식 문서에서 충분한 정보를 찾을 수는 없으며 GitHub의 스레드를 탐색하여 답을 얻는 데 시간을 할애해야 합니다. 다행히 커뮤니티가 도움이됩니다.

"Angular is created for enterprise-scale applications" by altexsoft

개발자 커뮤니티에서 여러 가지 피드백 게시물을 읽는다면 흥분보다는 불만을 넘어서게 될 것입니다. 그러나 우리는 Angular에 대해 비관적이지 않습니다.

코드의 유지 관리 가능성을 높이기 위해 TypeScript를 사용하면 더 복잡한 응용 프로그램을 만들면서 향상되는 성능과 특정 생태계의 선택은 Angular가 장기 및 대규모 프로젝트의 주요 도구가 될 가능성을 암시합니다. 학습 곡선은 안정성과 지속적인 기술 지원으로 보상됩니다.

그리고 이것은 여러분이 고려할 수도있는 새로운 Angular와 React의 주요 차이점입니다. React는 이해하기 쉽고, 시작하기 쉽지만 Angular보다 다재다능 하지 못하고 유지 관리가 어렵습니다.

역자 주: 앵귤러 공식 사이트의 설명은 정말 부족합니다. 그대로 따라해도 에러가 나는 상황이 자주 발생합니다. 이는 큰 단점입니다. 경쟁 기술인 vue.js가 직접 한글화하여 이해하기 쉬운 설명을 제공하는 것과 대조하면 단점은 더욱 더 크게 느껴집니다. 구글도 공룡이 된 걸까요? 너무 덩치카 커져 자기 발톱에 낀 떼를 보지는 못하는 것 같습니다.