3장
앵귤러는 컴포넌트로 시작해서 컴포넌트로 끝난다.
앵귤러는 사용자 애플리케이션 개발을 위한 프레임워크 이다.
위에 중요한 내용 2가지가 다있다
- 사용자 애플리케이션
- 프레임 워크
사용자 애플리케이션
- 핵심은 사용자와의 상호작용
- 사용자와 인터페이스를 통해서 상호작용하는 사용자 애플리케이션에서는 뷰 가 당연한 필수품이다.
프레임워크
개발을 하는데 있어서 도움을 주는 도구입니다. 이렇게 됨으로써 개발자는 로직을 개발하는데 집중을 하면 됩니다.
앵귤러로 애플리케이션을 개발한다는 건
- 사용자와 상호작용할 뷰를 구성
- 뷰와 연결된 일련의 로직을 개발
템플릿(Template)
- 뷰를 구성할 마크업을 포함한 앵귤러에서 제공하는 문법을 사용하여 코드를 작성
- 이 코드를 구성하는 틀이라는 의미에서 탬플릿 이라 부른다.
- ex) 흔히 시작을 하면 app.component.html 로 시작한다.
컴포넌트
- 앵귤러에서 제일 중요한 요소
- 뷰에서 일어나는 모든 일을 관리한다.
- @component가 붙은 app.component.ts 는 앵귤러에서 더더욱 중요한 요소이다.
- 지시자, 바인딩 등 더 중요한 것은 뒤에서 다루도록 하겠습니다.
데코레이터(Decorator)
-
@를 앞에 붙은 것을 데코레이터라고 부른다.
@component
그렇다면 여기서 나오는 컴포넌트 데코레이터는 무엇인가?
Marks a class as an Angular component and collects component configuration metadata.
Angular 구성 요소로 클래스를 만들고 구성 메타 데이터를 수집합니다.
- 앵귤러에 전달하는 컴포넌트를 구성하는 정보(Metadata)) 선언
- 컴포넌트 연결된 뷰(템플릿, 스타일정보) 등 포함
- 클래스는 무엇인가? : 뷰에서 일어나는 일어나는 모든 일을 관리하는 곳
- 기본형태
@Component({selector: 'greet', template: 'Hello !'})
class Greet {
name: string = 'World';
}
컴포넌트 생명주기
- 앵귤러는 뷰에 필요한 컴포넌트를 생성하고 다른 뷰로 전환하면서 사용하지 않는 컴포넌트를 소명시키는 등 컴포넌트의 전체 생명 주기를 관리합니다.
- 총 8가지의 생명주기가 존재한다.
- 따로 분류해서 정리예정…
컴포넌트 트리
- 우리가 사용자에게 제공하는 화면은 컴포넌트들의 조합으로 만들어 지는 것이다.
- 컴포넌트 또한 컴포넌트들의 조합으로 만들어진다.
- 이렇게 컴포넌트 사이네는 다른 컴포넌트를 템플릿 안에 소유한 부모컴포넌트 와 다른 자식 컴포넌트 템플릿에 소속되는 자식 컴포넌트 관계가 형성된다.
데이터 바인딩(정말 중요)
- 이 내용은 다른 파일로 빼서 바인딩만 다룹니다.
서비스
- 애플리케이션의 비즈니스 로직을 담은 클래스
- 컴포넌트에서 비즈니스 로직을 분리하는 역할을 한다.
- 많은 역할을 하는데….
- 바인딩도 결국 서비스로 가능하다.
사용하려면 의존성 주입을 해주어야해요
- 스프링에 bean을 주입하는 것처럼 앵귤러에서는 데코레이터로 의존성 주입이 가능합니다.
- @Inject, @Injectable 이런게 있음
지시자
- 이것도 따로 구분해서 파일로 만들겠습니다.
- 이동하기 : 지시자
파이프
- 이것도 따로 구분해서 파일로 만들겠습니다.
- 이동하기 : 파이프
모듈(Module)
- 앵귤러의 모듈은 앵귤러 안에서 관련된 요소를 하나로 묶어 애플리케이션을 구성하는 단위입니다.
- 모든 앵귤러는 반드시 하나의 모듈을 가진다.(AppModule)루트모듈
- 앞에서 나와있는 모든 것들 컴포넌트, 서비스, 지시자, 파이프들 모두 모듈에 선언하지 않고는 사용할 수 없습니다.
- app.module.ts 안에 import 에 등록되어 있습니다.
추가적으로
- 앵귤러에서 기본적으로 제공을하는 디자인?이 있습니다.
- Bootstrap같은 것으로 Material 패키지 입니다.