diff --git a/public/docs/ts/latest/cookbook/component-relative-paths.jade b/public/docs/ts/latest/cookbook/component-relative-paths.jade
index df9845c8..3c0d94e1 100644
--- a/public/docs/ts/latest/cookbook/component-relative-paths.jade
+++ b/public/docs/ts/latest/cookbook/component-relative-paths.jade
@@ -1,33 +1,56 @@
include ../_util-fns
:marked
+ ## *컴포넌트-상대* URL을 컴포넌트 템플릿과 스타일에 쓰기
+
## Write *Component-Relative* URLs to component templates and style files
+ Angular에서는 컴포넌트들을 외부 템플릿이나 외부 스타일 파일을 참조하는 경우가 많습니다.
+ 이러한 파일들은 `@Component` 메타데이터의 `templateUrl`과 `styleUrls` 속성안의 URL들로 식별합니다.
+
Our components often refer to external template and style files.
We identify those files with a URL in the `templateUrl` and `styleUrls` properties of the `@Component` metadata
as seen here:
+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','absolute-config')(format='.')
:marked
+ 기본적으로 어플리케이션 루트까지의 전체 경로를 *표시해야만* 합니다.
+ 이것은 어플리케이션 루트로부터 확실하게 위치를 표현할 수 있기 때문에 때문에 ***절대 경로***라고 부릅니다.
+
By default, we *must* specify the full path back to the application root.
We call this an ***absolute path*** because it is *absolute* with respect to the application root.
+ *절대 경로*에는 두가지 문제점이 있습니다.
+
There are two problems with an *absolute path*:
+ 1. 어플리케이션 루트까지의 모든 경로를 기억해야만 합니다.
+
1. We have to remember the full path back to the application root.
+ 1. 어플리케이션 파일 구조에서 컴포넌트를 이동할때 URL을 업데이트 해야 합니다.
+
1. We have to update the URL when we move the component around in the application files structure.
+ 컴포넌트의 클래스 파일에 *상대적으로* 으로 템플릿과 스타일 위치들을 표시할 수 있다면 어플리케이션 컴포넌트들을 유지하고 작성하는 것이 더 쉬워지겠죠.
+
It would be much easier to write and maintain our application components if we could specify template and style locations
*relative* to their component class file.
+ *그렇게 할 수 있습니다.*
+
*We can!*
.alert.is-important
:marked
+ 어플리케이션을 `commonjs` 모듈 처럼 작성하고 `systemjs`나 `webpack`같은 적절한 패키지 로더로 적재한다면 위치를 상대적으로 명시하는 것이 가능합니다.
+
We can if we build our application as `commonjs` modules and load those modules
with a suitable package loader such as `systemjs` or `webpack`.
Learn why [below](#why-default).
+
+ Angular CLI는 이 기술을 사용하며 기본적으로 *컴포넌트 상대 경로* 접근법을 사용합니다.
+ CLI 사용자들은 이 장을 건너 뛰어도 되고 아니면 어떻게 동작하는지 이해하기 위해 읽으셔도 됩니다.
The Angular CLI uses these technologies and defaults to the
*component-relative path* approach described here.
@@ -36,13 +59,22 @@ include ../_util-fns
.l-main-section
:marked
+ ## _컴포넌트-상대_ 경로
+
## _Component-Relative_ Paths
+ 템플릿 파일과 스타일 URL 을 컴포넌트 클래스 파일에 *상대적으로* 표시하는 것이 목적이기 때문에 ***컴포넌트-상대 경로***라는 이름이 붙었습니다.
+
Our goal is to specify template and style URLs *relative* to their component class files,
hence the term ***component-relative path***.
+ 관련된 컴포넌트 파일들을 잘 알려진 위치에 두는 관습을 따르는 것이 성공의 비결입니다.
+
The key to success is following a convention that puts related component files in well-known locations.
+ 컴포넌트 템플릿과 컴포넌트의 특화된 스타일 파일들을 동반하는 컴포넌트 클래스 파일의 *자매*로 관리하는 것을 추천합니다.
+ 아래의 예시를 보면 `SomeComponent`를 위한 세 파일이 `app` 폴더의 다음에 나란히 위치하고 있는 모습을 볼 수 있습니다.
+
We recommend keeping component template and component-specific style files as *siblings* of their
companion component class files.
Here we see the three files for `SomeComponent` sitting next to each other in the `app` folder.
@@ -55,27 +87,47 @@ include ../_util-fns
.file some.component.ts
.file ...
:marked
+ 어플리케이션의 크기가 커지면 커질수록 파일들과 폴더들이 많아지고 디렉터리 구조가 더 깊어질 것 입니다.
+ 그렇지만 분리할수 없는 자매들끼리 묶어서 컴포넌트 파일들을 이동하는 한 괜찮습니다.
+
We'll have more files and folders — and greater folder depth — as our application grows.
We'll be fine as long as the component files travel together as the inseparable siblings they are.
+ ### *moduleId* 설정하기
+
### Set the *moduleId*
+ 이러한 파일 구조 규칙을 적용하면, `@Component` 메타데이터의 `moduleId` 속성을 아래와 같이 적용하는 것으로
+ 템플릿과 스타일 파일들의 위치를 컴포넌트 클래스 파일에 상대적으로 표현할 수 있습니다.
++makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','module-id')(format='.')
+
Having adopted this file structure convention, we can specify locations of the template and style files
relative to the component class file simply by setting the `moduleId` property of the `@Component` metadata like this
+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','module-id')(format='.')
:marked
+ `src/app` 기본 경로를 `templateUrl` 과 `styleUrls` 에서 제거하고 이를 `./`로 변경하세요.
+ 그 결과는 아래와 같습니다.
++makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','relative-config')(format='.')
+
We strip the `src/app/` base path from the `templateUrl` and `styleUrls` and replace it with `./`.
The result looks like this:
+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','relative-config')(format='.')
.alert.is-helpful
:marked
+ Webpack 유저들은 [다른 접근법](#webpack) 을 선호할 수도 있습니다.
+
Webpack users may prefer [an alternative approach](#webpack).
.l-main-section
:marked
+ ## 소스
+
## Source
+ **여기에서 **
+ 를 보고 다운로드하거나 관련된 소스를 아래에서 확인하실 수 있습니다
+
**We can see the **
and download the source code from there
or simply read the pertinent source here.
@@ -90,39 +142,70 @@ include ../_util-fns
a#why-default
.l-main-section
:marked
+ ## 부록 : *컴포넌트-상대* 가 기본 설정이 아닌 이유
+
## Appendix: why *component-relative* is not the default
+ *컴포넌트-상대* 경로는 명백히 *절대*경로보다 뛰어납니다.
+ 왜 Angular가 기본으로 *절대*경로를 사용할까요?
+ 왜 `moduleId`를 `직접` 설정해야 할까요? 왜 Angular가 기본적으로 설정할 수 없나요?
+
A *component-relative* path is obviously superior to an *absolute* path.
Why did Angular default to the *absolute* path?
Why do *we* have to set the `moduleId`? Why can't Angular set it?
+ 첫째로, 만일 우리가 `moduleId`를 생략하고 상대 경로를 사용할때 어떤 일이 일어나나 봅시다.
+
First, let's look at what happens if we use a relative path and omit the `moduleId`.
`EXCEPTION: Failed to load some.component.html`
+ Angular는 파일을 찾지 못하고 에러를 발생시킵니다.
+
Angular can't find the file so it throws an error.
+ 왜 Angular는 템플릿과 스타일 URL을 컴포넌트 파일의 위치로부터 계산해내지 못할까요?
+
Why can't Angular calculate the template and style URLs from the component file's location?
+ 그 이유는 컴포넌트의 위치가 개발자의 도움 없이는 결정될 수 없기 때문입니다.
+ Angular 어플리케이션은 여러 방식으로 로드될 수 있습니다: 조금만 예시를 들어보면 단일 파일, SystemJS 패키지,
+ 아니면 CommonJS 패키지 등을 통해서 로드될 수 있습니다.
+ 여러 포맷들중 어떤 방식으로든 모듈을 만들 수도 있고, 아니면 모듈러한 코드를 아예 작성하지 않을 수도 있습니다.
+
Because the location of the component can't be determined without the developer's help.
Angular apps can be loaded in many ways: from individual files, from SystemJS packages, or
from CommonJS packages, to name a few.
We might generate modules in any of several formats.
We might not be writing modular code at all!
-
+
+ 이러한 패키징 및 모듈 로드 전략에 다양성때문에,
+ Angular 가 런타임시에 이러한 파일들이 어디에 위치하고 있는지 정확하게 알기란 불가능 합니다.
+
With this diversity of packaging and module load strategies,
it's not possible for Angular to know with certainty where these files reside at runtime.
+ Angular가 오직 확실히 알 수 있는 위치는 `index.html` 홈페이지의 URL, 어플리케이션 루트 뿐입니다.
+ 따라서 기본적으로 템플릿과 스타일 경로를 `index.html`에 상대적으로 계산합니다.
+ 이것이 이전에 우리가 파일의 URL들을 `app/` 기본 경로 접두사를 붙여서 작성했던 이유입니다.
+
The only location Angular can be sure of is the URL of the `index.html` home page, the application root.
So by default it resolves template and style paths relative to the URL of `index.html`.
That's why we previously wrote our file URLs with an `app/` base path prefix.
+ 하지만 *만일* 권장되는 가이드라인을 따라서 `commonjs` 포맷에 맞게 모듈을 작성하고
+ *잘 동작*하는 모듈 로더를 사용한다면, 어플리케이션 개발자는 반절대적인 `module.id` 변수를 알 수 있고
+ 이것이 컴포넌트 클래스 모듈 파일의 절대적인 위치를 포함하고 있을 것입니다.
+
But *if* we follow the recommended guidelines and we write modules in `commonjs` format
and we use a module loader that *plays nice*,
*then* we — the developers of the application —
know that the semi-global `module.id` variable is available and contains
the absolute URL of the component class module file.
+ 그 정보가 Angular가 `moduleId`를 설정하지 않고도 *component*파일이 어디 있는지를 알게 해주는 정보입니다.
++makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','module-id')(format='.')
+
That knowledge enables us to tell Angular where the *component* file is
by setting the `moduleId`:
+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','module-id')(format='.')
@@ -130,9 +213,19 @@ a#why-default
a#webpack
.l-main-section
:marked
+ ## Webpack: 템플릿과 스타일들을 로드하기
+
## Webpack: load templates and styles
+
+ Webpack 개발자들에게는 `moduleId`의 대체 수단이 있습니다.
+
Webpack developers have an alternative to `moduleId`.
+ *component-relative URL들을 참조하는 `template`과 `styles` / `styleUrls` 속성의 맨 처음에
+ `./`를 추가하는 것으로 템플릿과 스타일을 런타임에 로드할 수 있습니다.
++makeExample('webpack/ts/src/app/app.component.ts')(format='.')
+
+
They can load templates and styles at runtime by adding `./` at the beginning of the `template` and `styles` / `styleUrls`
properties that reference *component-relative URLS.
@@ -140,8 +233,12 @@ a#webpack
.l-sub-section
:marked
+ Webpack은 뒤에서 `require`를 수행해서 템플릿과 스타일을 로드합니다. 더 읽기 [여기](../guide/webpack.html#highlights).
+
Webpack will do a `require` behind the scenes to load the templates and styles. Read more [here](../guide/webpack.html#highlights).
:marked
+ [Webpack 소개](../guide/webpack.html)을 보세요.
+
See the [Introduction to Webpack](../guide/webpack.html).