anchor.diff:      .file typings.json
   
   :marked
  +  ### 지속적인 앱 트랜스파일링과 실행
     ### Keep the app transpiling and running
  +
  +  터미널/콘솔 창을 열고, 
  +  TypeScript 컴파일러를 실행해 변경사항을 감시하도록 하고, 서버를 구동합니다.
  +
     Open a terminal/console window. 
     Start the TypeScript compiler, watch for changes, and start our server by entering the command:
   
  
positive.code:   app/mock-heroes.ts
    `)
  :marked
    ## The Road We’ve Travelled
    Let’s take stock of what we’ve built.
  
    * We created a service class that can be shared by many components.
    * We used the `ngOnInit` Lifecycle Hook to get our heroes when our `AppComponent` activates.
  
negative.code:   * We created mock hero data and imported them into our service.
    * We designed our service to return a !{_Promise} and our component to get our data from the !{_Promise}.
  
    이 파트의 <live-example></live-example>을 실행해 보세요.
  
    Run the <live-example></live-example> for this part.
  
    ## 앞으로의 여정  
    ### The Road Ahead
    공유 컴포넌트와 공유 서비스를 사용해 Tour of Heroes의 재사용성이 점점 높아지고 있습니다.
    대시보드를 만들고, 뷰 사이를 이동하도록 메뉴 링크를 추가하고, 템플릿의 데이터를 포매팅하면 좋겠네요.
    앱이 진화하고 있으므로 확장과 유지보수를 쉽게하려면 어떻게 설계해야 하는지도 배워보겠습니다.
  
    Our Tour of Heroes has become more reusable using shared components and services.
    We want to create a dashboard, add menu links that route between the views, and format data in a template.
    As our app evolves, we’ll learn how to design it to make it easier to grow and maintain.
  
    Angular 컴포넌트 라우터와 뷰 사이의 네이게이션에 대해서 [다음 튜토리얼](toh-pt5.html) 챕터에서 배울 것입니다.
  
    We learn about Angular Component Router and navigation among the views in the [next tutorial](toh-pt5.html) chapter.
  
  .l-main-section
  <a id="slow"></a>
  :marked
    ### 부록: 천천히 하기
    ### Appendix: Take it slow
  
    연결이 느린 경우를 실험할 수 있습니다.
  
    We can simulate a slow connection.
  
    `Hero` 를 임포트하고 `HeroService`에 아래 `getHeroesSlowly` 메소드를 추가하세요.
  
    Import the `Hero` symbol and add the following `getHeroesSlowly` method to the `HeroService`
  +makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes-slowly', 'app/hero.service.ts (getHeroesSlowly)')(format=".")
  :marked
    `getHeroes`처럼 이것도 !{_Promise}를 반환합니다.
    그러나 이번 !{_Promise}는 샘플 히어로 결과를 반환할 때 2초의 지연이 있습니다.
  
    Like `getHeroes`, it also returns a !{_Promise}. 
    But this !{_Promise} waits 2 seconds before resolving the !{_Promise} with mock heroes.
  
    `AppComponent`에서 `heroService.getHeroes`를 `heroService.getHeroesSlowly`로 교체한 다음
    앱이 어떻게 동작하는지 확인해보세요.
  
    Back in the `AppComponent`, replace `heroService.getHeroes` with `heroService.getHeroesSlowly`
    and see how the app behaves.