anchor.diff:      .file tsconfig.json
       .file typings.json
   :marked
  +  이번 챕터에서 논의한 코드 파일들입니다.
     Here are the code files we discussed in this chapter.
   
   +makeTabs(`
  
positive.code: include ../_util-fns
  
  :marked
    Our app is growing.
    Use cases are flowing in for reusing components, passing data to components, and creating more reusable assets. Let's separate the heroes list from the hero details and make the details component reusable.
  
    Run the <live-example></live-example> for this part.
  
  .l-main-section
  :marked
    ## Where We Left Off
    Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
  
  .filetree
  
negative.code: 
  .l-main-section
  :marked
    ## AppComponent 갱신
    ## Refresh the AppComponent
  :marked
    이제 애플리케이션이 `HeroDetailComponent`를 알게 되었으므로,
    `AppComponent` 템플릿에서 *히어로 상세* 부분을 지우고
    `HeroDetailComponent`를 나타내는 엘리먼트 태그를 추가합니다.
  
    Now that the application knows about our `HeroDetailComponent`,
    find the location in the `AppComponent` template where we removed the *Hero Detail* content
    and add an element tag that represents the `HeroDetailComponent`.
  code-example(format=".").
    &lt;my-hero-detail>&lt;/my-hero-detail>
  .l-sub-section
    :marked
      *my-hero-detail*은 `HeroDetailComponent` 메타데이터에서 설정한 `selector`의 이름입니다.
  
      *my-hero-detail* is the name we set as the  `selector` in the `HeroDetailComponent` metadata.
  :marked
    아래처럼 `AppComponent`의 `selectedHero` 프로퍼티를 `HeroDetailComponent` 엘리먼트의 `hero` 프로퍼티에 바인딩하기 전까지는
    두개의 컴포넌트가 협력할 수 없습니다.
    
    The two components won't coordinate until we bind the `selectedHero` property of the `AppComponent` 
    to the `HeroDetailComponent` element's `hero` property  like this
  code-example(format=".")
    &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
  :marked
    이제 `AppComponent` 템플릿은 아래처럼 되어야 합니다.
  
    The `AppComponent`’s template should now look like this
  
  +makeExample('toh-3/ts/app/app.component.ts', 'hero-detail-template', 'app.component.ts (template)')(format='.')
  :marked
    바인딩을 한 덕분에 `HeroDetailComponent`는 `AppComponent`에서 히어로를 받고 목록 아래쪽에 표시 할 수 있습니다.
    사용자가 새로운 히어로를 선택할 때마다 상세 부분이 업데이트 됩니다.
  
    Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
    The detail should update every time the user picks a new hero.
  
  :marked
    ### 잘 돌아가는군요!
    ### It works!
    
    브라우저에서 앱을 보면 히어로 목록이 보입니다.
    히어로를 선택하면 선택된 히어로의 상세 내용이 보입니다.
  
    When we view our app in the browser we see the list of heroes.
    When we select a hero we can see the selected hero’s details.
  
    기본적으로 새로운 것은 앱의 아무곳에서나 히어로 상세를 보여주기 위해
    `HeroDetailComponent`를 사용할 수 있다는 것입니다.
  
    What's fundamentally new is that we can use this `HeroDetailComponent`
    to show hero details anywhere in the app.
  
    첫번째 재사용 가능한 컴포넌트를 만들었네요!
  
    We’ve created our first reusable component!
  
    ### 앱 구조 리뷰
    ### Reviewing the App Structure
  
    이번장의 리팩토링을 거쳐 아래와 같은 구조가 되었는지 확인해보세요.
  
    Let’s verify that we have the following structure after all of our good refactoring in this chapter:
  
  .filetree
  