생명주기

컴포넌트와 디렉티브는 생명주기를 갖는다. 생명주기는 생성하고 소멸되기 까지의 여러 과정을 말하며 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

모듈

모듈은 독립 가능한 기능의 단위이다. 모듈을 사용하면
1) 유지보수가 쉬워진다. 자주 사용하는 공통 기능을 정의해 사용하면 중복 코드가 적어져 유지 보수가 쉬워진다.
2) 전역 스코프 오염을 방지한다. 전역 스코프 내부에서 함수나 변수 이름을 중복해 선언할 수 없으므로 이를 파일 내부에 한정해 모듈로 선언하면 전역 공간을 침범하지 않는다.
3) 재사용성이 향상된다. 모듈은 프로젝트에 자주 사용되는 기능을 공통으로 뺴놓을 수 있게 된다.

타입스크립트의 객체지향 프로그래밍 지원

자바스크립트는 객체지향 프로그래밍을 하기에 지원이 다소 부족하지만, 타입스크립트는 객체지향 프로그래밍에 부족함이 없다.

자바스크립트 함수

타입스크립트는 함수의 매개변수나 반환값에 타입을 지정해 타입 안정성을 강화할 수 있다.
자바스크립트 함수는 기명 함수와 익명함수로 나뉜다.

연산자

산술 연산자

타입스크립트는 자바스크립트와 동일한 산술 연산자를 지원한다.
더하기, 빼기, 곱하기, 나누기, 나머지 연산자(%)와 타입스크립트는 지수 연산자인 **을 지원하므로 Math.pow를 대체해 사용 가능하다.