4. Service 만들기

1일 1포스팅이 목표였는데 어제는 회식으로 인해 포스팅하지 못했네요. 못한 포스팅은 주말동안 따라 잡아야겠어요.

오늘은 Angular에서 Service 만들기를 해보겠습니다. Service는 여러 Component에서 공통적으로 사용하는 것을 말합니다. Service는 어떻게 만들어지는지, 어떻게 사용되는지 알아보겠습니다.

오늘도 역시 npm start와 함께 시작합니다.

기본적으로 Service는 아래와 같은 형태를 가집니다.

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

@Injectable()
export class HeroService {
}

     . 간단하게 mock-heroes에 있는 HEROES 변수를 리턴해줍니다.

이렇게 만든 서비스를 실제 사용해보겠습니다. 기본적으로 Angular는 생성자 Injection을 지원합니다. app.component에서 사용해보겠습니다.

import {Component, OnInit} from '@angular/core';
import {Hero} from "./hero";
import {HeroDetailComponent} from "./hero-detail.component";
import {HeroService} from "./hero.service";

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    directives: [HeroDetailComponent],
    providers: [HeroService]
})

export class AppComponent implements OnInit {
    constructor(private heroService: HeroService) { }

    ngOnInit() {
        this.getHeroes();
    }

    title = 'Tour of Heroes';
    heroes: Hero[];
    selectedHero: Hero;

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

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

     . Typescript에서는 class 마다 constructor라는 생성자를 가질 수 있습니다. 생성자에 Parameter로 Service를 injection 할 수 있습니다. 이와 같이 new를 통해 서비스를 생성하지 않고 의존성 주입을 통해 service를 이용할 수 있습니다.

     . Component 선언부에 providers를 만들고 해당 서비스를 배열로 넣어줍니다.

     . service의 사용은 this.서비스명.함수(변수)와 같은 형태로 사용할 수 있습니다.

     . jQuery의 onReady 함수와 같은 역할을 하는 함수는 ngOnInit 입니다. ngOnInit은 OnInit 인터페이스를 구현해서 사용할 수 있습니다.

     . getHeroes라는 함수는 heroService의 getHeroes() 함수를 호출하는데, ngOnInit()에 이 함수를 호출하므로 이 Component가 만들어지자마자 호출이 되어집니다.

여기서 마무리를 하게 되면 sync한 구성이 됩니다. 즉 getHeroes() 함수가 완료되기 전까지는 사용자가 아무것도 할 수 없다는거죠. 그래서 요즘의 Web에서는  ajax를 반드시 사용합니다. ajax 같이 async하게 해주는 Promise라는 것을 사용해보겠습니다. Promise가 뭐죠? 약속입니다. 뭐에 대한 약속일까요? 어떠어떠한 것을 할거라는 약속입니다. 그렇습니다. 그냥 약속만 해놓는겁니다. 약속을 해놨으니 언젠가는 무언가를 하겠죠? 사용자는 약속만 해놓고 다른 행위를 하다보면 그 약속이 언젠가는 이뤄집니다. 이것이 async하게 움직이는 것입니다.

그럼 구현을 해볼까요?

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

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

@Injectable()
export class HeroService {
    getHeroes() {
        return Promise.resolve(HEROES);
    }
}

     . Promise.resolve(HEROES) : 약속을 결심합니다. 어떤 약속이죠? HEROES를 Return할거라는 약속입니다.

약속을 했으니 약속이 완료되었을때 무엇을 해야하는지를 정해야합니다. 해당 service를 app.component에서 사용해봅시다.

import {Component, OnInit} from '@angular/core';
import {Hero} from "./hero";
import {HeroDetailComponent} from "./hero-detail.component";
import {HeroService} from "./hero.service";

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    directives: [HeroDetailComponent],
    providers: [HeroService]
})

export class AppComponent implements OnInit {
    constructor(private heroService: HeroService) { }

    ngOnInit() {
        this.getHeroes();
    }

    title = 'Tour of Heroes';
    heroes: Hero[];
    selectedHero: Hero;

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

    getHeroes() {
        this.heroService.getHeroes().then(heroes => this.heroes = heroes);
    }
}

     . getHeroes() 부분이 변경되었습니다. this.heroService.getHeroes()를 통해서 Promise.resolve(HEROES)를 받아옵니다. then(그러면) 무엇을 할지를 then()의 파라미터로 넣어줍니다.

     . heroes => this.hereos = heroes는 람다식입니다. function(heroes) { this.hereos = heroes; } 와 의미적으로는 동일하다고 보시면 됩니다. 하지만 scope가 달라집니다. Javascript에서 함수를 선언하게 되면 함수안의 scope가 달라집니다. 하지만 람다식을 사용하면 동일 scope가 됩니다. (따라서 function으로 정의하면 this.hereos를 사용할 수 없습니다.)

이렇게 async하게 받아오는것까지 완료했습니다. async하게 받아오는건 Promise 말고도 Observer를 통해 구현하는 방법도 있지만 이것은 나중에 알아보도록 하겠습니다. 이렇게 공통적으로 사용할 수 있는 Service도 작성이 되었습니다. 즐코딩하세요:)