▶[Angular Guide] 2. Architecture - (1) modules

▶[Angular Guide] 2. Architecture - (1) modules

---

이 문서는 Angular.io에서 제공하는 DOC중, Guide - Architecture 부분에 대해 차근차근 정리하며 이해하고자 작성하였습니다. 글의 내용중 정확하지 않은 표현이나, 오류가 있다면, 댓글 또는 방명록을 통해 의견을 남겨주세요.

Moudules

---

AngularApplication은  modular이며, 이 Angular는 자체적으로 NgModules 또는 Angular Module이라는 이름의 모듈시스템(Module System)을 가지고있다.

모듈(Module)의 사전적 정의 

하나로 일괄되어 다른 프로그램으로도 재이용(reusable)할 수 있는 형으로 되어있는 것을 말하며, 복수의 모듈을 취급하기 쉽도록 하나로 일괄시킨 것을 라이브러리(library)라고 한다.

자료: [네이버 지식백과] 모듈[Module] (컴퓨터인터넷IT용어대사전, 2011. 1. 20., 일진사)

Angular modules are a big deal.

이 페이지는 modules에 대해서 설명하고있다. 

<사진 : Angular.io > Guide > Architecture > Module>

모든 Angular app은 최소한 하나의 모듈을 가지고있다. 

이것은 모든 Angular app이 root module 하나는 필수적으로 포함해야하기 때문이다. 이 root modul의 conventionally한 이름은  AppModule 이다.

root module은 작은 application의 유일한 하나의 모듈일 수도 있지만, 

대부분의 application에서는 더 많은 수의 feature module을 가지고있다.

*feature module 들은 각각 application 도메인, work flow 등등의 다양한 용도로 쓰인다.

Angular에서의 Module은 root module이거나 feature Module인데, @NgModule이라는 Decorator가 있는 클래스이다.

Decorators는 Javascript class를 수정하는 function이다.

Angular는 많은 Decorator를 가지고있는데, 이 Decorator들은 각 클래스의 의미를 알고, 그 클래스들이 어떻게 동작해야하는지 알 수 있도록 하는 역할을 수행한다. (이를 위해서) Decorator는 많은 메타데이터를 클래스에 추가한다.

Angular에서 Module은 Application을 조작하거나 외부 라이브러리를 통해 기능을 확장하는 좋은 방법이다.

(이미) 많은 Angular library는 모듈이다.

• FormsModule, HttpModule, RouterModule ...

• 또한 많은 Third-party 라이브러리도 Angular Module로 활용할 수 있다. 

• 예시 : Material Design, lonic, AngualrFire2

또한 Modxule은 Application에 Service를 추가할 수 있다. 이러한 서비스는 내부적으로 개발(interanally- devloped)될 수 있다. Application logger처럼

이 Module을 활용하면, 외부 소속. 즉, Angular Router 및 HTTP클라이언트등으로부터 가져올 수 있다.

Application이 로드될 때 Module을 로드할 수 있다. 또한 router를 통해 lazyload를 비동기적으로 할 생각이다.

NgModule은 속성 모듈을 설명하는 하나의 메타데이터 객체를 취한다. 이와 관련하여 가장 중요한 properties는 다음과 같다.

• declarations - 이 모듈에 속하는 view class. 

• Angular에는 크게 세 가지 타입의 클래스가 있다.

• Components

• Directives

• pipes.
  

• Application Component Tree에 포함되는 Component 목록 정의. 

• 이렇게 하면, 기존 Component에 directives[...] 라고 적었던 부분을 생략할 수 있다.
  
  
  

• exports - declaration의 부분집합. 

• 이것은 다른 모듈의 component template안에서 표시되고, 사용될 수 있어야한다. 
  
  

• imports - 모듈 내의 component template에서 필요에의해 선언 된 class가 exported 된 다른 모듈 

• 의존관계 모듈.
  
  

• providers - service의 creator.

•  이 모듈은 sevice 중에서도 global collection 에 기여한다.

•  이것은 app의 모든부분에 접근한다.
  
  

• bootstraping : (Application Level에서) 최초 수행, 가동할 Component이다.

• root component라고 불리는 main application view 이다.

• 다른 모든 app views를 host한다.

• 오직 root module만 이 bootstrap property로 설정된다.

다음 코드는 root module의 simple version이다.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

exports의 AppComponent는 단순히 어떻게 export하는지 보여주기위해 작성한 것이다.  사실 이 부분은 위코드에서 꼭 적지않아도 된다. root module은 다른 Component가 root module을 import할 필요가 없기때문에 아무것도 export할 필요가 없다.

다음으로, root module을  bootstrapping하여 application하나를 실행한다. 개발과정에서는 아마 AppModule을 bootstrap하는 것을 'main.ts' 파일에서 주로 하게 될 것이다. 

다음은 main.ts 의 기본적인 형태이다.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Angular modules vs Javascript modules

---

Angular Modules - @NgModule로 Decorate된 class - 는 Angular의 기본적인 구조를 이룬다. 

Javascript에도 마찬가지로 Javascript Object의 collection을 다루기위해 module system을 가지고 있다. 그러나 이것은 완벽하게 다르다. 그리고 Angular의 module system과는 관계가 없다.

Javascript의 각 file은 module이고, 그리고 file에 정의된 객체는 해당 module에 속하게 된다.  여기서 module은 몇몇 객체에 대해 export keyword를 마킹(marking)함으로써 public 형태로 만든다.  다른 Javascript module은 다른 module의 public 객체에 접근하기위해 import 구문을 사용한다.

Javascript의 module system에 대해 추가적으로 살펴볼 수 있는 사이트 링크

이렇게 두가지 다르면서도 상호보완적인 module system인 것이다. 우리는 두가지 module system모두 우리의 app에 작성해야한다.

Angular libraries

---

Angular는 Javascript module의 collection 을  제공한다. 우리는 이것들을 library module로 생각할 수 있다.

[ 이미지 : angular.io  guide > 2. Architecture ]

Angular library의 약속된 접두어

각 Angular libarary의 이름은 @angular 라는 접두어로 시작한다.

Angular libaries의 설치 및 import 

이 라이브러리들은 npm pacakage manager로 설치할 수 있으며, 이 라이브러리들 중 필요한 부분이 있다면, Javascript의 import 구문을 이용하여 import 할 수 있다. 

예를들어, Angular의 Component decorator를 다음과 같이 @angular/core 라이브러리에서 import할 수 있다.

import { Component } from '@angular/core';

이러한 방식으로 Angualr modules 를 Angular libraries 로부터 Javascript Import 구문을 활용하여 import 할 수 있다.

import { BrowserModule } from '@angular/platform-browser';

위에서 살펴보았던 간단한 형태의 root module 예제의 경우를 생각해보자.  Applicaton module은 BrowserModule 내부에 대한 자료(정보)가 필요하다. root module에서 BrowserModule의 자료(Material)에 접근하려면, @NgModule의 metadata영역 중, 'imports' 부분에 추가해주어야한다.

imports:    [ BrowserModules ],

이러한 방법으로 우리는 Angular와 Javascript module system을 같이 사용하게 될 것이다.

여기까지 살펴봤다면 아마 대부분 혼란스러울 것이다. 왜냐하면 두 system모두 굉장히 흔히 사용되는 표현인 'imports'와  'exports'를 사용하고있기 때문이다. Angular 페이지에서도 이부분에 대해 인정하고 있다. 다만, 그 다음 설명을 함께 적어보자면,  Angular에서는 이에대해 그러나 약간의 시간과 경험을 해보면 이해할 수 있을 것이라는 얘기를 하고 있다.

​