앵귤러 첫걸음 Ch03 앵귤러 아키텍처

Chapter 03 앵귤러 아키텍쳐

3.1 뷰를 구성하는 요소

Angular: 사용자용 애플리케이션 개발을 위한 프레임워크. HTML과 typescript로 single-page client application을 만드는 플랫폼이자 프레임워크.

사용자용 애플리케이션: 애플리케이션에 사용자와 상호작용할 UI 또는 뷰가 있음

프레임워크: 고유의 실행 방식이 있으며 일련의 정해진 규칙에 맞추어 작성된 비즈니스 로직을 관리, 실행하는 컨테이너

 

Ng serve 명령이 실행 중이면 앵귤러 CLI가 코드의 변경사항을 자동으로 감지하여 소스를 다시 컴파일하여 열려 있는 브라우저의 페이지를 자동으로 새로고침함

 

컴포넌트: 뷰에서 일어나는 모든 일을 관리함. 기능이나 공통의 관심사를 기준으로 묶어 여러 컴포넌트로 하나의 화면을 구성함.

컴포넌트는  프로그램 로직과 데이터 에 따라 수정하고 그 중에 선택할 수 있는 화면요소의 세트인 뷰를 정의한다.

컴포넌트는 뷰와 직접적으로 관련되지 않은 특정 기능을 제공하는 서비스를 사용한다.

서비스 프로바이더는 컴포넌트 안에 의존성 주입되어 코드를 모듈화하고 재사용성 가능하게 하고 효율적이게 만든다..

 

 

 

Metadata: 앵귤러에 전달하는 구성 정보

@Component의 메타데이터는 컴포넌트와 연결된 뷰 정보인 템플릿, 스타일정보들이 들어감

Service(@Injectable)의 메타데이터는 Angular가 컴포넌트에 제공하기 위해 필요한 정보들을 의존성 주입으로 제공함

 

lifecycle: 앵귤러는 뷰에 필요한 컴포넌트를 생성하고 다른 뷰로 전환하면서 사용하지 않는 컴포넌트를 소멸시키는 등 컴포넌트의 전체 생명 주기를 관리함.

 

컴포넌트 트리: 앵귤러에서 사용자에게 제공할 화면은 여러 컴포넌트의 조합으로 만들어지는데 컴포넌트 사이에는 다른 컴포넌트를 템플릿 안에 소유한 부모와 다른 컴포넌트 템플릿에 소속되는 자식 컴포넌트 관계가 형성되어 부모-자식 형태의 컴포넌트 트리를 구성함

 

템플릿문법: Angular 마크업과 HTML의 조합인 템플릿은 디스플레이 되시 전에 HTML 요소를 수정할 수 있다. 컴포넌트와 상호작용할 때 사용. 템플릿과 컴포넌트 코드는 앵귤러가 애플리케이션을 부트스트래핑할 때 브라우저가 이해할 수 있는 자바스크립트 코드와 HTML로 컴파일함

데이터 바인딩: 뷰와 컴포넌트에서 발생한 데이터의 변경 사항을 자동으로 일치시킴

양방향 바인딩: 컴포넌트와 뷰 사이에 상태 정보의 변경 사항을 일치시켜줌 [(ngModel)]=”name”

단방향 바인딩: 컴포넌트에서 뷰로, 또는 뷰에서 컴포넌트 한쪽으로만 데이터를 바인딩해 줌. 삽입식 {{name}},  프로퍼티 바인딩 [maxLength]=”10”, 이벤트 바인딩 (click)=”setName(name)”이 있음

 

 

3.2 애플리케이션을 완벽하게 만드는 요소

서비스: 컴포넌트에서 비즈니스 로직을 분리하려 애플리케이션의 비즈니스 로직을 담는 클래스

데이터나 로직이 특정 뷰와 연관되지 않았거나 컴포넌트들간에 공유하고 싶을 때 서비스를 만듬.

 

의존성주입: constructor의 매개변수에 접근 제어자를 붙이면 클래스의 속성으로 선언됨. new ()를 쓸 필요 없이 앵귤러에서 대신 클래스를 생성하여 제공함. @NgModule 메타데이터에 providers 배열 안에 추가하여 사용

 

지시자: 템플릿을 동적으로 만들어 주는 요소. 프로그램 로직을 제공하고 애플리케이션 데이터와 DOM을 연결한다.

구조 지시자: DOM의 구조를 동적으로 처리할 때 사용 (*ngFor)

속성 지시자: DOM의 속성을 앵귤러 방식으로 관리할 때 사용

 

파이프: 템플릿에 데이터를 보여줄 때 가공이 필요한 경우 사용 {{price | currency: ‘USD’}}

 

모듈: 앵귤러 안에서 관련된 요소를 하나로 묶어 애플리케이션을 구성하는 단위

루트모듈: AppModule이라고도 부름, 앵귤러는 모듈 단위로 애플리케이션의 코드를 인식하기 때문에 반드시 하나 이상의 모듈을 가지고 부트스트래핑을 가능하게 함

NgModule은 기능적인 세트로 관련 코드를 모으므로 Angular App은 NgModules 세트 단위로 정의된다.

 

 

 

Reference: Angular 첫걸음, angular.io