[TIL_Angular_20.01.12] Angular Document Study Start! ~ Component -1

offdutybyblo·2021년 1월 12일
0

Angular

목록 보기
11/14
post-thumbnail

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';
  1. import 구문 뒤에 @Component 데코레이터를 추가
@Component({
})
  1. 컴포넌트에 적용할 CSS 셀렉터를 지정
@Component({
  selector: 'app-component-overview',
})
  1. 정보를 표시할 HTML 템플릿을 정의
@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})
  1. 컴포넌트 템플릿에 지정될 스타일 파일을 생성
@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})
  1. 컴포넌트 클래스를 정의하는 class 구문을 추가
export class ComponentOverviewComponent {

}
profile
Front-End Devleoper 일껄요?

0개의 댓글