생명주기

컴포넌트와 디렉티브는 생명주기를 갖는다. 생명주기는 생성하고 소멸되기 까지의 여러 과정을 말하며 Angular 에 의해 관리된다. Angular는 생명주기를 통해 컴포넌트와 디렉티를 생성하고 렌더링하며 프로퍼티의 변화를 체크하고 DOM에서 제거하는 과정을 관리한다.

파이프

데이터 자체를 변경하기 보다는 화면에 표시하는 형식만 변경하고 싶을때 사용하는 것

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

@Component({
  selector: 'app-root',
  template: `
    <h2>{{today}}</h2>
    <h2>{{today | date}}</h2>
    <h2>{{today | date : 'y년 MM월 dd일 HH시 mm분 ss초'}}</h2>

  `,
  styles: []
})
export class AppComponent {
  title = 'custom-attr-directive';
  today = new Date();
}

/**
Fri Jun 12 2020 16:46:36 GMT+0900 (대한민국 표준시)
Jun 12, 2020
2020년 06월 12일 16시 46분 36초
**/

디렉티브란?

전역에서 공통으로 사용하는 기능을 컴포넌트에서 분리하여 구현한 것
디렉티브는 컴포넌트와 달리 자식을 가질 수 없다.
@Directive 데코레이터로 장식된 클래스이다.

컴포넌트(component) 란

컴포넌트는 Angular의 핵심 구성요소로 Angular는 컴포넌트 중심으로 구성된다.
컴포넌트는 화면을 구성하는 뷰를 생성하고 관리한다.

웹 컴포넌트

컴포넌트는 독립적이고 완결된 뷰를 생성하기 위해 HTML,CSS,자바스크립트를 하나의 단위로 묶는 것이다.

웹 컴포넌트가 제공하여야 하는 기능은 다음과 같다. (웹 컴포넌트 4대 기술 스펙)

• 컴포넌트 뷰 생성(HTML Template)
• 외부의 간섭을 제어하기 위해 스코프(scope)를 분리하여 DOM을 캡슐화함(Shadow DOM)
• 외부로 부터 컴포넌트 호출(HTML Import)
• 컴포넌트를 명시적으로 호출하기 위한 명칭을 선언하여 네이티브 html 요소처럼 사용함(custom Element)

https://www.webcomponents.org/

위 사이트를 들어가면 브라우저별 컴포넌트 지원 현황을 알 수 있다.

angular CLI로 프로젝트를 생성하면 아래와 같인 파일 구조의 스캐폴딩이 생성된다.

my-app/
├── .git/
├── e2e/
├── node_modules/
├── src/
├── .editorconfig
├── .gitignore
├── angular.json
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

1. src 폴더

   src 폴더는 angular의 모든 구성요소, css,이미지, 폰트, 설정 파일 등 애플리케이션 필수 파일을 담는다.

2. 기타 설정 파일

   src 폴더 밖의 파일은 테스트, 빌드, 배포 등을 위한 각종 설정 파일이다.

Angular CLI 란

간단한 명령어를 사용하여 angular 프로젝트를 생성, 실행, 빌드 할 수 있는 커맨드 라인 인터페이스

• 설치방법
  1 node 6.9.0이상 npm 3.0.0 이상 필요
  https://nodejs.org/en/

2. 터미널에 명령어 입력

1
2
3
4
5
6

npm install -g @angular/cli
``
3. 설치가 완료되면 ng 명령어로 버전 확인

``cmd
ng version