Angular Tutorial with Docs - 1

안녕하세요. 꼬동입니다.

 

FE 개발자로 전향되면서, 곧 사용하게 될 Angular를 미리 공부해보려고 합니다.

 

다행히 공식 문서에서 잘 나와있어 이를 기반으로 정리하는 시간을 가져보도록 합시다.

 

친해집시다

---

프로젝트 생성

// 프로젝트 생성
ng new angular-tour-of-heroes

• angular-tour-of-heroes라는 폴더 이름으로 새로운 워크스페이스를 생성합니다.
• 서브 폴더 src를 생성하고 이 폴더에 애플리케이션 초기 코드 생성합니다.
• 서브 폴더 e2e를 생성하고 엔드-투-엔드 테스트 프로젝트 생성합니다.
• 환경설정파일 생성합니다.

 

// 애플리케이션 실행
cd angular-tour-of-heroes
ng serve --open

• --open의 경우엔 서버 실행을 함과 동시에 브라우저를 열어줍니다.

Angular 컴포넌트

• app.component.ts
  • TypeScript로 컴포넌트 클래스 코드를 작성합니다.
• app.component.html
  • HTML로 컴포넌트 템플릿을 작성합니다.
• app.component.css
  • 이 컴포넌트에만 적용되는 CSS 스타일을 작성합니다.

문자열 바인딩

<h1>{{ title }}</h1>

• 이중 중괄호({{ }})는 Angular가 제공하는 문자열 바인딩(interpolation binding)입니다.
• 문자열 바인딩을 이용하면 컴포넌트의 프로퍼티를 HTML에 표시할 수 있습니다.

---

컴포넌트 생성하기

// 컴포넌트 생성
ng generate component heroes

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

@Component({
	selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
	constructor() { }
    
    ngOnInit() {
    }
    
}

• @Component는 클래스에 메타데이터를 지정해서 Angular 컴포넌트로 선언하는 데코레이터 함수입니다.
• 메타데이터 기본 3개
  • selector : 컴포넌트의 CSS 엘리먼트 셀렉터 (이 컴포넌트를 호출할 때 사용될 문자열입니다)
  • templateUrl : 컴포넌트 템플릿 파일의 위치
  • styleUrls: 컴포넌트 CSS 스타일 파일의 위치
• ngOnInit은 라이프 사이클 후킹 함수입니다. 컴포넌트 초기화 하는 로직은 이 메소드에 작성하는 것이 좋습니다.
• export는 필수 !

다른 컴포넌트 표시하기

// 위에서 만든 Component의 메타데이터 내의 selector를 아래와 같이 적읍시다.
<h1>{{ title }}</h1>
<app-heroes></app-heroes>

인터페이스 생성

// C 언어의 구조체라고 생각하면 편하더라고요.
export interface Hero {
	id: number;
    name: string;
}

위의 인터페이스를 사용해봅시다.

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
	selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
	hero: Hero = {
    	id: 1,
        name: 'Windstorm'
    };
    
    constructor() { }
    
    ngOnInit() {
    
    }
}

위의 프로퍼티를 이제 HTML에서 표시도 할 수 있어야겠죠?

 

문자열 바인딩을 씁시다.

<h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{ hero.id }}</div>
<div><span>name: </span>{{ hero.name }}</div>

문자열 바인딩에서 파이프 연산자를 쓰면 Angular의 다른 기능을 쓸 수 있습니다.

 

문자열의 형식을 지정하거나, 통화 단위를 변경하고, 날짜나 데이터가 표시되는 형식을 변경할 때 사용합니다.

<h2>{{ hero.name | uppercase }} Details</h2>

양방향 바인딩

• 컴포넌트의 프로퍼티를 화면에 표시하면서, 동시에 유저가 입력한 값으로 프로퍼티를 업데이트 해야합니다.
• 즉, Data가 컴포넌트 클래스에서 화면으로, 화면에서 클래스로 전달되어야 한다는 뜻입니다.

<div>
	<label>name:
    	<input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
</div>

• [(ngModel)]는 Angular의 양방향 바인딩 문법입니다.
• ngModel은 Angular가 제공하는 기능인데, 아무것도 설정하지 않은 상태에서 이 기능을 사용할 순 없습니다.
• 그래서 FormsModule을 로드하고 사용해야합니다.

AppModule

• 개발자가 만든 Angular 구성요소, 서드파티 파일, 라이브러리를 Angular가 조합할 때는 이 구성요소들에 대한 정보가 필요합니다. 이런 정보를 메타데이터 (metadata)라고 합니다.
• 컴포넌트 클래스에 지정해야 하는 메타데이터는 @Component / 애플리케이션 동작에 필요한 메타데이터는 @Ngmodule 데코레이터에 지정합니다.
  • 이 중 @Ngmoduel 데코레이터 경우엔 가장 중요한 데코레이터입니다.

import { FormsModule } from '@angular/forms';

...
...

imports: [
	BrowserModule,
    FormsModule
]

• 이렇게 하면 앞서 했던, [(ngModel)] 양방향 바인딩이 사용이 가능합니다.
• 참고로 Component 역시 Ngmodule에 등록되어야 하는데, Angular CLI로 컴포넌트를 생성하는 경우엔 자동으로 추가시켜줍니다.

---

Template에서 For문과 이벤트 바인딩

<h2>My Heroes</h2>
<ul class="heroes">
	<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
    	<span class="badge">{{ hero.id }}</span> {{ hero.name }}
    </li>
</ul>

• li 태그에 *ngFor를 추가했으니 이를 반복하는 Angular 기능입니다. (*)이 붙은 것을 주의하세요.
• 이렇게 이벤트를 바인딩 하면 엘리먼트에서 발생하는 click을 클래스 컴포넌트에서 감지를 할 수 있습니다.
• 클래스 컴포넌트에도 해당 메소드를 추가해보도록 합시다.

selectedHero: Hero;
onSelect(hero: Hero): void {
	this.seletedHero = hero;
}

• selectedHero의 경우엔 처음에 시작하면 undefined로 선언됩니다.
• 이를 Template에서 그대로 사용하기엔 위험성이 있으니, Angular의 *ngIf를 사용해서 해결합시다.

<div *ngIf="selectedHero">
	<h2>{{ selectedHero.name | uppercase }} Details</h2>
    <div><span>id: </span>{{ selectedHero.id }}</div>
    <div>
    	<label>
        	<input [(ngModel)]="selectedHero.name" placeholder="name"/>
        </label>
    </div>
</div>

• Angular를 컴파일할 때, 아마 이러한 것들을 계산하여 DOM에 그리지 않으니, 바인딩 에러가 발생하지 않는거 같습니다.
• 추가적으로 Angular의 동작 방식에 대해서, 글을 작성해볼 생각입니다. 추후에 뵙죠 !

클래스 바인딩

• Angular가 제공하는 클래스 바인딩 문법을 사용하면 특정 조건에 따라 CSS 클래스를 추가하거나 제거할 수 있습니다.

[class.selected]="hero == selectedHero"

• 이런 식으로 템플릿에 추가하면 hero와 selectedHero가 같다면 selected 클래스를 태그에 추가합니다.

---

여기서 끊고 가겠습니다.

 

되게 Django랑 비슷한 부분이 많아서 재밌는거 같네요.

 

이상 Angular Tutorial with Docs - 1였습니다. ^_^