0. 개요
내가 구상한 구조를 Angular로 구현하는데 있어서 필요한 용어들과 개념들을 간단하게 정리해보았다.
1. DOM
Document Object Model
원본 HTML 문서의 객체 기반 표현 방식
텍스트로만 이루어진 것이 아니라 노트 트리 방식으로 객체 모델로 표현되어 다양한 상호작용을 할 수 있다.
특징
- 유효하고 구조화된 HTML 형식을 따른다.
- 자바스크립트로에 의해 동적으로 수정될 수 있다.
- 가상 요소를 포함하지 않는다.
- 보이지 않는 요소를 포함한다.
2. Module
ngModule
애플리케이션 도메인이나 작업 흐름, 기능이 연관된 Angular 구성요소들을 묶어놓은 단위
- 컴포넌트나 서비스 프로바이더 등이 포함된다.
- 일부분을 외부 공개할 수도 있다.
- 다른 모듈로부터 특정 부분을 가져와서 사용할 수 있다.
3. Component
Template, View 등을 포함한 Angular 애플리케이션을 구성하는 기본 단위
lifecycle
생성된 컴포넌트 인스턴스는 Angular에 의해 생성된 시점부터 미리 정의된 라이프싸이클을 따라 동작하고, 라이프싸이클 단계에 따라 화면에 렌더링되고 자식 컴포넌트를 화면에 추가한다.
lifecycle hook method
컴포넌트나 디렉티브가 동작하는 라이프싸이클에 개입할 수 있는 메서드
- ex)
ngOnInit
4. Directive
Angular 애플리케이션 안에 있는 엘리먼트에 어떤 동작을 추가하는 클래스를 의미
Component
템플릿이 존재하는 디렉티브
Attribute directive
엘리먼트, 컴포넌트, 디렉티브의 모습이나 동작을 변경하는 디렉티브
ex)
ngModel
Structural directive
조건에 맞는 엘리먼트를 DOM 트리에 추가하거나, 제거, 조작하는 방식으로 DOM 구조를 변형하는 디렉티브
ex)
ngIf,ngFor
참고
kimphysicsman