앵귤러란 무엇일까?

앵귤러는 사용자용 애플리케이션 개발을 위한 프레임 워크

사용자용 애플리케이션은 사용자와 애플리케이션에 상호작용할 ui또는 또는 뷰 정보가 반드시 있다는 의미이다.

앵귤러로 애플리 케이션을 개발한다는 것은?

1. 사용자와 상호작용할 뷰를 구성
2. 뷰와 연결된 일련의 로직을 개발

프레임워크를 사용한다는 것은 애플리케이션의 시작부터 종료까지 모든 것을 직접만들지 않고, 애플리케이션 실행 및 관리의 주도권은 프레임워크에 위임하고 비지니스 로직만을 개발한다는 것을 전제 한다.

1.컴포넌트와 템플릿

template

html 파일에서 뷰를 구성할 마크업을 포함한 앵귤러에서 제공하는 문법을 사용하여 코드 작성. 이러한 틀을 템플릿이라고 한다.

component

클래스 속성 및 메서드

@Component데코레이터

클래스가 컴포넌트임을 알리는 표시이자 컴포넌트를 구성하는 정보를 전달할 때 쓰는 통로이다.

@←데코레이터

@는 데코레이터라하고, 이름과 함께 경우에 따라 @Component처럼 JSON객체를 전달 받을 수도 있다.

메타데이터

컴포넌트와 연결된 뷰 정보인 템플릿 , 스타일 정보등이 있다.

2.앵귤러 생명주기

컴포넌트에 implements생명주기 메소드를 선언해주어 사용한다.

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

@Component({...})
export class AppComponent implements AfterViewInit {
		ngAfterViewInit(){
				//...
		}
}

AfterViewInit
컴포넌트의 뷰가 초기화된 후 최초에 1회 실행되는 인터페이스

3.컴포넌트 트리

앵귤러는 사용자에게 제공할 화면은 여러 컴포넌트의 조합으로 만든다.

셀렉터에 선언된 이름을 컴포넌트에 선언해 주면 트리 형성

app.component.ts

<h1></h1>
<app-welcome-angular></app-welcome-angular>

welcome-component.ts

@Compoenent({
		selector: 'app-welcome-angular',
		//...
})

4.데이터 바인딩

양방향 바인딩

• [(ngModel)]

단방향 바인딩

• 삽입식 : {{}}
• 프로퍼티 바인딩 : [disabled]
• 이벤트 바인딩 : (click)=""

---

위 포스팅은 앵귤러 첫걸음(조우진) 책의 내용을 학습 목적을 위해 요약 정리한 내용 입니다.