IT 회사에서 즐겁게 지내기!

Angular의 전체 구조에 대해서 아주 살짝만 훑어보고 가겠습니다.

사실은 저도 정확히 알지 못하고 앞으로 익혀갈 예정이지만요.

Angular Overview

위 그림은 Angular의 구조를 아주 단순화한 그림입니다.

크게 보이는 몇 가지 단어들을 정리하고 넘어가도록 하죠.

해보면서 익히는 게 더 좋을듯 합니다.

Angular는 Component들을 이용하여 Web Page를 만들어냅니다.

Component가 가장 중요한 구성요소라고 할 수 있겠죠.

Component는 Template(=html+부가기능)을 이용하여 화면을 그립니다.

여러 개의 Component들, 즉 여러가지 기능들을 하나의 package로 묶은 것이 Module입니다. 

Angular Library또한 하나의 Module이라고 볼 수 있습니다.

Angular는 Typescript Class에 Metadata를 이용하여 Component, Module 등을 구분하죠.

Component간에 공통적인 기능을 수행하는 Service를 만들어 사용할 수 있습니다.

그리고 Template에서는 DOM을 구성하는데 Directive를 활용합니다.

정리하면 아래와 같은 구조로 요약됩니다.

Angular Terms

위 그림은 제가 나름대로 단순화한 관계도 이므로 틀릴 여지가 있습니다.

앞으로 배우면서 잘못된 부분은 수정해나가도록 하지요.

출처: https://angular.io/guide/architecture