anchor.diff:  +makeExample('toh-3/ts/app/hero-detail.component.ts', 'template', 'app/hero-detail.component.ts (template)')(format=".")
   
   :marked
  +  이제 히어로 상세 레이아웃은 `HeroDetailComponent`에만 존재합니다.
  +
     Now our hero detail layout exists only in the `HeroDetailComponent`.
   
  +  #### *히어로* 프로퍼티 추가하기
     #### Add the *hero* property
  +
  +  앞서 얘기한 `hero` 프로퍼티를 컴포넌트 클래스에 추가합니다.
  +
     Let’s add that `hero` property we were talking about to the component class.
   +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero')
   :marked
  -  Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app.component.ts` file. 
  -  We have two components, each in their own file, that need to reference the `Hero` class. 
  -  
  +  앗. `hero` 프로퍼티를 `Hero` 타입으로 선언했지만 `Hero` 클래스는 `app.component.ts` 파일에 있습니다.
  +  두개의 콤포넌트가 각각의 파일에 있으므로 `Hero` 클래스를 참조해야 합니다.
  +
  +  Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app.component.ts` file.
  +  We have two components, each in their own file, that need to reference the `Hero` class.
  +
  +  `app.component.ts` 에 있는 `Hero` 클래스를 `hero.ts`로 이전하여 문제를 해결하겠습니다.
  +
     We solve the problem by relocating the `Hero` class from `app.component.ts` to its own `hero.ts` file.
   
   +makeExample('toh-3/ts/app/hero.ts', '', 'app/hero.ts')(format=".")
   
   :marked
  -  We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files. 
  +  양쪽 컴포넌트 파일에서 참조를 해야 하므로 `hero.ts`의 `Hero` 클래스를 익스포트합니다.
  +  아래 임포트 구문을 **`app.component.ts`와 `hero-detail.component.ts`** 상단에 추가합니다.
  +
  +  We export the `Hero` class from `hero.ts` because we'll need to reference it in both component files.
     Add the following import statement near the top of **both `app.component.ts` and `hero-detail.component.ts`**.
   
   +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-import')
   
   :marked
  +  #### *히어로*는 ***인풋*** 프로퍼티
     #### The *hero* property is an ***input***
  -  
  -  The `HeroDetailComponent` must be told what hero to display. Who will tell it? The parent `AppComponent`! 
  -  
  -  The `AppComponent` knows which hero to show: the hero that the user selected from the list. 
  +
  +  `HeroDetailComponent`에게 어떤 히어로를 보여줘야 할지 알려줘야 합니다. 누가 알려줄까요? 부모인 `AppComponent` 입니다!
  +
  +  The `HeroDetailComponent` must be told what hero to display. Who will tell it? The parent `AppComponent`!
  +
  +  `AppComponent`는 어떤 히어로를 보여줘야 할지 알고 있습니다. 바로 사용자가 목록에서 선택한 히어로 입니다.
  +  사용자의 선택은 `selectedHero` 프로퍼티에 저장되어 있습니다.
  +
  +  The `AppComponent` knows which hero to show: the hero that the user selected from the list.
     The user's selection is in its `selectedHero` property.
  -  
  +
  +  조만간 `AppComponent`를 업데이트하여 `selectedHero` 프로퍼티를 `HeroDetailComponent`의 `hero` 프로퍼티에 바인딩하겠습니다.
  +  바인딩은 *아마도* 이렇게 될 것입니다.
  +
     We will soon update the `AppComponent` template so that it binds its `selectedHero` property
     to the `hero` property of our `HeroDetailComponent`. The binding *might* look like this:
   code-example(format=".").
     &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
   :marked
  +  `hero` 속성이 프로퍼티 바인딩의 ***타겟*** 입니다. &mdash; (=) 의 왼쪽에 꺽쇠괄호로 둘러 쌓여 있는 것에 주의하세요.
  +
     Notice that the `hero` property is the ***target*** of a property binding &mdash; it's in square brackets to the left of the (=).
  -  
  +
  +  Angular는 ***타겟*** 프로퍼티를 ***인풋*** 프로퍼티로 선언할 것을 요구합니다.
  +  그렇게 하지 않으면 Angular는 바인딩을 거부하고 에러를 던질 것입니다.
  +
     Angular insists that we declare a ***target*** property to be an ***input*** property.
     If we don't, Angular rejects the binding and throws an error.
   .l-sub-section
     :marked
  -    We explain input properties in more detail [here](../guide/attribute-directives.html#why-input) 
  -    where we also explain why *target* properties require this special treatment and 
  +    인풋 속성은 [여기](../guide/attribute-directives.html#why-input)에서 더 자세하게 알아보세요.
  +    이 링크에서 왜 *타겟* 프로퍼티는 특별한 처리가 필요한지 *소스* 프로퍼티는 그렇지 않은지 설명하고 있습니다.
  +
  +    We explain input properties in more detail [here](../guide/attribute-directives.html#why-input)
  +    where we also explain why *target* properties require this special treatment and
       *source* properties do not.
   :marked
  -  There are a couple of ways we can declare that `hero` is an *input*. 
  +  `hero`를 *인풋*으로 선언하는 방법은 몇가지가 있습니다.
  +  가장 *선호*하는 방법으로 해보겠습니다. 앞서 임포트한 `@Input` 데코레이터를 `hero` 프로퍼티에 어노테이팅 하는 것입니다.
  +
  +  There are a couple of ways we can declare that `hero` is an *input*.
     We'll do it the way we *prefer*, by annotating the `hero` property with the `@Input` decorator that we imported earlier.
   +makeExample('toh-3/ts/app/hero-detail.component.ts', 'hero-input')(format='.')
  -  
  +
   .l-sub-section
     :marked
  -    Learn more about the `@Input()` decorator in the 
  +    `@Input()` 데코레이터에 대해 
  +    [Attribute Directives](../guide/attribute-directives.html#input) 에서 더 자세하게 알아보세요.
  +
  +    Learn more about the `@Input()` decorator in the
       [Attribute Directives](../guide/attribute-directives.html#input) chapter.
   
   .l-main-section
   :marked
  +  ## AppModule 갱신
     ## Refresh the AppModule
  +
  +  애플리케이션의 root 모듈인 `AppModule`로 다시 돌아와서, `HeroDetailComponent`를 사용하도록 설정하겠습니다.
  +
     We return to the `AppModule`, the application's root module, and teach it to use the `HeroDetailComponent`.
   
  +  `HeroDetailComponent`를 임포트하여 참조 가능하도록 합니다.
  +
     We begin by importing the `HeroDetailComponent` so we can refer to it.
   
   +makeExample('toh-3/ts/app/app.module.ts', 'hero-detail-import')
   
   :marked
  +  다음으로 `NgModule` 데코레이터의 `declarations` 배열에 `HeroDetailComponent`를 추가합니다.
  +  이 배열에는 우리가 생성했거나 애플리케이션 모듈에 속한 모든 컴포넌트, 파이프, 지시자를 추가할 수 있습니다.
  +
     Then we add `HeroDetailComponent` to the `NgModule` decorator's `declarations` array.
     This array contains the list of all components, pipes, and directives that we created
     and that belong in our application's module.
  
positive.code:       .file app.module.ts
        .file main.ts
      .file node_modules ...
      .file typings ...      
      .file index.html
      .file package.json
      .file styles.css
  
negative.code:   list the directives in the `NgModule` decorator's `declarations` array.
    * We learned to bind a parent component to a child component.
  
    이 파트의 <live-example></live-example>을 실행해 보세요.
  
    Run the <live-example></live-example> for this part.
  
  .l-main-section
  :marked
    ## 앞으로의 여정
    ## The Road Ahead
  
    컴포넌트 공유를 통해 Tour of Heroes의 재사용성이 높아졌습니다.
  
    Our Tour of Heroes has become more reusable with shared components.
  
    여전히 `AppComponent`에서 샘플 데이터를 사용하고 있습니다.
    지속 가능한 개발형태는 아닙니다.
    데이터 접근은 서비스로 분리하여 데이터가 필요한 컴포넌트끼리 공유하도록
    리팩토링을 해야합니다.
  
    We're still getting our (mock) data within the `AppComponent`.
    That's not sustainable.
    We should refactor data access to a separate service
    and share it among the components that need data.
  
    [다음 튜토리얼](toh-pt4.html) 에서 서비스를 생성하는 것을 배워보겠습니다.
  
    We’ll learn to create services in the [next tutorial](toh-pt4.html) chapter.
  