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

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

---

이어서, 오늘은 서비스에 대해서 알아보고자 한다.

서비스가 필요한 이유는 무엇일까?

현재 HeroesComponent는 가짜 데이터를 받아 표시하고 있다. 컴포넌트는 고의적으로 가짜 데이터를 표시하면 안되며, 데이터를 직접적으로 가져오거나 저장해서는 안된다.

컴포넌트는 데이터를 표현하고, 액세스를 서비스에 위임하는데 집중해야한다.

쉽게 말하면, 서비스는 여러 컴포넌트에서 필요로 하는 기능을 묶은 클래스다. 즉 앵귤러 사이트에서 사용되는 특정한 기능들을 서비스로 생성한 후, 해당 기능이 요구되는 컴포넌트는 이 서비스로 불러와서 사용할 수 있다.

따라서, 코드가 중복되는 것을 막아주며 코드 관리의 편의성이 증가해 프로그램의 효율성을 높일 수 있는 장점이 있다.

이번 튜토리얼에서, HeroService에 모든 어플리케이션 클래스들이 영웅들을 사용할 수 있도록 만들 것이다.

앵귤러 CLI를 통해 서비스를 만들어 보자.

ng generate service hero

이제 app 폴더 안에 hero.service.ts가 생긴 것을 확인할 수 있다.

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

@Injectable()
export class HeroService {

  constructor() { }

}

@Injectable()이란?

이 클래스를 서비스로 만들어주는 기능을 하는 데코레이터 함수다. 따라서 서비스 클래스에 반드시 붙여야 한다.

이제 영웅 데이터를 가져와보자.

HeroService는 웹 서비스, 로컬 스토리지, 모의 데이터 소스에서 영웅 데이터를 얻을 수 있다.

우선 이번 튜토리얼에서 구현은 모의 영웅을 통해 만들어보도록 한다.

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

모의 영웅 getHeroes를 반환하는 메소드를 추가하자.

getHeroes(): Hero[] {
  return HEROES;
}

HeroService를 제공하기 위해서, AppModule에 직접 추가를 시켜주어야 한다.

app.module.ts의 providers 배열 안에 HeroService를 추가시키면 import는 자동으로 생성되는 모습을 볼 수 있다.

providers: [
    HeroService,
/* . . . */
  ],

이제 HeroesComponent에서 HEROES는 더이상 필요하지 않다.

과감히 삭제하고, 앞으로 영웅 데이터를 책임질 HeroService를 import시키자.

import { HeroService } from '../hero.service';

또한 heroes 속성도 간단한 선언으로 대체한다.

heroes: Hero[];

생성자에 private 매개 변수를 추가한다.

constructor(private heroService: HeroService) { }

이제 getHeroes() 추가해서 서비스에서 영웅을 검색하는 함수를 만든다.

getHeroes(): void {
  this.heroes = this.heroService.getHeroes();
}

ngOnInit을 이용해 위에 저장한 getHeroes를 불러오도록 하면 된다.

ngOnInit() {
  this.getHeroes();
}

이렇게 지금까지 정리된 heroes.component.ts는 아래와 같다.

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

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

  heroes: Hero[];

  selectedHero: Hero;

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


  getHeroes(): void {
    this.heroService.getHeroes()
  }

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

}

현재 앱을 실행했을 때 작동하지 않는 부분이 있다. 바로 이 부분이다.

this.heroes = this.heroService.getHeroes();