From d3f6c2e6d10c5a32b395562fe46bf060cfb62bab Mon Sep 17 00:00:00 2001 From: Gyujin Cho Date: Sat, 22 Oct 2016 14:37:04 +0900 Subject: [PATCH 1/2] Trans(tutorial/index.jade, toh-pt1.jade) --- public/docs/ts/latest/tutorial/index.jade | 55 ++++++++++ public/docs/ts/latest/tutorial/toh-pt1.jade | 114 ++++++++++++++++++++ 2 files changed, 169 insertions(+) diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade index 21f67233..d6300e1c 100644 --- a/public/docs/ts/latest/tutorial/index.jade +++ b/public/docs/ts/latest/tutorial/index.jade @@ -3,15 +3,34 @@ include ../_util-fns // #docregion intro :marked # Tour of Heroes: the vision + # Tour of Heroes: the vision + + 본 튜토리얼의 목표는 소속된 히어로 집단을 관리하는 인력사무소를 위한 앱을 만드는 것입니다. + 히어로들도 먹고 살아야 하니까요. Our grand plan is to build an app to help a staffing agency manage its stable of heroes. Even heroes need to find work. + 물론 엄청난 걸 만들 건 아니고, 살짝 발만 담궈 볼 거예요. + 히어로 명단을 가져와서 보여주기, 선택한 히어로의 상세정보를 편집하기, + 그리고 히어로에 관한 데이터를 보여주는 다양한 뷰를 살펴보기 등 + 본격적인 data-driven 애플리케이션이라면 으레 있을 법한 기능들을 구현할 것입니다. + Of course we'll only make a little progress in this tutorial. What we do build will have many of the features we expect to find in a full-blown, data-driven application: acquiring and displaying a list of heroes, editing a selected hero's detail, and navigating among different views of heroic data. + Tour of Heroes는 Angular의 핵심이자 기본이 되는 내용을 다룹니다. + - 엘리먼트를 토글해서 히어로 목록을 보여주기 위한 내장 지시자(built-in directive) + - 히어로의 상세정보를 보여주는 컴포넌트, 히어로 목록을 보여주는 컴포넌트 + - 일방향 데이터 바인딩을 이용한 읽기 전용 데이터 + - 양방향 데이터 바인딩을 이용한 모델 정보를 편집할 수 있는 입력필드 + - 키 스트로크와 클릭 같은 사용자 이벤트를 바인딩한 컴포넌트 메서드 + - 파이프를 이용한 데이터 가공 + - 히어로를 한 데 모으기 위한 shared service + - 여러 뷰 사이를 오가기 위한 라우팅 + The Tour of Heroes covers the core fundamentals of Angular. We’ll use built-in directives to show/hide elements and display lists of hero data. We’ll create a component to display hero details and another to show an array of heroes. @@ -20,17 +39,27 @@ include ../_util-fns We’ll learn to select a hero from a master list and edit that hero in the details view. We'll format data with pipes. We'll create a shared service to assemble our heroes. And we'll use routing to navigate among different views and their components. + Angular를 사용해서 원하는 건 뭐든지 만들 수 있겠다는 자신감을 가질 수 있도록 Angular의 핵심을 충분히 다룰 것입니다. + 대부분의 내용은 초심자를 위한 입문 수준에서 설명할 것입니다. + 대신 해당 챕터의 심화 내용을 확인할 수 있는 링크가 곳곳에 충분히 있을 것입니다. + We’ll learn enough core Angular to get started and gain confidence that Angular can do whatever we need it to do. We'll be covering a lot of ground at an introductory level but we’ll find plenty of links to chapters with greater depth. + 을 한 번 실행해 보세요. + Run the . // #enddocregion intro // #docregion main .l-main-section :marked ## The End Game + ## The End Game + + 어떤 걸 만들지 좀 더 구체적으로 살펴보기 위해 + 가장 용감한 히어로들의 정보를 열람할 수 있는 "대시보드"의 와이어프레임을 봅시다. Here's a visual idea of where we're going in this tour, beginning with the "Dashboard" view and our most heroic heroes: @@ -39,9 +68,15 @@ figure.image-display img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard") :marked + 대시보드 윗편에는 "Dashboard"와 "Heroes"라는 링크가 있습니다. + 이 링크들을 통해 대시보드와 히어로 상세 화면 사이를 이동할 수 있습니다. + Above the dashboard are two links ("Dashboard" and "Heroes"). We could click them to navigate between this Dashboard and a Heroes view. + "Magneta"라는 히어로의 이름을 직접 클릭하면 라우터를 통해 + "Hero Details" 화면으로 이동합니다. 여기서 히어로의 이름을 바꿀 수 있습니다. + Instead we click the dashboard hero named "Magneta" and the router takes us to a "Hero Details" view of that hero where we can change the hero's name. @@ -49,6 +84,10 @@ figure.image-display img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app") :marked + "Back" 버튼을 누르면 대시보드로 돌아갑니다. + 가장 위에 있는 링크들은 메인 화면 중 하나로 연결되어 있습니다. + "Heroes"를 눌러서 "Heroes" 마스터 리스트 화면으로 이동해 봅시다. + Clicking the "Back" button would return us to the "Dashboard". Links at the top can take us to either of the main views. We'll click "Heroes". The app takes to the "Heroes" master list view. @@ -57,17 +96,25 @@ figure.image-display img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app") :marked + 다른 히어로를 클릭하면 목록 아래에 있는 선택한 히어로의 미니 상세정보가 나타납니다. + We click a different hero and the readonly mini-detail beneath the list reflects our new choice. + "View Details" 버튼을 클릭하면 선택한 히어로의 정보를 편집할 수 있는 화면으로 이동합니다. + We click the "View Details" button to drill into the editable details of our selected hero. + 아래 다이어그램에 가능한 내비게이션 방법이 모두 표시되어 있습니다. + The following diagram captures all of our navigation options. figure.image-display img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") :marked + 앱의 실제 작동 모습입니다. + Here's our app in action figure.image-display @@ -76,12 +123,20 @@ figure.image-display .l-main-section :marked ## Up Next + ## Up Next + + 차근차근 Tour of Heroes를 같이 만들어 봅시다. + 각 단계별로 만족시켜야 요구사항들이 있습니다. 다른 수많은 앱을 만들 때와 마찬가지죠. We’ll build this Tour of Heroes together, step by step. We'll motivate each step with a requirement that we've met in countless applications. Everything has a reason. + 앱을 만드는 과정에서 Angular의 핵심적인 기본 원칙들을 만나게 될 것입니다. + And we’ll meet many of the core fundamentals of Angular along the way. + [그럼 시작해 봅시다!](./toh-pt1.html) + [Let's get started!](./toh-pt1.html) // #enddocregion main diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index c75a3f81..d60746ce 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -1,17 +1,27 @@ include ../_util-fns :marked + # 옛날 옛적에 # Once Upon a Time + 모든 이야기는 시작점이 있습니다. 우리의 이야기는 [QuickStart](../quickstart.html)가 끝나는 곳에서 시작합니다. + Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends. + 이 파트의 을 실행해 보세요. + Run the for this part. + `angular2-tour-of-heroes` 폴더를 만들고, [QuickStart](../quickstart.html)를 따라가면서 + Tour of Heroes에 필요한 필수 구성 요소와 핵심 파일을 설치하고 필요한 폴더 구조를 구축하십시오. + Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes. include ../_quickstart_repo :marked + 아래와 같은 구조를 만들어야 합니다. + We should have the following structure: .filetree @@ -31,80 +41,132 @@ include ../_quickstart_repo .file tsconfig.json .file typings.json :marked + ## 트랜스파일러와 앱 서버 작동시키기 ## Keep the app transpiling and running + + TypeScript 컴파일러를 실행해 변경사항을 감시하도록 하고, 서버를 시작해야 합니다. + We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing code-example(language="bash"). npm start :marked + 이 명령어는 컴파일러를 watch 모드로 실행하고, 서버를 시작하며, 앱을 브라우저에 띄우고, + 우리가 Tour of Heroes를 만들어 나가는 동안 계속 앱을 실행상태로 둘 것입니다. + This command runs the compiler in watch mode, starts the server, launches the app in a browser, and keeps the app running while we continue to build the Tour of Heroes. .l-main-section :marked + ## 히어로를 보여줘 ## Show our Hero + + 앱에서 히어로 정보를 보여주려고 합니다. + We want to display Hero data in our app + `AppComponent`에 두 가지 속성을 추가합니다. 하나는 애플케이션 이름을 위한 `title` 속성이고, + 다른 하나는 "Windstorm"이라는 히어로를 지정할 `hero` 속성입니다. + Let's add two properties to our `AppComponent`, a `title` property for the application name and a `hero` property for a hero named "Windstorm". +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'app-component-1', 'app.component.ts (AppComponent class)')(format=".") :marked + 이제 `@Component` 데코레이션의 템플릿에 이 새로운 속성들에 대한 데이터 바인딩을 추가합니다. + Now we update the template in the `@Component` decoration with data bindings to these new properties. +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero') :marked + 브라우저가 자동으로 새로고침되고 애플리케이션과 히어로의 이름을 보여줄 것입니다. + The browser should refresh and display our title and hero. + 이중 중괄호는 앱으로 하여금 컴포넌트의 `title`과 `hero` 속성을 읽고 렌더하도록 합니다. + 이것이 일방향 데이터 바인딩 중 "보간(interpolation)" 형식입니다. + The double curly braces tell our app to read the `title` and `hero` properties from the component and render them. This is the "interpolation" form of one-way data binding. .l-sub-section :marked + 보간에 대해 [Displaying Data chapter](../guide/displaying-data.html)에서 더 자세히 알아 보세요. + Learn more about interpolation in the [Displaying Data chapter](../guide/displaying-data.html). :marked + ### 히어로 객체 ### Hero object + 지금은 히어로가 이름만 가지고 있습니다. 더 많은 속성이 필요합니다. + `hero`를 문자열에서 클래스로 바꿔 봅시다. + At the moment, our hero is just a name. Our hero needs more properties. Let's convert the `hero` from a literal string to a class. + `id`와 `name` 속성을 가진 `Hero` 클래스를 만듭니다. + 지금은 일단 `app.component.ts` 파일의 상단에 가까운 곳에 만들도록 합시다. import 문 바로 아래에 두면 됩니다. + Create a `Hero` class with `id` and `name` properties. For now put this near the top of the `app.component.ts` file, just below the import statement. +makeExample('toh-1/ts/app/app.component.ts', 'hero-class-1', 'app.component.ts (Hero class)')(format=".") :marked + 이제 `Hero` 클래스가 있으니 컴포넌트의 `hero` 속성이 `Hero` 타입의 인스턴스가 되도록 합니다. + id는 `1`, 이름은 "Windstorm"인 상태로 초기화합니다. + Now that we have a `Hero` class, let’s refactor our component’s `hero` property to be of type `Hero`. Then initialize it with an id of `1` and the name, "Windstorm". +makeExample('toh-1/ts/app/app.component.ts', 'hero-property-1', 'app.component.ts (hero property)')(format=".") :marked + 히어로를 문자열에서 객체로 변경했기 때문에 템플릿 내에서 히어로의 `name` 속성을 참조하는 바인딩을 업데이트해야 합니다. + Because we changed the hero from a string to an object, we update the binding in the template to refer to the hero’s `name` property. +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-2') :marked + 브라우저 새로고침 후에도 히어로의 이름이 보이는군요. + The browser refreshes and continues to display our hero’s name. + ### HTML 추가 ### Adding more HTML + + 이름을 보여주는 것도 좋지만, 히어로의 모든 속성을 보여주고 싶네요. + `id`를 위한 `
`와 `name`을 위한 `
`를 각각 추가합시다. + Displaying a name is good, but we want to see all of our hero’s properties. We’ll add a `
` for our hero’s `id` property and another `
` for our hero’s `name`. +makeExample('toh-1/ts-snippets/app.component.snippets.pt1.ts', 'show-hero-properties') :marked + 이런, 문자열이 너무 기네요. 템플릿에 오타라도 내지 않으려면 이 문제를 처리해야겠습니다. + Uh oh, our template string is getting long. We better take care of that to avoid the risk of making a typo in the template. + ### 멀티라인 템플릿 문자열 ### Multi-line template strings + 더 읽기 좋은 템플릿을 만들기 위해 문자열 접합(string concatenation)을 할 수도 있지만 + 그것도 조금만 길어지면 금방 보기 안 좋아집니다. 읽기 어렵고, 철자를 잘못 쓰기도 쉽죠. + ES2015와 TypeScript에서 지원하는 템플릿 문자열 기능을 활용합시다. + We could make a more readable template with string concatenation but that gets ugly fast, it is harder to read, and it is easy to make a spelling error. Instead, let’s take advantage of the template strings feature in ES2015 and TypeScript to maintain our sanity. + 문자열을 둘러싼 따옴표를 역따옴표로 변경하고 + `

`, `

`와 `
`를 필요한 줄로 이동시킵니다. + Change the quotes around the template to back-ticks and put the `

`, `

` and `
` elements on their own lines. @@ -113,6 +175,11 @@ code-example(language="bash"). .callout.is-important header A back-tick is not a single quote :marked + **주의** 역따옴표(`)는 작은 따옴표(')와 유사하게 생겼습니다만 + 완전히 다른 문자입니다. 역따옴표는 문자열을 구분하는 것보다 더 많은 일을 합니다. + 여기서는 템플릿을 여러 줄로 작성하기 위한 용도로만 사용할 것입니다. + 역따옴표 안의 모든 것이 하나의 템플릿 문자열에 포합됩니다. + **Be careful!** A back-tick (`) looks a lot like a single quote ('). It's actually a completely different character. Back-ticks can do more than demarcate a string. @@ -122,26 +189,43 @@ code-example(language="bash"). .l-main-section :marked + ## 히어로 편집하기 ## Editing Our Hero + 히어로의 이름을 텍스트박스에서 편집할 수 있으면 좋겠네요. + We want to be able to edit the hero name in a textbox. + 히어로 이름의 `