앵귤러 튜토리얼 - tour-of-heroes 만들기 (2)

앵귤러 튜토리얼 - tour-of-heroes 만들기 (2)

---

이제 영웅 구성 요소들을 만들어보자

ng g(generate) c(component) heroes

CLI app에 heroes라는 새로운 폴더가 생성된 것을 확인할 수 있다.

heroes.component.ts부터 살펴보자

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는 구성 요소의 메타 데이터를 지정하는 데코레이터 함수다.

이 함수가 가지고 있는 세 가지 메타 데이터 속성을 알아보자.

1. selector : 구성 요소의 CSS 요소 선택자 (html에서 <>를 써서 나타낼 이름)
2. templateUrl : 구성 요소의 템플릿 파일 위치 (만약에 주소가 아닌 코드를 쓰려면 template으로 쓰면 된다.)
3. styleUrls : 컴포넌트의 비공개 CSS 스타일 위치

현재 지정되어 있는 selector 이름 ‘app-heroes’는 HTML 요소의 이름과 일치하게 사용이 가능하다.

이제 hero를 만들어보도록 하자.

우리가 만들 첫번째 hero 이름은 Windstorm이다. heroes.component.ts에 추가해보자.

hero = 'Windstorm';

그리고 heroes.component.ts로 가서, hero를 가져올 수 있도록 import를 해준다.

import { Hero } from '../hero';

이제 heroes.component.html에서 이전 시간에 title을 가져오듯이 을 써주면된다.

현재 heroes는 하나의 컴포넌트다. 따라서 app.component로 데이터를 가져와야 한다. 현재 heroes의 selector가 이기 때문에 app.component.html에 이를 추가해준다.

<h1></h1>
<app-heroes></app-heroes>

브라우저를 다시보면, 타이틀 아래 영웅 이름까지 뜨는 것을 확인할 수 있다.

영웅 클래스 만들기

기본적인 만드는 법과 브라우저에 출력하는 법을 알아보았다. 이제 클래스를 생성하여 영웅들을 만들어 볼 계획이다. app폴더에 hero.ts를 생성하고 아래와 같이 작성해보자.

export class Hero {
  id: number;
  name: string;
}

외부로 보낼 수 있도록 export class로 만들고, Hero라는 클래스의 내용은 id와 name이라는 데이터 속성을 가졌다.(각각 number와 string 변수를 가진다.)

이제 이 클래스를 heroes 컴포턴트에서 활용할 수 있다. heroes.componet.ts로 돌아가서 다음처럼 영웅을 만들어보자.

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() {
  }

}

Hero를 가져와서 hero라는 문자열을 만들었고, 이전에 만들었던 Windstorm이라는 영웅에 id 값을 1로 주고 생성한 모습이다.

하지만 현재 브라우저에서 제대로 나타나지 않는다. 왜냐하면 클래스가 id값과 name을 같이 저장하고 있는 문자열이기 때문이다.

id값을 가져오려면 hero.id, name값을 가져오려면 hero.name을 이용하면 된다.

따라서 문자열을 출력할 수 있도록 heroes.componet.html의 코드를 다음과 같이 수정해본다.

<h2> Details</h2>
<div><span>id: </span></div>
<div><span>name: </span></div>

이제 브라우저에서 출력이 잘 나오는 모습을 확인할 수 있다.

---

파이프(|) 활용

만약, 글씨를 모두 대문자로 바꾸고 싶다면, 파이프를 활용하면 간편하게 이용가능하다.

hero.name을 대문자로 변경하려면, 코드는 다음과 같다.

<h2> Details</h2>

uppercase는 대문자로 바꿔주는 파이프 내장 함수 중 하나다.

이처럼 원하는 데이터에 파이프(

)를 써주고 뒤에 내장 함수를 써주면 간편하게 변화를 줄 수 있다. 내장 파이프 함수로는 문자열, 통화 금액, 날짜 및 디스플레이 형식 등이 있다.

(추가 내장 함수는 필요할 때 구글링을 통해 알아보자)

---

문자열 출력이 잘 이루어지고 있지만, 앞으로 영웅들의 수를 늘리게 되면 다시 문제가 발생한다. 이런 상황에 코딩할 때는 while이나 For를 이용한 반복문을 통해 출력했다는 걸 생각해보면 된다. 앵귤러에서는 ng를 통해 여러 기능들이 있으므로 앞으로 잘 보고 익혀보도록 하자.

나중에 영웅 이름을 수정할 수 있도록 텍스트 형식인 input을 주어 수정할 것이다. 수정한 heroes.component.html은 다음과 같다.

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

여기서 ngModel이란 무엇인가?

[(ngModel)]은 앵귤러의 양방향 데이터 바인딩 구문이다. 현재 코드에서는 [(ngModel)]을 “hero.name”으로 설정했다.

자세히 설명하면, hero.name의 값을 텍스트로 입력하도록 만든 곳(input)에서 HTML과 양방향으로 데이터를 전송시키겠다는 뜻이다. 즉, 텍스트 파일 내에서 영웅 이름을 수정하면, html에서도 동시에 이를 전송받아 나타내준다.

• ngModel을 사용하려면 모듈을 추가로 설정해주어야 한다. 지금 상태에서는 앱에서 동작하지 않으며, 오류를 보면 다음과 같이 뜨는 것을 볼 수 있다.

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

따라서 이 옵션에 속하는 FormsModule을 저장해주도록 하자.

app.module.ts로 돌아가서, 시작지점에 다음과 같은 import를 추가시킨다.

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

imports: [
  BrowserModule,
  FormsModule // 추가 부분
],

이제 브라우저에서 오류 없이 잘 동작이 가능할 것이다.

궁금점 : HeroesComponent는 내가 따로 선언하지 않았는데 어떻게 작동한거죠?

우리가 처음 ng g s heroes를 만들 때 app.module.ts에서는 자동적으로 선언이 만들어진다.

app.module에 가보면 내가 입력하지 않았지만 이렇게 추가된 모습을 확인할 수 있다.

import { HeroesComponent } from './heroes/heroes.component';

declarations: [
  AppComponent,
  HeroesComponent
],

이처럼 우리가 터미널을 통해 컴포넌트를 생성해주면 module에서 자동적으로 선언을 도와줘서 추가로 import를 하지 않아도 된다.

요약

1. CLI를 통해서 heros 컴포넌트를 생성했습니다.

2. heroes 컴포넌트에 존재하는 셸(ts, html, css)을 통해 추가로 브라우저에 표시를 해보았습니다. ( <app-heroes>)

3. 파이프(|)가 무엇인지 알아볼 수 있었습니다.

4. ngModel 지시문과 양방향 데이터 바인딩에 대해 알아봤습니다.

5. FormsModule을 통해 ngModel을 활성화 시킬 수 있다는 걸 배웠습니다.

6. 컴포넌트를 생성하면 appModule에서 이루어지는 선언이 어떤 것인지 알았습니다.