[개념] Angular 프레임 워크 컨셉

컨셉

- SPA 클라이언트 응용 프로그램을 빌드하기 위한 플랫폼 or 프레임 워크, Typescript로 작성되었다.

- 컴포넌트에 대한 컴파일 컨텍스트를 제공, 관련 코드를 기능 집합으로 수집, NgModule이 모여 Angular 앱을 구성한다.

- Angular 앱에는 최소 하나 이상의 루트 Module이 있고, 일반적으로 더 많은 기능 모듈들이 있다.

- Angular가 프로그램 논리 및 데이터에 따라 선택하고 수정할 수 있는 화면 요소 집합인 View를 정의한다.

- View와 직접 관련이 없는 특정 기능을 제공하는 Service를 사용한다. (Angularjs의 Service와 같은 개념이다.)

 

데코레이터

모듈, 컴포넌트, 서비스 (MCS)는 데코레이더를 사용하는 클래스이다. 데코레이터를 통해서 Angular에 사용 방법을 알려주는 메타 데이터를 제공한다.

 

- 컴포넌트 클래스의 메타 데이터는 뷰를 정의하는 템플릿과 연결된다, 템플릿은 일반 HTML과 Angular 지시문 및 바인딩 마크업을 결합하여 Angular가 HTML를 수정할 수 있도록 한다.

 

- 서비스 클래스의 메타 데이턴은 Angular가 DI(종속성 주입)을 통해 컴포넌트에서 사용할 수 있도록 하는데 필요한 정보를 제공한다.

 

 

모듈

- NgModules은 Javascript에서 말하는 모듈과는 달리 더 많은 기능을 보완한다.

- 컴포넌트 집합에 대한 컴파일 컨텍스트를 제공한다.

- 컴포넌트를 서비스와 연결하여 기능 단위를 형성한다.

- 다른 NgModule의 기능을 불러올 수 있다. (Ex 라우터 서비스를 사용하려면 RouterNgModule을 가져온다.)

- 코드를 별개의 기능 모듈로 구성하면 복잡한 응용 프로그램의 개발을 관리하고 재사용을 위한 설계에 도움된다.

- 또한 lazy Loading 기술을 활용하여 시작 시에 로드해야 하는 코드의 양을 분산하여 최소화할 수 있다.

 

 

컴포넌트

- 모든 Angular 앱에는 컴포넌트 계층을 DOM과 연결하는 루트 컴포넌트인 컴포넌트가 하나 이상 있다.

- 데코레이터 식별자로 바로 아래에 정의된 클래스 및 템플릿 및 특정 메타 데이터를 제공한다.

- @Component

템플릿

- html 요소를 표시하기 전에 수정해야 하는 Angular 마크 업과 HTML을 결합(동기화) 시킨다.=

- directive는 프로그램 로직을 제공하고, binding 마크 업은 애플리케이션 데이터와 DOM을 연결시킨다. (데이터 바인딩)

- 양방향 데이터 바인딩을 지원한다.

- 템플릿은 Pipe를 사용하여 표시할 값을 변환하여 사용자 경험을 개선할 수 있다. (View에서 보일 때 변환되는 속성이라 볼 수 있다. Ex 통화, 날짜)

서비스 및 의존성 주입

- 특정 View에 종속되지 않고 컴포넌트 간 공유하고자 하는 데이터 혹은 로직이 필요한 경우에 서비스 클래스를 만든다.

- @Injectable()

- DI를 사용하면 컴포넌트 클래스를 간결하고 효율적으로 유지할 수 있다.

라우팅

- Angular RouterNgModule은 다양한 애플리케이션 상태 간의 탐색 경로를 정의하고 앱의 계층 구조를 볼 수 있는 서비스를 제공한다.

- 주소 표시 줄에 URL을 입력하면 브라우저가 해당 페이지로 이동합니다.

- 페이지의 링크를 클릭하면 브라우저가 새 페이지로 이동합니다.

- 브라우저의 뒤로 및 앞으로 버튼을 클릭하면 브라우저가 본 페이지의 기록을 앞뒤로 탐색합니다.

- 라우터가 현재 애플리케이션 상태에 특정 기능이 필요하고 이에 대한 모듈이 로드가 덜 되었다고 판단하는 경우 라우터는 요청 시 모듈을 lazy Loading 할 수 있다.