Prologue

현업에서 앵귤러를 좀 더 잘 사용하기 위해서 부족한 개념들을 확실히 잡아가고싶었다. 개념서로 지정한 책이 실습위주로 구성되어 있어서 개념을 성립하고 정리하기에는 조금 목적이 달랐던 것 같다. 그래서 다시 앵귤러에서 제공하는 Document를 다시 파고자... (돌고 돌아 다시..)

처음 나의 목표였던 누군가에게 개념을 설명하고 현업에서 코드 칠 때 개념이 부족하지 않는 수준을 달성하고자 시작한 혼자 하는 스터디니 방향을 재조정하고 다시 달리겠다. 화이팅 2021

Component

1. 개요

컴포넌트는 Angular 애플리케이션을 구성하는 기본 단위이다. 개별 컴포넌트는 아래의 요소들로 구성된다.

• 화면을 렌더링하는 HTML Template
• 동작을 정의하는 TypeScript Class
• 컴포넌트를 템플릿에 추가할 때 사용하는 CSS 셀렉터
• 추가로 컴포넌트가 표시되는 모습을 정의하는 CSS 스타일

2. 사전준비

• Angular CLI가 설치
• Angular Project 준비 / ng new <프로젝트명> 명령어를 실행해서 생성

3. Angular CLI로 컴포넌트 생성하기 (자동 생성 방법)

1) 터미널에서 애플리케이션 폴더로 이동

2) ng generate component <컴포넌트명> 명령을 실행해서 컴포넌트 생성

이 명령어를 실행하면 아래와 같이 구성된다.

• 컴포넌트 이름으로 폴더 생성
• <컴포넌트-이름>.component.ts 컴포넌트 파일 생성
• <컴포넌트-이름>.component.html 템플릿 파일 생성
• <컴포넌트-이름>.component.css CSS 스타일 파일 생성
• <컴포넌트-이름>.component.spec.ts 테스트 파일 생성

4. 수동으로 컴포넌트 생성하기

1) Angular 프로젝트로 이동
2) <컴포넌트-이름>.component.ts 라는 이름으로 새 파일 생성
3) 해당 파일 시작부분에 코드 추가

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

4) import 구문 뒤에 @Component 데코레이터를 추가

@Component({
})

5) 컴포넌트에 적용할 CSS 셀렉터를 지정

@Component({
  selector: 'app-component-overview',
})

6) 정보를 표시할 HTML 템플릿을 정의

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

7) 컴포넌트 템플릿에 지정될 스타일 파일을 생성

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

8) 컴포넌트 클래스를 정의하는 class 구문을 추가

export class ComponentOverviewComponent {

}