Angular Architecture 개요

What?

Angular란 google에서 만든 SPA방식의 프론트엔드 개발을 위한 자바스크립트 프레임워크이다.

Angular는 Angular JS와 완전히 다른데 쉽게 생각하면 Angular 1버전을 Angular JS, Angular 2버전 이상을 Angular라고 부른다.  (Angular JS는 11년만인 21년 12월31일 EOL에 도달하였으며 서드 파티지원만 가능하다고 한다.)

 

Why

 

Angular의 장점

 

- 컴포넌트기반

Angular를 이용한 프론트엔드 웹 개발은 DI의 강력한 지원을 통해 기능에 따라 코드를 분리하고 재사용이 용이하다.

기능을 담은 Service 클래스와 HTML 컴포넌트를 담당하는 Component클래스가 명확히 구분되고 이로인해 Service클래스는 여러 Component에서 재사용이가능하다.

 

- SPA는 다른페이지로의 전환 속도가 빠르다. 일반적인 웹페이지는 링크를 클릭할 때마다 서버에 새로운 페이지를 요청하지만, Angualr는 클라이언트 측에서 화면을 생성하고 필요한 데이터만 Ajax요청을 통해 서버에서 내려받기 때문에 네트워크에 의한 딜레이가 적다.

 

- TypeScript기반

대부분 TypeScript 기반으로 개발하기 때문에 코드작성 단계에서 체크해 오류를 확인할 수 있고 타입을 미리 정한다는 특성 때문에 실행속도가 빠릅니다. side effect가 비교적 줄지 않을까 생각합니다.

 

 

 

 

How

 

▲Module :

Angular 어플리케이션을 구성하는 단위로 관련된 요소를 하나로 묶어놓는 것이다.

Angular의 경우 Module단위로 어플리케이션 코드를 인식하므로 반드시 하나 이상의 Module을 가지게 된다. 

Module은 Tree형태로 구성되고 최상단의 위치한 Module인 root Module을 App Module이라고 하며 이것은 Bootstrap 메커니즘을 제공한다. (가장 처음시작하는 module을 인자로 받음)

위와 같은 4개의 파일을 묶어서 하나의 모듈이라고 하며 앞으로 만들 module들은 app폴더에 각각 폴더를 만들어서 관리할 것이다.

 

▲Component :

Angular 애플리케이션을 구성하는 기본단위이며 컴포넌트는 @Component() 데코레이터가 붙는 타입스크립트 클래스 ,HTML 템플릿, 스타일로 구성된다.

selector 가 app-tutorial-list인 component를 사용하려면 템플릿에 <app-tutorial-list></app-tutorial-list>를 추가하면 된다.

 

▲Templete :

View를 렌더링하는 주체이기 때문에 어떻게 View를 렌더링 해야하는지에 대한 정보를 가지고 있어야한다.

Templet에는 렌더링에 필요한 HTML요소와 Angular문법 요소, 이벤트 처리코드를 가지고 있으며 바인딩문법을 사용하여 컴포넌트에 있는 값을 전달 받거나 전달할 수 있다. 

 

▲Metadata :

Angular에게 클래스를 처리하는 방법을 알려준다. 클래스를 장식하는데 사용되어 예상 동작을 구성할 수 있다. 데코레이터를 사용하고 @Injector(), @Input(), @Output등이 있다.

 

▲Data binding :

Templete과 Component간에 통신에서 중요한 역할을 한다. 아래의 그림으로 단번에 설명할 수 있다.

위 3가지는 One way binding으로 차례대로 Interpolation (보간), Property binding, Event binding이며 마지막은 양방향 바인딩(Two way binding)이다.

 

• Interpolation : {{value}}의 형태로 쓰이며  이중 중괄호 구문을 사용하여 Component에서 선언한 속성을 View에 표시하는 데 사용됩니다. string , number, date, arrays , list 또는 map 과 같은 모든 종류의 속성 데이터를 보기에 표시할 수 있습니다.
• Property binding : View의 DOM이 소유한 HTML Element속성을 바인딩하는 경우이다.                                                                (대괄호로 묶인 요소 속성에 값을 바인딩)
• Event binding : View의 DOM에 대한 Event handler로 Component의 메서드를 사용하는 경우이다.
• Two way binding : Component와 View(DOM)어느쪽이 변하든 상태정보를 일치시켜주는 것이며

// interpolation
<p>name: {{struct.name}}</p> 

// property binding
<button [disabed]="isDisabled">Button </button>
// idDisabled:boolean=true; 라면 disabled속성이 false가 되어 버튼이 비활성화됨

//evnet binding
<button (click)="clickMethod()">Button</button>
//버튼 클릭시 clickMethod 실행

//two way binding
<input id="name" [(ngModel)]="hero.name" placeholder="name">
//input에 입력한 값은 component에 선언된 hero객체의 hero.name의 값과 상태정보가 일치된다.

 

▲Directives :

DOM모양이나 동작을 지시하기 위한 명령

 -Component Directive : Component의 selector에서 직접 지정해 사용하는 Directive

 -Attribute Directive : HTML Element의 속성으로 표시된다. NgClass, NgStyle, NgModel등이 있다.

 -Structure Directive : DOM 구성을 제어하기 위한 디렉티브 ngIf, ngFor, ngSwitch등이 있다.

 -Costomer Directive : built-in형태가 아닌 직접 만들어서 사용하는 Directive

 

▲Services :

Component에서 View를 처리하는 로직 이외의 로직은 따로 분리한다는 개념

MVC패턴에서 볼수 있는 Service와 비슷하며 Service를 사용함으로서 재사용과 유지보수가 쉬워지고 의존성을 낮추기 위해 DI를 사용한다 

 Angular Framework는 Component가 사용할 수 있도록 Service객체를 생성해서 Component에 넣어주는 방식인 IoC방식으로 작동한다.

 

▲DI (Dependency injection) :

DI (의존성주입)을 사용하면 Component를 간결하고 효율적으로 유지할 수 있다. DI는 Angular framwork에 연결되어 있으며 Component에 필요한 서비스 또는 기타항목을 제공하는데 사용된다.

(서비스를 주입하는 방법은 Component에 constructor() 에 의존성 객체의 타입을 지정해주면 된다.)

 

 

 

Reference

https://angular.io/ https://helloworld-88.tistory.com/36 

https://medium.com/@bhavikagarg8/angular-architecture-overview-1e7cc7483a0