엄로그

컴포넌트와 디렉티브는 생명주기를 가짐이 생명주기는 컴포넌트와 디렉티브가 생성하고 소멸되기까지의 여러 과정을 말하며Angular에 의해 관리다시 말해 Angular는 생명주기를 통해 컴포넌트와 디렉티브를 생성하고 렌더링하며,프로퍼티의 변화를 체크하고 DOM에서 제거하는 일련의 과정을 관리개발자는 Angular가 제공하는 생명주기 훅 메소드를 구현하여,각각의 생명주기 단계에서 처리하여야 할 행위를 정의할 수 있음Angular는 위 그림의 순서대로 생명주기를 관리하고,생명주기 이름 앞에 ng가 붙은 생명주기 훅 메소드를 제공1. 생명주기 훅 메소드생명주기 훅 메소드는 인터페이스의 형태로 제공예를 들어 OnInit 생명주기에 처리되어야 할 행위를 정의하기 위해서는 훅 메소드 ngOnInit를 구현이 ngOnIn..

컴포넌트컴포넌트는 Angular의 핵심 구성 요소로서 Angular 애플리케이션은 컴포넌트를 중심으로 구성컴포넌트의 역할은 애플리케이션의 화면을 구성하는 뷰(View)를 생성하고 관리하는 것이고Angular는 컴포넌트를 조립하여 하나의 완성된 애플리케이션을 작성컴포넌트는 컴포넌트 클래스와 템플릿으로 구성되는데,컴포넌트 클래스는 애플리케이션 데이터와 로직을 처리하고템플릿은 화면에 표시할 HTML을 정의Angular 컴포넌트는 컴포넌트 클래스에 @Component 데코레이터를 사용해서컴포넌트에 대한 메타데이터를 지정하면서 템플릿도 함께 지정하는 형태를 띄고 있음import { Component } from '@angular/core';@Component({ selector: 'app-hello', tem..

컴포넌트컴포넌트는 템플릿과 메타데이터, 컴포넌트 클래스로 구성되며 데이터 바인딩에 의해 연결컴포넌트는 화면을 구성하는 View를 생성하고 관리하는 것이 주된 역할이며 화면은 1개 이상의 컴포넌트를 조립하여 구성디렉티브애플리케이션 전역에서 사용할 수 있는 뷰에 관련한 공통 관심사를 컴포넌트에서 분리하여 구현한 것으로,컴포넌트의 복잡도를 낮추고 가독성을 높임구조 디렉티브와 어트리뷰트 디렉티브로 구분할 수 있으며,큰 틀에서 컴포넌트 또한 디렉티브로 구분할 수 있음서비스다양한 목적의 애플리케이션 공통 로직을 담당컴포넌트에서 애플리케이션 전역 관심사를 분리하기 위해 사용하며, 의존성 주입이 가능한 클래스로 작성됨라우터컴포넌트를 교체하는 방법으로 뷰를 전환하여 화면 간 이동을 구현모듈기능적으로 관련된 구성요소를 하..

1. Angular 소개Angular는 SPA 개발을 위한 구글의 오픈소스 프레임워크이다.정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여,대규모 애플리케이션 개발에 보다 적합한 환경을 제공한다Angular의 장점1) 컴포넌트 기반 개발컴포넌트 기반 개발(CBD)은 개발 생산성을 높이며 대규모 애플리케이션에 적합한 구조이다. 2) TypeScript 채택Angular가 기본언어로 채택하고 있는 TypeScript의 명시적 타입 지정은코드의 가독성을 높이고 예측할 수 있게 하며, 컴파일 단계에서 오류를 포착할 수 있는 장점이 있음 3) 개발도구의 통합 및 개발 환경 구축 자동화Angular CLI를 통해 간편한 개발 환경 구축을 지원함프레임워크를 도입할 때 장벽으로 손꼽히는 것 중 하나가 개..