앵귤러?

앵귤러는 웹 어플리케이션 개발 시 필요한 다양한 기능 (routing, forms validation, animations)들을 탑재한 JavaScript framework인데요. Component 구현방식을 통해 코드의 재사용성 향상으로 중복적인 작업을 줄여주고 생산성을 향상시켜주는 등 다양한 장점이 있습니다. 앵귤러의 시작과 다양한 기능들을 살펴 보도록 하겠습니다.

 

---

 

List of Contents

[ 소개 ]

[ 장점, 단점 ]

[ 주요기능 ]

[ 어떻게 작동할까? ]

[ 누가 사용할까? ]

[ 마무리 ]

[ 참고자료 ]

 

---

 

소개

앵귤러는 2010년 10월 20일 더 나은 웹 개발 환경을 제공하기 위해 Google (개발자: Misko Hevery)에 의해 Angular.Js (ver 1.0) 라는 이름으로 최초로 출시된 후, 이후 버전부터는 브라우저와 호환성을 향상시키기 위해 Angular 2 라는 이름으로 새롭게 개발되었습니다. 모바일 지원, 콤포넌트 시스템 등 다양한 부분에 변화가 있었는데 가장 눈에뜨는 변화는 html template 에 쓰여진 코드 변환을 위해 기존JavaScript 대신 TypeScript를 사용한다는 점입니다. 

 

 

장점, 단점

앵귤러는 component 라는 작은 단위로 기능또는 인터페이스를 구현하고 생성된 component를 조합하여 전체 페이지를 구성하는 것이 가능한데요. 잘구현된 component는 계속 사용이 가능하기 때문에 같은 코드를 반복적으로 생성할 필요가 없고, 코드의 분리로 구독성 향상 및 관리가 수월 해 지는 점 과 component 는 독립적으로 구현되기 때문에 소단위 테트스 (unit test)가 용이한 장점이 있는 반면에 component 생성 과 삭제 시 모듈에 등록 또는 삭제를 통해 설정을 해 주어야 하는 불편함 (업데이트를 통해 많은 부분에서 자동화가 되었으나  아직 수동 설정이 필요함)과 다양한 기능에서 오는 방대한 사이즈와 배우는 데 시간이 걸린다는 단점이 있습니다.  

 

장점	단점
- 재사용성	- 사이즈가 큼
- 구독성이 좋음	- 배우기 어려움
- 관리가 쉬움	- 설정이 복잡함
- 유닛 테스트가 쉬움

 

 

주요기능

- Data binding (Two-way)

수동으로 데이터를 보내고 받을 필요없이 뷰와 모델을 연결하여 자동으로 업데이트된 데이터가 반영됨

 

- Dependency injection

클레스 뿐만 아니라 타입 (string, boolean, ...)과 객체 도 초기화 없이 사용가능 

 

- MVC architecture

Component 가 html template과 모델 (model) 중간에서 조정자 역할을 수행, 데이터 처리 (backend) 와 화면표시 (frontend)의 분할로 개발 속도향상

 

 

어떻게 작동할까?

TypeScript, HTML로 작성된 코드는 renderer (현재 Ivy renderer 가 사용됨)를 통해 JavaScript 로 변환됩니다. 변환되는 과정에서 tree shaking이라는 기능을 통해 불필요한 코드들을 삭제하여 어플리케이션 사이즈를 줄여줍니다.

 

 

누가 사용할까?

American Express, Dell, Marriott, Wal-Mart, Amazon, Google, YouTube, Nike, Virgin America, LucidChart, Samsung, 등등

 

 

마무리

앵귤러는 data binding, dependency injection 등 다양한 기능과 라이브러리 제공을 통해 보다 수월한 어플리케이션 개발을 가능하게 해 주며, 불필요한 중복작업에 소요되는 시간을 기능 차별화, 성능향상 등 웹어플리케이션 의 핵심기능 개발에 투자할 수 있게 해줍니다.

 

---

 

참고자료

Angular official documents: https://angular.io/docs

Angular

 

​Angular versions history: https://www.clariontech.com/blog/angular-framework-from-its-first-steps-to-adulthood#:~:text=Angular%20Versions%20History&text=The%20first%20version%20of%20Angular,the%20release%20of%20Angular%202.

Angular Framework – From Its First Steps To Adulthood

 

​Angular major difference between Angular 1 vs 2 vs 4: https://medium.com/@angularminds/comparison-between-angular-1-vs-angular-2-vs-angular-4-62fe79c379e3

Major differences between Angular 1 vs Angular 2 vs Angular 4

 

Pros and cons: https://www.altexsoft.com/blog/engineering/the-good-and-the-bad-of-angular-development/

The Good and the Bad of Angular Development