[Study AngularJS] 앵귤러 아키텍처

앵귤러 아키텍처

 사용자용 애플리케이션 개발을 위한 프레임워크.

 사용자와 접촉하게 될 애플리케이션의 뷰와 핵심 비지니스 로직 작성 외에 모든 것을 관리해 주는 도구. 따라서 앵귤러 개발은 다음의 두 단계를 거친다.

 1. 사용자와 상호작용할 뷰를 구성.

 2. 뷰와 연결된 일련의 로직을 개발.

 앵귤러를 학습한다는 것은 앵귤러의 구조와 실행 방식을 이해하고 이에 맞게 뷰와 비지니스 로직을 개발하는 방법을 이해하는 것.

 

뷰를 구성하는 요소

템플릿

- 뷰를 구성할 마크업을 포함한 앵귤러에서 제공하는 문법으로 작성.

- 화면을 구성하는 틀이라는 의미.

컴포넌트 (Component)

- 앵귤러에서 가장 중요한 요소로서 뷰에서 일어나는 모든 일을 관리.

- 보통은컴포넌트 하나가 화면 전체를 담당하도록 만들지 않고, 기능이나 공통의 관심사를 기준으로 화면 하나를 여러 컴포넌트로 나누어 구성.

컴포넌트와 템플릿의 관계

- 평범한 HTML 코드에서, 앵귤러가 제공하는 템플릿 문법으로 작성된 템플릿과 컴포넌트 코드틑 애귤러가 애플리케이션을 부트스트래핑할 때 브라우저가 이해할 수 있는 자바스크립트 코드와 HTML로 컴파일 한다. 

@Component 데코레이터

- 앵귤러에게 이 클래스가 컴포넌트임을 알리는 표시지자 컴포넌트를 구성하는 정보를 전달할 때 쓰는 통로.

컴포넌트 생명 주기

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

- 앵귤러는 컴포넌트의 생애를 여러 시점으로 나누어 각 순간마다 고유한 이벤트를 정의하여 인터페이로 제공한다. 이에 해당하는 예로는 컴포넌트의 뷰가 초기화된 후 최초에 1회 실행되는 AfterVuewerInit이 있다.

컴포넌트 트리

- 앵귤러에서 사용자에게 제공할 화면은 여러 컴포넌트의 조합으로 만들어진다. 컴포넌트 또한 여러 컴포넌트를 조합하여 뷰를 구성하기도 한다.

- 따라서 앵귤러 애플리케이션에서 컴포넌트 사이에는 다른 컴포넌트를 템플릿 안에 소유한 부모와 다른 컴포넌트 템플릿에 소속되는 자식 컴포넌트 관계가 형성된다. 

데이터 바인딩

- 뷰와 컴포넌트에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 것.

- 뷰와 컴포넌트 간의 관계를 선언함.

- 단방향 바인딩: 

{{userName}} -> 삽입식

[disabled] = "langCode === 'ko'" -> 프로퍼티 바인딩

(click)="setLangCode('ko')" -> 이벤트 바인딩

- 양방향 바인딩: 

바인딩할 속성에 [(ngModel)] 과 함께 바인딩할 대상을 선언.

ex) [(ngModel)] = "userName"

 만약에 INPUT 요소에 양방향 바인딩을 했다고 한다면, INPUT 요소에 입력한 값은 자동으로 컴포넌트의 userName 속성에 반영. 반대로 컴포넌트 코드에서 userName을 변경할 경우에도 이 값이 뷰의 INPUT 요소에 반영됨.

양방향 바인딩 시 한글 입력

- 양방향 바인딩 설정 후 애플리케이션을 실행하면 영문 입력과 달리 한글을 입력할 때 마지막 글자가 뷰에 바로 반영되지 않음. 조합형 문자 입력 시 이벤트 처리와 관련된 것.

- 조합형 문자의 경우 글자를 입력 후, 스페이스나 엔터 등을 통해 입력 완료 시점을 판단하여 compositionend 브라우저 이벤트가 발생. 

- 해당 이벤트와 상관 없이 작성 중인 글자를 모두 뷰에 바인딩하고 싶을 경우에는 앵귤러에서 제공하는 COMPOSITION_BUFFER_MODE 설정을 변경하면 됨. 

<참조>

http://book.naver.com/bookdb/book_detail.nhn?bid=12096305: 앵귤러 첫걸음, 네이버 책 검색