Angular 구조 #

Find similar titles

총 9회 업데이트 됨.

Edit

최초 작성자
이크스 2018-02-20 00:47:09
최근 업데이트
cloudgo 2018-03-06 09:19:13

Angular는 HTML 클라이언트 어플리케이션을 구성하는 프레임워크이며, JavaScript를 직접 사용하거나 TypeScript와 같이 JavaScript로 컴파일 되는 언어를 사용할 수 있다.

Angular 프레임워크는 수많은 라이브러리들로 구성이 되는데, 이 중 일부는 코어 모듈이며, 일부는 옵션모듈이다.

Angular 어플리케이션을 구성하기 위해서는, Angular 스타일의 마크업을 사용하여 템플릿을 만들거나, 이 템플릿을 관리하는 컴포넌트 클래스를 작성하기도 하고, 서비스에 어플리케이션 공통 로직을 작성할 수 있고, 컴포넌트와 서비스들을 묶어서 모듈로 구성할 수 있다.

루트 모듈을 부트스트랩하는 것으로 앱이 실행 된다. Angular는 개발자가 지정한 동작에 따라서 브라우저에 내용을 표시하고 사용자의 입력에 반응할 것이다.

구조
참고 사이트
Suggested Pages

구조 #

위의 다이어그램은 Angular 어플리케이션을 구성하는 8개의 중요한 영역이다.

모듈
컴포넌트
템플릿
메타데이터
데이터바인딩
디렉티브
서비스
의존성주입

모듈 #

Angular 앱은 그자체로 모듈이고, Angular 모듈이나 NgModule이라고 하는 독자적인 모듈구조를 사용한다.
Angular 모듈은 복잡한 영역이다.
모든 Angular 앱은 반드시 루트 모듈이라는 Anuglar 모듈 클래스를 가지며, 편의상 AppModule이라고 부른다.
어플리케이션이 작은 경우 루트모듈이 유일한 모듈일 수도 있지만, 대부분의 앱들은 어플리케이션 도메인, 동작흐름, 연관성등을 고려하여 좀 더 많은 개수의 모듈을 갖는다.

루트 모듈이든 일반 모듈이든, Angular 모듈은 @NgModule 데코레이터가 붙는 클래스로 선언된다.

데코레이터는 JavaScript클래스를 변형하는 합수다. Angular는 클래스가 어떤 특징을 가지며 어떻게 동작해야 하는지 메타데이터를 사용하는 데코레이터를 여러개 구현해두고 있다. [참고 : https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841]

NgModule도 모듈을 정의하는 데타데이터 객체 하나를 사용하는 데코레이터 함수다.
- declarations = 이 모듈에서 사용하는 뷰 클래스를 정의한다. Angular에는 컴포넌트, 디렉티브, 파이프 세 종류의 뷰 클래스가 있다.
- exports = 다른 모듈이나 컴포넌트 템플릿에서 접근할 수 있도록 외부로 공개선언한다.
- import = export로 공개된 클래스를 다른 컴포넌트 템플릿의 this모듈에 선언해서 사용할 때 사용한다.
- providers = 전역에서 사용되는 서비스를 해당 객체에서 사용할 수 있도록 생성하고 지정한다. 프로바이더는 앱의 모든 곳에서 접근 할 수 있다.
- bootstrap = 루트 컴포넌트라고 하는 메인 어플리케이션의 뷰를 선언한다. bootstrap 항목은 루트 모듈에만 존재한다.

위 코드의 AppComponent export는 사실 이 예제에서 필요없으며, 단순히 export가 어떻게 동작하는지 보여주기 위해 추가되었다. 루트 모듈은 외부의 어느 컴포넌트에서도 로드되지 않기 때문에, 아무것도 외부로 공개할 필요가 없다.

Angular라이브러리 #

Angular는 수많은 JavaScript 라이브러리를 탑재하고 있다. 이라이브러리들이 각각의 모듈이라고 봐도 무방하다.
Angular 라이브러리들은 @angular접두사로 시작한다.
Angular 라이브러리는 npm 패키지 매니저를 사용해서 설치하고 JavaScript 문법인 import를 사용해서 불러올 수 있다.
예를 들어 Angular의 @angular/core라이브러리에서 Component 데코레이터를 불러오는 코드는 아래와 같다.
```
import { Component } from '@angular/core';
```
라이브러리뿐만아니라 Angular 모듈을 불러오는 것도 import 구문을 사용한다.
```
import { BrowserModule } from '@angular/platform-browser';
```
위에 있는 루트 모듈 예제 코드를 보면 어플리케이션 모듈은 BrowserModule안에 있는 기능을 사용한다. 이 기능을 사용하기 위해서는 @NgModule 메타데이터에 imports항목을 아래와 같이 지정한다.
```
imports : [BrowserModule],
```
이 방식은 Angular 모듈 시스템과 JavaScript 모듈 시스템을 함께 사용하는 방식이다.
두 모듈 시스템은 모두 'import'와 'exports' 키워드를 사용하기 때문에 두 모듈 시스템을 혼동하기 쉽다.

컴포넌트 #

컴포넌트는 화면의 '뷰'라고 하는 부분을 제어한다.
뷰에서 동작해야 하는 기능을 정의하는 컴포넌트의 어플리케이션 로직은 클래스 안에 정의할 수 있다. 클래스는 프로퍼티의 API와 함수들을 가지고 뷰와 상호작용 한다.
예를 들어 HeroListComponent에는 서비스에서 영웅들의 배열을 받아 저장하는 heroes프로퍼티가 있다. 또, HeroListComponent에는 사용자가 목록에서 영웅을 선택했을 때 selectedHero프로퍼티의 값을 지정하는 selectHero()함수도 있다.

Angular에서는 사용자가 어플리케이션을 사용하는 과정을 따라 가면서 컴포넌트를 만들고, 갱신하고 종료시킨다. 어플리케이션은 위 코드에서도 사용된 ngOnInit()과 같이 생명주기를 가로채는 함수를 이용하여 특정 시점에 원하는 동작을 할 수 있다.

템플릿 #

컴포넌트의 뷰는 탬플릿으로 정의한다. 템플릿에서는 Angular가 컴포넌트를 HTML로 어떻게 렌더링할 지 모습을 정의한다.
템플릿은 일반 HTML과 비슷하게 보이지만 몇 가지는 다르다. HeroListComponent의 템플릿은 아래와 같다.

이 템플릿에는 < h2 >와 < p >와 같이 전통적으로 사용되던 HTML 엘리먼트들이 있지만 그 외에 다른 요소도 있다. * ngFor나 {{hero.name}},(click),[hero],< hero-detail >등과 같은 요소는 Angular 템플릿 문법이 사용되었다.
위의 코드의 마지막 줄에서 사용된 < hero-detail> 태그는 HeroDetailComponent를 나타내는 커스텀 엘리먼트이다.
이 HeroDetailComponent는 이전에 봤던 HeroListComponent와는 다른 컴포넌트이다. HeroDetailComponent에서는 HeroListComponent에서 표시하는 목록에서 사용자가 특정 영웅을 선택하면 그 영웅의 정보를 표시한다. HeroDetailComponent는 heroListComponent의 자식 컴포넌트라고 할 수 있다.
일반적인 HTML 엘리먼트들 사이에 < hero-datil >가 자연스럽게 어울리는 것에 주목하자. 화면서도 커스텀 컴포넌트는 기본 HTML들과 함께 자연스럽게 레이아웃을 구성할 수 있다.

메타데이터 #

메타데이터는 클래스가 어떻게 동작해야 하는지에 대한 정보를 저장한다.
HeroListComponent의 코드를 다시 보면, 이 컴포넌트는 단순한 클래스인 것을 확인할 수 있다. 이 클래스는 프레임워크에서 만든 것도 아니고, Angular에서 제공하는 기능도 아니다.
사실 HeroListComponent는 딱 클래스일 뿐이다. Angular에게 이 클래스에 대한 정보를 알려주기 전까지는 아직 컴포넌트라고 할 수 없다.
TypeScript에서는 클래스에 데코레이터를 사용하여 메타데이터를 덧붙일 수 있다.