diff --git a/ko-trans-guide.md b/ko-trans-guide.md index fd7826fb..d533eba5 100644 --- a/ko-trans-guide.md +++ b/ko-trans-guide.md @@ -13,6 +13,13 @@ * polyfill: polyfill * route: route (라우팅 기술 설명시 route 자체가 객체를 나타내므로 route로 표시) * Tour of Heroes: Tour of Heroes (본 문서에서는 거의 대명사처럼 쓰이고 있으므로 영어 그대로 사용) +* deep link: deep link +* fallback: fallback ("대비", "대비책", "예비사이트"로 번역이 가능하나 angular 주요 개발 용어이므로 그대로 사용) +* repo: repo (repository의 의미로 쓰일 경우. 일반적인 개발 용어이므로 repo 그대로 사용) +* tree shaking: tree shaking +* rollup: rollup +* chunk: chunk +* SystemJS: SystemJS ## 번역이 애매한 기술용어는 영어 그대로 한글로 표기 * element: 엘리먼트 @@ -27,6 +34,21 @@ * property: 프로퍼티 (attribute는 속성으로 property는 프로퍼티로 번역하여 차이를 두고 있으니 꼭 프로퍼티로 해주세요.) * agency: 에이전시 * view: 뷰 +* section: 섹션 +* entry: 엔트리 +* error: 에러 +* inventory: 인벤토리 +* tree: 트리 +* messages: 메시지 +* placeholder: 플레이스홀더 +* target: 타깃 (타깃 O, 타겟 X) +* targeting: 타기팅 (타기팅 O, 타게팅 X) + * http://www.ccdailynews.com/news/articleView.html?idxno=797586 + * http://blog.naver.com/markethink02?Redirect=Log&logNo=220031745023 +* locale: 로케일 +* parameter: 파라미터 (2017.03.24 "매개변수" / "매개 변수" => 파라미터로 통일) +* format: 포맷 +* commit: 커밋 ## 번역 용어 통일 * 3rd party OOO: 타사 OOO @@ -46,6 +68,14 @@ * Contents: 내용 (제목으로 \#과 함께 한 줄에 보일 경우) * Table of contents: 목차 (제목으로 \#과 함께 한 줄에 보일 경우) * boolean : 진위형 +* production: 상용 +* live example: 라이브 예제 +* navigation: 내비게이션 ("네"비게이션이 아닙니다! 외래어라 표준이라하긴 그렇지만.. 일관성을 위해.) +* cardinality: 대응 개체수(cardinality) - 정확한 번역이 어려우므로 영어도 괄호 안에 함께 표기 +* pluralization: 복수화 +* internationalization: 국제화 +* localization: 지역화 +* provider: 제공자 (2017.03.24 공급자 => 제공자로 통일) ## 정리중인 단어 * selector: 선택자? vs 셀렉터? @@ -53,7 +83,6 @@ * suffix: 접미어?(구글 61,000개) vs 접미사?(구글 379,000개) * root: 최상위라고 번역을 했었는데.. 모든 개발자들이 널리 사용하는 용어이니 "루트"라고 하면 어떨까 싶네요.. * bootstrap: 원래 익숙하지 않은 용어라 생각하고 "실행(bootstrap)" 이렇게 병기하려고 했었는데 점점 보니 angular에서는 핵심 용어인거 같네요.. 그냥 "부트스트랩"이라고 해도 될거 같기도 하고요.. -* provider: 공급자? vs 제공자? ## 구글 번역기 사실.. 구글 번역기가 엄청 좋아졌습니다... -o- 이걸 참고 하는 것은 좋습니다. 그러나 전혀 다르게 번역하는 경우도 있고, 거의 맞는 것 같은데 문맥으로 보면 미묘하게 다른 경우가 있으므로 참고만 해주시고 꼭 전체적인 내용을 이해하신 뒤에 한번 더 봐주시기 바랍니다. @@ -66,6 +95,18 @@ ## 들여쓰기 * jade는 들여쓰기가 굉장히 중요합니다. 눈에 보이지 않는 미묘한 공백의 차이로 전체 문서가 빠그러지기도 합니다. 때문에 겉보기에는 멀쩡해 보여도 실제 구동해도면 깨지는 경우가 종종 있습니다. unexpected token "indent" 이런 에러를 보신다면 에디터에서 공백 문자를 표시하도록 해서 천천히 살펴보시기 바랍니다. +## multi-depth 목록 들여쓰기 +목록을 표현하는 별표(*)나 숫자기호에 depth가 생기면 기본 원리에 맞춰 내려쓰기를 해봐도 잘 안되는 경우가 있습니다. +아래 예제를 참고하여 들여쓰기 조절을 한 다음 local 에서 확인해보시기 바랍니다. + + \* 1depth 111 한글 번역 + + 1depth 111 영어 원문 (앞에 *가 없는 것에 유의) + + \* 2depth 222 한글 번역 + + \* 2depth 222 영어 원문 + ## 변수기호 문제 * \!{}는 변수 기호입니다. \!{\_decorator} 라는 것은 \_decorator 변수로 대체한다는 뜻입니다. 따라서 이걸 그대로 두면 "데코레이터"라고 번역되지 않고 "decorator"라고 갑자기 영문이 나오게 됩니다. 현재 대부분 \_decorator_ko 처럼 한글화 버전의 변수를 추가했는데 없다면 적당히 \_ko를 붙여서 전역 변수에 추가해야 합니다. * 그런데 \!{}에 버그가 하나 있는데 변수명 자체에 언더바(\_)가 있는 경우 기울임 표시를 위해 \_!{\_var}\_ 라고 하면 \_false 라고 표시가 됩니다. 이건 발견하시면 적당히 언더바를 없애거나 해야 합니다. diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade index 3e0f856d..a55998a3 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -361,7 +361,7 @@ a#tree-shaking There is no reason to download Forms-related Angular code and tree shaking ensures that you don't. Tree Shaking과 AOT 컴파일은 별도의 단계입니다. - Tree Shaking은 JavaScript 코드만 타겟으로 할 수 있습니다. + Tree Shaking은 JavaScript 코드만 타깃으로 할 수 있습니다. AOT 컴파일은 더 많은 애플리케이션을 JavaScript로 변환하여, "Tree Shaking"을 할 수 있는 애플리케이션이 더 많이 생성됩니다. Tree Shaking and AOT compilation are separate steps. diff --git a/public/docs/ts/latest/cookbook/i18n.jade b/public/docs/ts/latest/cookbook/i18n.jade index 3086f03a..e907cb9c 100644 --- a/public/docs/ts/latest/cookbook/i18n.jade +++ b/public/docs/ts/latest/cookbook/i18n.jade @@ -2,23 +2,39 @@ include ../_util-fns a#top :marked + Angular의 _국제화_ (i18n) 도구를 사용하면 앱을 여러 언어로 사용할 수 있습니다. + Angular's _internationalization_ (_i18n_) tools help make your app available in multiple languages. + ## 목차 ## Table of contents + * [Angular와 i18n 템플릿 번역](#angular-i18n) * [Angular and i18n template translation](#angular-i18n) + * [텍스트를 _i18n_ 속성으로 표기](#i18n-attribute) * [Mark text with the _i18n_ attribute](#i18n-attribute) + * [_i18n-..._ 번역 속성](#translate-attributes) * [Add _i18n-..._ translation attributes](#translate-attributes) + * [단수와 복수 처리](#cardinality) * [Handle singular and plural](#cardinality) + * [대체 텍스트 중 선택](#select) * [Select among alternative texts](#select) + * [**_ng-xi18n_ 외부 도구**로 번역 소스 생성](#ng-xi18n) * [Create a translation source file with the **_ng-xi18n_ extraction tool**](#ng-xi18n) + * [텍스트 메시지 번역](#translate) * [Translate text messages](#translate) - * [Merge the completed translation file into the app](#merge) + * [완성 번역 파일을 앱에 합치기](#merge) + [Merge the completed translation file into the app](#merge) + * [JIT 컴파일러로 합치기](#jit) * [Merge with the JIT compiler](#jit) + * [AOT compiler로 국제화](#aot) * [Internationalization with the AOT compiler](#aot) + * [번역 파일 유지관리 및 _id_ 변경](#maintenance) * [Translation file maintenance and _id_ changes](#maintenance) :marked + 스페인어로 번역되고 JIT으로 컴파일된 앱의 라이브 예제로 **시험해 보세요**. + **Try this** live example of a JIT-compiled app, translated into Spanish. @@ -26,63 +42,104 @@ a#top a#angular-i18n .l-main-section :marked + ## Angular와 _i18n_ 템플릿 번역 ## Angular and _i18n_ template translation + 애플리케이션 국제화는 성실과 지속적인 헌신을 필요로 하는 + 도전적인 다방면의 활동입니다. + Angular의 _i18n_ 국제화 도구가 도움이 될 수 있습니다. + Application internationalization is a challenging, many-faceted effort that takes dedication and enduring commitment. Angular's _i18n_ internationalization facilities can help. + 이 페이지는 컴포넌트 템플릿 텍스트를 여러 언어로 번역하는데 도움이 되는 + _i18n_ 도구를 설명합니다. + This page describes the _i18n_ tools available to assist translation of component template text into multiple languages. .l-sub-section :marked + _국제화_ 실무자는 번역 가능한 텍스트를 "_message_"라고 부릅니다. + 이 페이지에서는 "_text_"와 "_message_"를 교환할 수 있으며 "_text message_"로 조합할 수 있습니다. + Practitioners of _internationalization_ refer to a translatable text as a "_message_". This page uses the words "_text_" and "_message_" interchangably and in the combination, "_text message_". :marked + _i18n_ 템플릿 번역 프로세스는 다음 네 단계가 있습니다. + The _i18n_ template translation process has four phases: + 1. 번역을 위해 컴포넌트 템플릿에 정적 텍스트 메시지를 표시하세요. +   1. Mark static text messages in your component templates for translation. + 1. Angular _i18n_ 도구는 표시된 메시지를 업계 표준 번역 소스 파일로 추출합니다. + 1. An angular _i18n_ tool extracts the marked messages into an industry standard translation source file. + 1. 번역자가 해당 파일을 편집하여 추출한 텍스트 메시지를 대상 언어로 번역하고 파일을 사용자에게 반환합니다. + 1. A translator edits that file, translating the extracted text messages into the target language, and returns the file to you. + 1. Angular 컴파일러는 완성된 번역 파일을 가져옵니다. + 원본 메시지를 번역된 텍스트로 대체하고 대상 언어로 된 새 버전의 애플리케이션을 생성합니다. + 1. The Angular compiler imports the completed translation files, replaces the original messages with translated text, and generates a new version of the application in the target language. + 지원되는 각 언어에 대해 별도의 애플리케이션 버전으로 빌드하고 배포해야 합니다. + You need to build and deploy a separate version of the application for each supported language. a#i18n-attribute .l-main-section :marked + ## _i18n_ 속성으로 텍스트 표시 ## Mark text with the _i18n_ attribute + Angular `i18n` 속성은 번역 가능한 내용을 나타내는 표식입니다. + 고정 텍스트가 번역되어야 하는 모든 엘리먼트 태그에 배치합니다. + The Angular `i18n` attribute is a marker for translatable content. Place it on every element tag whose fixed text should be translated. .alert.is-helpful :marked + `i18n`은 Angular _지시자_가 아닙니다. + Angular 도구 및 컴파일러에서 인식하는 사용자 정의 _속성_입니다. + 변역 후에 컴파일러는 이것을 제거합니다. + `i18n` is not an Angular _directive_. It's a custom _attribute_, recognized by Angular tools and compilers. After translation, the compiler removes it. :marked + 첨부 된 샘플에서 `

` 태그는 스페인어로 번역되는 + 간단한 영어 인사말을 표시합니다: + In the accompanying sample, an `

` tag displays a simple English language greeting that you translate into Spanish: +makeExample('cb-i18n/ts/src/app/app.component.1.html', 'greeting', 'src/app/app.component.html')(format=".") :marked + `i18n` 속성을 태그에 추가하여 번역 대상임을 표시하세요. + Add the `i18n` attribute to the tag to mark it for translation. +makeExample('cb-i18n/ts/src/app/app.component.1.html', 'i18n-attribute', 'src/app/app.component.html')(format=".") :marked + ### 번역사에게 _설명_과 _목적_을 알려주세요. ### Help the translator with a _description_ and _intent_ + 정확하게 번역하려면 번역사는 메시지에 대한 설명이 필요할 수 있습니다. + i18n 속성에 설명을 지정하세요. + In order to translate it accurately, the translator may need a description of the message. Assign a description to the i18n attribute: @@ -90,6 +147,12 @@ a#i18n-attribute +makeExample('cb-i18n/ts/src/app/app.component.1.html', 'i18n-attribute-desc', 'src/app/app.component.html')(format=".") :marked + 올바르게 번역을 하려면 번역사가 + 여러분의 목적—_특정_ 애플리케이션 컨텍스트의 진짜 _의미_—를 + 알아야 할 수도 있습니다. + 설명 앞 부분에 할당된 문자열에 대한 문맥적 의미를 추가하고 + `|` 문자 (`|`)를 사용하여 설명과 분리하세요: + In order to deliver a correct translation, the translator may need to know your _intent_—the true _meaning_ of the text within _this particular_ application context. @@ -99,24 +162,40 @@ a#i18n-attribute +makeExample('cb-i18n/ts/src/app/app.component.html', 'i18n-attribute-meaning', 'src/app/app.component.html')(format=".") :marked + _같은_ 의미를 가진 모든 형태의 메시지는 _동일한_ 번역을 하지만, + *다양한 의미가 있는* 메시지는 다른 번역을 할 수 있습니다. + Angular 추출 도구는 상황에 맞는 번역을 용이하게 하기 위해 + 번역 소스 파일에서 _의미_와 _설명_을 모두 보존합니다. + While all appearances of a message with the _same_ meaning have the _same_ translation, a message with *a variety of possible meanings* could have different translations. The Angular extraction tool preserves both the _meaning_ and the _description_ in the translation source file to facilitiate contextually-specific translations. + ### 요소를 만들지 않고 텍스트 번역하기 ### Translate text without creating an element + 쭉 이어진 번역할 텍스트가 있다고 가정해보세요. + `` 태그로 감쌀 수는 있지만 (CSS 등의) 이유로 + 번역을 용이하게 하기 위해서 새로운 DOM 엘리먼트를 만들고 싶지는 않습니다. + Suppose there is a stretch of text that you'd like to translate. You could wrap it in a `` tag but for some reason (CSS comes to mind) you don't want to create a new DOM element merely to facilitate translation. + 시도해 볼 수 있는 두 가지 기법이 있습니다. + Here are two techniques to try. + (1) 텍스트를 `` 엘리먼트로 둘러쌉니다. ``는 결코 렌더링 되지 않습니다: + (1) Wrap the text in an `` element. The `` is never renderered: +makeExample('cb-i18n/ts/src/app/app.component.html', 'i18n-ng-container', 'src/app/app.component.html')(format=".") :marked + (2) 텍스트를 한 쌍의 HTML 주석으로 묶습니다: + (2) Wrap the text in a pair of HTML comments: +makeExample('cb-i18n/ts/src/app/app.component.html', 'i18n-with-comment', 'src/app/app.component.html')(format=".") @@ -124,63 +203,121 @@ a#i18n-attribute .l-main-section a#translate-attributes :marked + ## _i18n -..._ 번역 속성 추가 ## Add _i18n-..._ translation attributes + + 템플릿에 이미지를 추가했습니다. 접근성에 대해서 상당히 신경을 써서 `title` 속성을 추가했습니다: + You've added an image to your template. You care about accessibility too so you add a `title` attribute: +makeExample('cb-i18n/ts/src/app/app.component.1.html', 'i18n-title', 'src/app/app.component.html')(format=".") :marked + `title` 속성을 번역해야 합니다. + Angular i18n 지원은 `i18n-x` 형식으로 더 많은 변환 속성을 가지며, + `x`는 번역할 속성의 이름입니다. +   The `title` attribute needs to be translated. Angular i18n support has more translation attributes in the form,`i18n-x`, where `x` is the name of the attribute to translate. + 앞의 예제에서 `img` 태그에 `title`을 번역하려면 다음과 같이 작성하세요: + To translate the `title` on the `img` tag from the previous example, write: +makeExample('cb-i18n/ts/src/app/app.component.html', 'i18n-title-translate', 'src/app/app.component.html')(format=".") :marked + `i18n-x="<의미>|<설명>"` 구문으로 의미와 설명을 할당할 수도 있습니다. + You can also assign a meaning and a description with the `i18n-x="|"` syntax. .l-main-section a#cardinality :marked + ## 단수와 복수 처리 ## Handle singular and plural + 서로 다른 언어는 복수로 만드는 (복수화) 규칙이 다릅니다. +   Different languages have different pluralization rules. + 애플리케이션이 여러 늑대에 대해 뭔가를 언급한다고 가정해보세요. + 영어에서는 늑대의 수에 따라 "no wolves", "one wolf", "two wolves" 또는 "a wolf pack"으로 표시 할 수 있습니다. + 다른 언어에서는 _대응 개체수(cardinality)_를 다르게 표현할 수 있습니다. +   Suppose your application says something about a collection of wolves. In English, depending upon the number of wolves, you could display "no wolves", "one wolf", "two wolves", or "a wolf pack". Other languages might express the _cardinality_ differently. + 다음은 늑대의 수에 적합한 구문을 표시하기 위해 컴포넌트 템플릿을 마크업하는 방법입니다: + Here's how you could mark up the component template to display the phrase appropriate to the number of wolves: +makeExample('cb-i18n/ts/src/app/app.component.html', 'i18n-plural', 'src/app/app.component.html')(format=".") :marked + * 첫 번째 파라미터가 키입니다. 그것은 늑대의 수를 결정하는 + 컴포넌트 프로퍼티 (`wolves`)에 바인딩되어 있습니다. + * The first parameter is the key. It is bound to the component property (`wolves`) that determines the number of wolves. + + * 두 번째 파라미터는 이것을 `복수형` 번역 유형으로 식별합니다. + * The second parameter identifies this as a `plural` translation type. + + * 세 번째 파라미터는 복수화 범주와 일치하는 값으로 + 구성된 복수형 패턴을 정의합니다. + * The third parameter defines a pluralization pattern consisting of pluralization categories and their matching values. + 복수화 카테고리에는 다음이 포함됩니다: + Pluralization categories include: * =0 + * =0 + * =1 * =1 * =5 + * =5 + * few * few * other + * other + + 복수화 카테고리 옆에 기본 _영어_ 번역을 중괄호 (`{}`) 안에 놓습니다. Put the default _English_ translation in braces (`{}`) next to the pluralization category. + + * 한 마리의 늑대에 관해 말할 때 `=1 {one wolf}`라고 쓸 수 있습니다. + * When you're talking about one wolf, you could write `=1 {one wolf}`. + + * 늑대가 없는 경우 `=0 {no wolves}`라고 쓸 수 있습니다. + * For zero wolves, you could write `=0 {no wolves}`. + + * 두 마리의 늑대는 `=2 {two wolves}`라고 쓸 수 있습니다. + * For two wolves, you could write `=2 {two wolves}`. + 3, 4, 그리고 다른 모든 수의 늑대를 위해서 이러한 방식을 유지할 수 있습니다. + 또는 **`other`** 카테고리를 매칭되지 않는 모든 카디널리티의 처리자로 지정하여 + `other {a wolf pack}`과 같이 작성할 수 있습니다. + You could keep this up for three, four, and every other number of wolves. Or you could specify the **`other`** category as a catch-all for any unmatched cardinality and write something like: `other {a wolf pack}`. .l-sub-section :marked + 이 구문은 + ICU 메시지 포맷을 준수합니다. + 이것은 복수화 규칙을 + 명시하는 Common Locale Data Repository (CLDR)에서 유래했습니다. + This syntax conforms to the ICU Message Format that derives from the @@ -190,15 +327,28 @@ a#cardinality a#select :marked + ## 대체 텍스트 중에서 선택 ## Select among alternative texts + 히어로가 남성인지 여성인지에 따라 애플리케이션은 다른 텍스트를 표시합니다. + 이 대체 텍스트 역시 번역이 필요합니다. + The application displays different text depending upon whether the hero is male or female. These text alternatives require translation too. + 이것을 `select` 번역으로 처리할 수 있습니다. + `select`는 + ICU 메시지 구문을 따릅니다. + 숫자 대신 문자열 값을 기반으로 대체 번역을 선택합니다. + You can handle this with a `select` translation. A `select` also follows the ICU message syntax. You choose among alternative translation based on a string value instead of a number. + 컴포넌트 템플릿의 다음 포맷 메시지는 컴포넌트의 `gender` 프로퍼티에 바인딩되며 + "m" 또는 "f" 중 하나를 출력합니다. + 메시지는 해당 값을 적절한 번역에 매핑합니다: + The following format message in the component template binds to the component's `gender` property, which outputs either an "m" or an "f". The message maps those values to the appropriate translation: @@ -208,11 +358,18 @@ a#select a#ng-xi18n .l-main-section :marked + ## _ng-xi18n_ 도구로 번역 소스 파일 만들기   ## Create a translation source file with the _ng-xi18n_ tool + **_ng-xi18n_ 추출 도구**를 사용하여 `i18n`으로 표시된 텍스트를 + 업계 표준 형식의 번역 소스 파일로 추출하세요. +   Use the **_ng-xi18n_ extraction tool** to extract the `i18n`-marked texts into a translation source file in an industry standard format. + 이것은 `@angular/compiler-cli` npm 패키지의 Angular CLI 도구입니다. + CLI와 `platform-server` 피어 종속성을 아직 설치하지 않았다면 지금 설치하세요: + This is an Angular CLI tool in the `@angular/compiler-cli` npm package. If you haven't already installed the CLI and its `platform-server` peer dependency, do so now: @@ -220,6 +377,8 @@ code-example(language="sh" class="code-shell"). npm install @angular/compiler-cli @angular/platform-server --save :marked + 애플리케이션 프로젝트의 루트에서 터미널 창을 열고 `ng-xi18n` 명령을 입력하세요: + Open a terminal window at the root of the application project and enter the `ng-xi18n` command: code-example(language="sh" class="code-shell"). @@ -227,16 +386,26 @@ code-example(language="sh" class="code-shell"). .l-sub-section :marked + Windows 사용자는 다음과 같이 명령을 입력해야 할 수도 있습니다: `"./node_modules/.bin/ng-xi18n"` + Windows users may have to quote the command like this: `"./node_modules/.bin/ng-xi18n"` :marked + 기본적으로 이 도구는 XML Localisation Interchange File Format (XLIFF, version 1.2)의 + **`messages.xlf`**라는 번역 파일을 생성합니다. + By default, the tool generates a translation file named **`messages.xlf`** in the XML Localisation Interchange File Format (XLIFF, version 1.2). a#other-formats :marked + ### 기타 번역 형식 ### Other translation formats + `--i18nFormat=xmb` 플래그를 추가하여 + XML Message Bundle (XMB) 포맷으로 + **`messages.xmb`**라는 파일을 생성 할 수 있습니다. + You can generate a file named **`messages.xmb`** in the XML Message Bundle (XMB) format by adding the `--i18nFormat=xmb` flag. @@ -245,11 +414,19 @@ code-example(language="sh" class="code-shell"). ./node_modules/.bin/ng-xi18n --i18nFormat=xmb :marked + 이 샘플은 _XLIFF_ 형식을 고수합니다. + This sample sticks with the _XLIFF_ format. a#ng-xi18n-options :marked + ### 기타 옵션 ### Other options + 추가 옵션을 지정해야 할 수도 있습니다. + 예를 들어 `tsconfig.json` TypeScript 설정 파일이 + 루트 폴더가 아닌 다른 곳에 있다면 + `-p` 옵션을 사용해서 그 경로를 지정해야합니다: + You may have to specify additional options. For example, if the `tsconfig.json` TypeScript configuration file is located somewhere other than in the root folder, @@ -261,8 +438,12 @@ code-example(language="sh" class="code-shell"). a#npm-i18n-script :marked + ### 편의를 위해 _npm_ 스크립트 추가   ### Add an _npm_ script for convenience + 명령을 기억하고 실행하기 쉽도록 `package.json`의 + `scripts` 섹션에 단축키를 추가하는 것이 좋습니다: + Consider adding a convenience shortcut to the `scripts` section of the `package.json` to make the command easier to remember and run: code-example(format='.' language='sh' ). @@ -271,20 +452,32 @@ code-example(format='.' language='sh' ). ... } :marked + 이제 다음과 같은 여러 명령을 실행할 수 있습니다: + Now you can issue command variations such as these: code-example(language="sh" class="code-shell"). npm run i18n npm run i18n -- -p path/to/tsconfig.json npm run i18n -- --i18nFormat=xmb -p path/to/tsconfig.json :marked + 옵션 앞에 `--` 플래그가 있는 것에 주의하세요. + 그것은 _npm_에게 이후의 모든 플래그를 `ng-xi18n`에 전달하도록 지시합니다. + Note the `--` flag before the options. It tells _npm_ to pass every flag thereafter to `ng-xi18n`. a#translate .l-main-section :marked + ## 텍스트 메시지 번역 ## Translate text messages + `ng-xi18n` 명령은 프로젝트 루트 폴더에 + `messages.xlf`라는 번역 소스 파일을 생성합니다. + 다음 단계는 영어 서식 파일 텍스트를 + 특정 언어 번역 파일로 변환하는 것입니다. + 요리책 샘플은 스페인어 번역 파일을 만듭니다. + The `ng-xi18n` command generates a translation source file in the project root folder named `messages.xlf`. The next step is to translate the English language template @@ -293,82 +486,145 @@ a#translate a#localization-folder :marked + ### 지역화 폴더 만들기 ### Create a localization folder + 아마도 하나 이상의 다른 언어로 번역할 것이므로 + 프로젝트 구조가 전체 국제화 작업을 반영하는 것이 좋습니다. +   You will probably translate into more than one other language so it's a good idea for the project structure to reflect your entire internationalization effort. + 한 가지 방법은 폴더를 지역화 전용으로 사용하여 + 관련 자산(예: 국제화 파일)을 저장하는 것입니다. + One approach is to dedicate a folder to localization and store related assets (for example, internationalization files) there. .l-sub-section :marked + 지역화와 국제화는 + 다르지만 밀접히 관련된 용어입니다. + Localization and internationalization are different but closely related terms. :marked + 이 요리 책은 그 제안을 따릅니다. `src/` 아래에 `locale` 폴더가 있습니다. + 폴더 내의 자산에는 잘 알려진 코드 집합에서 + 언어-문화 코드가 일치하는 파일명 확장자를 가집니다. + This cookbook follows that suggestion. It has a `locale` folder under the `src/`. Assets within the folder carry a filename extension that matches a language-culture code from a well-known codeset. + `messages.xlf` 파일의 사본을 만들어 `locale` 폴더에 넣고 + 스페인어 번역을 위해 `messages.es.xlf`라는 이름을 바꾸세요. + 각 대상 언어에 대해 동일한 작업을 수행하세요. + Make a copy of the `messages.xlf` file, put it in the `locale` folder and rename it `messages.es.xlf`for the Spanish language translation. Do the same for each target language. + ### 번역 텍스트 노드 ### Translate text nodes + + 실제로는 `message.es.xlf`를 스페인어 번역사에게 보내고 + 번역사는 많은 XLIFF 파일 편집기 + 중에 하나를 사용하여 번역 내용을 채워넣습니다. + In the real world, you send the `messages.es.xlf` file to a Spanish translator who fills in the translations using one of the many XLIFF file editors. + 이 샘플 파일은 스페인어에 대한 특별한 편집기나 지식이 없어도 쉽게 번역할 수 있습니다. + `messages.es.xlf`를 열고 첫 번째 `` 섹션을 찾으세요: + This sample file is easy to translate without a special editor or knowledge of Spanish. Open `messages.es.xlf` and find the first `` section: +makeExample('cb-i18n/ts/src/locale/messages.es.xlf.html', 'translated-hello', 'src/locale/messages.es.xlf ()')(format=".") :marked + 이 XML 요소는 `i18n` 속성으로 표시한 `

` 인사 태그의 번역을 나타냅니다. +   This XML element represents the translation of the `

` greeting tag you marked with the `i18n` attribute. + 번역을 안내하기 위해 _source_, _description_ 및 _meaning_ 요소를 사용하여 + `` 태그를 스페인어 인사말로 대체하세요. + Using the _source_, _description_, and _meaning_ elements to guide your translation, replace the `` tag with the Spanish greeting: +makeExample('cb-i18n/ts/src/locale/messages.es.xlf.html', 'translated-hello', 'src/locale/messages.es.xlf (, after translation)')(format=".") .alert.is-important :marked + 이 툴은 `id`를 생성합니다. **손대지 마십시오.** + 이 값은 메시지 내용과 할당된 의미에 따라 다릅니다. + 어느 요인을 변경하면 `id`도 변경됩니다. + **[번역 파일 유지관리 토론](#maintenance)**을 참조하세요. + Note that the tool generates the `id`. **Don't touch it.** Its value depends on the content of the message and its assigned meaning. Change either factor and the `id` changes as well. See the **[translation file maintenance discussion](#maintenance)**. :marked + 다른 텍스트 노드도 같은 방식으로 변환하세요: + Translate the other text nodes the same way: +makeExample('cb-i18n/ts/src/locale/messages.es.xlf.html', 'translated-other-nodes', 'src/locale/messages.es.xlf ()')(format=".") a#translate-plural-select :marked + ## _복수_와 _select_ 번역 ## Translate _plural_ and _select_ + + _복수_와 _select_ 메시지를 번역하는 것은 약간 까다롭습니다. + Translating _plural_ and _select_ messages is a little tricky. + `` 태그는 `복수`와 `select` 번역 단위가 + 비어 있기 때문에 원본 템플릿과 연관시키기가 어렵습니다. + XLIFF 형식은 아직 ICU 규칙을 지원하지 않습니다; 곧 지원될 것입니다. + 그러나 `XMB` 형식은 ICU 규칙을 지원합니다. + The `` tag is empty for `plural` and `select` translation units, which makes them hard to correlate with the original template. The `XLIFF` format doesn't yet support the ICU rules; it soon will. However, the `XMB` format does support the ICU rules. + 원본 템플릿의 다른 곳에서 인식하는 다른 번역 단위와 관련하여 검색해야 합니다. + 이 예제에서는 `select`에 대한 번역 단위가 로고의 번역 단위 바로 아래에 있어야 합니다. + You'll just have to look for them in relation to other translation units that you recognize from elsewhere in the source template. In this example, you know the translation unit for the `select` must be just below the translation unit for the logo. :marked + ### _복수_ 번역 ### Translate _plural_ + `plural`을 번역하기 위해 ICU 포맷의 일치값을 번역하세요: + To translate a `plural`, translate its ICU format match values: +makeExample('cb-i18n/ts/src/locale/messages.es.xlf.html', 'translated-plural', 'src/locale/messages.es.xlf ()')(format=".") :marked + ### _select_ 번역 ### Translate _select_ + `select`는 조금 다르게 동작합니다. 다음은 컴포넌트 템플릿의 ICU 포맷 메시지입니다: + The `select` behaves a little differently. Here again is the ICU format message in the component template: +makeExample('cb-i18n/ts/src/app/app.component.html', 'i18n-select', 'src/app/app.component.html')(format=".") :marked + 추출 도구는 그것을 _두 개의_ 번역 단위로 분리합니다. +   The extraction tool broke that into _two_ translation units. + 첫 번째 유닛은 `select` _외부_의 텍스트를 포함합니다. + `select`를 대신하는 ``는 `select` 메시지를 나타내는 플레이스홀더입니다. + 텍스트를 번역하고 플레이스홀더를 그대로 두세요. + The first unit contains the text that was _outside_ the `select`. In place of the `select` is a placeholder, ``, that represents the `select` message. Translate the text and leave the placeholder where it is. @@ -376,24 +632,34 @@ a#translate-plural-select +makeExample('cb-i18n/ts/src/locale/messages.es.xlf.html', 'translate-select-1', 'src/locale/messages.es.xlf ()')(format=".") :marked + 두 번째 번역 유닛은 첫 번째 번역 바로 아래에 위치하고 `select` 메시지를 포함합니다. 그것을 번역하세요. + The second translation unit, immediately below the first one, contains the `select` message. Translate that. +makeExample('cb-i18n/ts/src/locale/messages.es.xlf.html', 'translate-select-2', 'src/locale/messages.es.xlf ()')(format=".") :marked + 다음처럼 번역 후 그것들은 함께 위치합니다: + Here they are together, after translation: +makeExample('cb-i18n/ts/src/locale/messages.es.xlf.html', 'translated-select', 'src/locale/messages.es.xlf ()')(format=".") .l-main-content :marked + 전체 템플릿 변환이 완료되었습니다. + 이제 해당 번역을 애플리케이션에 통합 할 차례입니다. + The entire template translation is complete. It's time to incorporate that translation into the application. #app-pre-translation :marked + ### 번역 이전 앱 ### The app before translation + 이전 단계가 끝나면 샘플 앱 _및_ 번역 파일은 다음과 같습니다: + When the previous steps finish, the sample app _and_ its translation file are as follows: +makeTabs(` @@ -413,112 +679,222 @@ a#translate-plural-select a#merge .l-main-section :marked + ## 완성 된 번역 파일을 애플리케이션에 병합 ## Merge the completed translation file into the app + 번역 된 텍스트를 컴포넌트 템플릿에 병합하려면 + 완료된 번역 파일로 애플리케이션을 컴파일하세요. + 파일이 `.xlf` 포맷이든 다른 포맷 (`.xlif`이나 `.xtb`) 이건 + 관계없이 Angular가 이해하는 과정은 동일합니다. + To merge the translated text into component templates, compile the application with the completed translation file. The process is the same whether the file is in `.xlf` format or in another format (`.xlif` and `.xtb`) that Angular understands. + Angular 컴파일러에 세 가지 새로운 정보를 제공합니다: + You provide the Angular compiler with three new pieces of information: + + * 번역 파일 + * the translation file + + * 번역 파일 포맷 + * the translation file format + + * _Locale ID_ (예를 들어 `es` 또는 `en-US`) + * the _Locale ID_ (`es` or `en-US` for instance) + 이 정보를 제공하는 _방법_은 JIT (_Just-in-Time_) 컴파일러 또는 + AOT (_Ahead-of-Time_) 컴파일러로 컴파일하는지 여부에 따라 다릅니다. +   _How_ you provide this information depends upon whether you compile with the JIT (_Just-in-Time_) compiler or the AOT (_Ahead-of-Time_) compiler. + * [JIT](#jit)을 사용하면 부트스트랩 시간에 정보를 제공합니다. + * With [JIT](#jit), you provide the information at bootstrap time. + + * [AOT](#aot)를 사용하면 정보를 `ngc` 옵션으로 전달합니다. + * With [AOT](#aot), you pass the information as `ngc` options. a#jit .l-main-section :marked + ### JIT 컴파일러와 병합   ### Merge with the JIT compiler + JIT 컴파일러는 애플리케이션이 로드될 때 브라우저에서 애플리케이션을 컴파일합니다. + JIT 컴파일러를 사용한 번역은 다음과 같은 역동적인 프로세스입니다. + The JIT compiler compiles the application in the browser as the application loads. Translation with the JIT compiler is a dynamic process of: + 1. 현재 사용자의 언어 버전 판별합니다. + 1. Determining the language version for the current user. + + 2. 적절한 언어 번역 파일을 문자열 상수로 임포트합니다. + 2. Importing the appropriate language translation file as a string constant. + + 3. JIT 컴파일러를 안내할 해당 번역 제공자 작성합니다. + 3. Creating corresponding translation providers to guide the JIT compiler. + + 4. 해당 제공자로 애플리케이션을 부트스트랩합니다. + 4. Bootstrapping the application with those providers. + `index.html`을 열고 다음과 같이 실행 스크립트를 수정하세요: + Open `index.html` and revise the launch script as follows: +makeExample('cb-i18n/ts/src/index.html', 'i18n', 'index.html (launch script)')(format='.') :marked + 이 샘플에서 사용자의 언어는 + `index.html`에서 전역 `document.locale` 변수로 하드코딩합니다. + In this sample, the user's language is hardcoded as a global `document.locale` variable in the `index.html`. a#text-plugin :marked + ### SystemJS 텍스트 플러그인 ### SystemJS Text plugin + SystemJS가 `text`를 `systemjs-text-plugin.js`에 매핑한 것에 주의하세요. + 텍스트 플러그인의 도움으로 SystemJS는 모든 파일을 원시 텍스트로 읽을 수 있으며 + 컨텐츠를 문자열로 리턴합니다. + 언어 변환 파일을 임포트하려면 이것이 필요합니다. + Notice the SystemJS mapping of `text` to a `systemjs-text-plugin.js`. With the help of a text plugin, SystemJS can read any file as raw text and return the contents as a string. You'll need it to import the language translation file. + SystemJS는 원시 텍스트 플러그인을 제공하지 않지만 쉽게 추가할 수 있습니다. + `src/` 폴더에 다음 `systemjs-text-plugin.js` 파일을 생성하세요: + SystemJS doesn't ship with a raw text plugin but it's easy to add. Create the following `systemjs-text-plugin.js` in the `src/` folder: +makeExample('cb-i18n/ts/src/systemjs-text-plugin.js', null, 'src/systemjs-text-plugin.js')(format='.') :marked + ### 번역 제공자 만들기 ### Create translation providers + 세 가지 제공자는 JIT 컴파일러에서 애플리케이션을 컴파일하는 동안 특정 언어에 대한 템플릿 텍스트를 번역하는 방법을 알려줍니다. + Three providers tell the JIT compiler how to translate the template texts for a particular language while compiling the application: + * `TRANSLATIONS`는 번역 파일의 내용을 담고 있는 문자열입니다. +   * `TRANSLATIONS` is a string containing the content of the translation file. + + * `TRANSLATIONS_FORMAT`은 파일의 형식입니다: `xlf`, `xlif` 또는 `xtb`. + * `TRANSLATIONS_FORMAT` is the format of the file: `xlf`, `xlif` or `xtb`. + + * `LOCALE_ID`는 타깃 언어의 로케일입니다. + * `LOCALE_ID` is the locale of the target language. + 다음 `src/app/i18n-providers.ts` 파일의 `getTranslationProviders` 함수는 + 사용자의 _locale_ 및 해당 번역 파일을 기반으로 + 해당 제공자를 만듭니다. + The `getTranslationProviders` function in the following `src/app/i18n-providers.ts` creates those providers based on the user's _locale_ and the corresponding translation file: +makeExample('cb-i18n/ts/src/app/i18n-providers.ts', null, 'src/app/i18n-providers.ts') :marked + 1. 그것은 `index.html`에서 설정된 전역 `document.locale` 변수로부터 로케일을 가져옵니다. + 1. It gets the locale from the global `document.locale` variable that was set in `index.html`. + 1. 로케일이 없거나 미국 영어 (`en-US`)인 경우 번역할 필요가 없습니다. + 이 함수는 비어있는 `noProviders` 배열을 `Promise`로 리턴합니다. + 이 함수는 서버로부터 번역 파일을 비동기적으로 읽을 수 있기 때문에 `Promise`를 반환해야 합니다. + 1. If there is no locale or the language is U.S. English (`en-US`), there is no need to translate. The function returns an empty `noProviders` array as a `Promise`. It must return a `Promise` because this function could read a translation file asynchronously from the server. + 1. 앞서 설명한(#localization-folder) 이름 및 위치 규칙에 따라 로케일에서 트랜잭션 파일 이름을 만듭니다. + 1. It creates a transaction filename from the locale according to the name and location convention [described earlier](#localization-folder). + 1. `getTranslationsWithSystemJs` 메소드는 번역을 읽고 컨텐츠를 문자열로 반환합니다. + 파일 이름에 `!text`를 추가하여 SystemJS에 [텍스트 플러그인](#text-plugin)을 사용하도록 알려준 것에 주의하세요. + 1. The `getTranslationsWithSystemJs` method reads the translation and returns the contents as a string. Notice that it appends `!text` to the filename, telling SystemJS to use the [text plugin](#text-plugin). + 1. 콜백은 세 개의 번역 제공자를 사용하여 제공자 배열을 구성합니다. + 1. The callback composes a providers array with the three translation providers. + 1. 마지막으로 `getTranslationProviders`는 전체 작업을 promise로 반환합니다. + 1. Finally, `getTranslationProviders` returns the entire effort as a promise. + ### 번역 제공자와 함께 앱을 부트스트랩하세요. ### Bootstrap the app with translation providers + Angular `bootstrapModule` 메소드는 컴파일러의 동작에 영향을 줄 수 있는 + 두 번째 _options_ 파라미터를 가지고 있습니다. + The Angular `bootstrapModule` method has a second, _options_ parameter that can influence the behavior of the compiler. + `getTranslationProviders`의 번역 제공자로 _options_ 오브젝트를 생성 해 + `bootstrapModule`에 건네줍니다. + `src/main.ts` 파일을 열고 다음과 같이 부트스트랩 코드를 수정하세요: + You'll create an _options_ object with the translation providers from `getTranslationProviders` and pass it to `bootstrapModule`. Open the `src/main.ts` and modify the bootstrap code as follows: +makeExample('cb-i18n/ts/src/main.ts', null, 'src/main.ts')(format=".") :marked + 애플리케이션을 부트스트랩하기 전에 `getTranslationProviders` promise가 + 결정될 때까지 기다리는 것에 주목하세요. + Notice that it waits for the `getTranslationProviders` promise to resolve before bootstrapping the app. + 앱은 현재 영어와 스페인어로 국제화되어 있으며 + 더 많은 언어를 추가 할 수 있는 명확한 경로가 있습니다. + The app is now _internationalized_ for English and Spanish and there is a clear path for adding more languages. a#aot .l-main-section :marked + ### _AOT 컴파일러를 사용한 _국제화_ ### _Internationalize_ with the AOT compiler + JIT 컴파일러는 브라우저에서 동적으로 컴파일하는 동안 + 애플리케이션을 대상 언어로 번역합니다. + 유연하지만 사용자에게는 충분히 빠르지 않을 수 있습니다. + The JIT compiler translates the application into the target language while compiling dynamically in the browser. That's flexible but may not be fast enough for your users. + AOT (_Ahead-of-Time_) 컴파일러는 작고 빠르며 즉시 실행할 수 있는 + 애플리케이션 패키지를 생성하는 빌드 프로세스의 하나입니다. + AOT 컴파일러로 국제화하면 각 언어에 대해 별도의 + 애플리케이션 패키지를 미리 빌드합니다. + 그런 다음 호스트 웹 페이지 (`index.html`)에서, + 사용자가 필요한 언어를 결정하고 적절한 애플리케이션 패키지를 제공합니다. + The AOT (_Ahead-of-Time_) compiler is part of a build process that produces a small, fast, ready-to-run application package. When you internationalize with the AOT compiler, you pre-build @@ -527,49 +903,94 @@ a#aot you determine which language the user needs and serve the appropriate application package. + 이 요리책은 여러 애플리케이션 패키지를 작성하고 + 사용자의 언어 기본 설정에 따라 제공하는 방법에 대해서는 설명하지 않습니다. + 번역 파일을 적용하도록 AOT 컴파일러에 알리는 데 필요한 몇 가지 단계를 설명합니다. + This cookbook doesn't cover how to build multiple application packages and serve them according to the user's language preference. It does explain the few steps necessary to tell the AOT compiler to apply a translations file. + AOT 컴파일러로 국제화하려면 AOT 컴파일을 위한 설정이 필요합니다. + [번역 파일을 병합하기 전](#app-pre-translation)과 같이 + 애플리케이션 프로젝트를 만들고 + [AOT cookbook](aot-compiler.html)을 참조하여 + _AOT-호환상태_로 만드세요. + Internationalization with the AOT compiler requires some setup specifically for AOT compilation. Start with the application project as shown [just before merging the translation file](#app-pre-translation) and refer to the [AOT cookbook](aot-compiler.html) to make it _AOT-ready_. + 그런 다음 지원되는 각 언어 (영어 포함)에 대해 'ngc'컴파일 명령을 실행하십시오. + 결과는 각 언어에 대한 애플리케이션의 별도 버전입니다. +   Next, issue an `ngc` compile command for each supported language (including English). The result is a separate version of the application for each language. + `ngc` 명령에 3 가지 옵션을 추가하여 번역하는 방법을 AOT에게 알려주십시오: +   Tell AOT how to translate by adding three options to the `ngc` command: + + * `--i18nFile`: 번역 파일의 경로 + * `--i18nFile`: the path to the translation file + + * `--locale`: 로케일의 이름 + * `--locale`: the name of the locale + + * `--i18nFormat` : 지역화 파일의 포맷 + * `--i18nFormat`: the format of the localization file + 이 예제의 경우 스페인어 명령은 다음과 같습니다. + For this sample, the Spanish language command would be code-example(language="sh" class="code-shell"). ./node_modules/.bin/ngc --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf .l-sub-section :marked + Windows 사용자는 다음 명령을 사용해야 할 수 있습니다: + Windows users may have to quote the command: code-example(language="sh" class="code-shell"). "./node_modules/.bin/ngc" --i18nFile=./locale/messages.es.xlf --locale=es --i18nFormat=xlf a#maintenance :marked + ## 번역 파일 관리 및 _id_ 변경 ## Translation file maintenance and _id_ changes - + + 애플리케이션이 진화함에 따라 _i18n_ 마크업을 변경하고 + `ng-xi18n` 추출 도구를 여러번 다시 실행할 것입니다. + 추가한 _새로운_ 마크업은 문제가 되지 않습니다; + 그러나 _기존_ 마크업에 대한 _대부분_의 변경사항은 + 영향받는 번역 유닛의 _새로운_ `id`의 생성을 유발합니다. +   As the application evolves, you will change the _i18n_ markup and re-run the `ng-xi18n` extraction tool many times. The _new_ markup that you add is not a problem; but _most_ changes to _existing_ markup trigger generation of _new_ `id`s for the affected translation units. + `id`가 변경된 후에는 변환 파일이 더 이상 동기화되지 않습니다. + 다시 컴파일하는 동안 **애플리케이션의 모든 번역 버전은 실패할 것입니다**. + 오류 메시지는 더 이상 유효하지 않은 이전 `id`를 식별하지만 + 새 `id`가 무엇이어야 하는지 알려주지 않습니다. + After an `id` changes, the translation files are no longer in-sync. **All translated versions of the application will fail** during re-compilation. The error messages identify the old `id`s that are no longer valid but they don't tell you what the new `id`s should be. + **모든 번역 메시지 파일을 소스 제어 커밋하세요**. + 특히 영어 소스 `messages.xlf`에 커밋하세요. + 이전 `messages.xlf` 파일과 새로운 `messages.xlf` 파일의 차이점은 + 번역 파일에서 `id` 변경을 찾아서 업데이트 하는데 도움이 됩니다. + **Commit all translation message files to source control**, especially the English source `messages.xlf`. The difference between the old and the new `messages.xlf` file diff --git a/public/docs/ts/latest/cookbook/visual-studio-2015.jade b/public/docs/ts/latest/cookbook/visual-studio-2015.jade index c450e89c..55be0fe6 100644 --- a/public/docs/ts/latest/cookbook/visual-studio-2015.jade +++ b/public/docs/ts/latest/cookbook/visual-studio-2015.jade @@ -2,167 +2,335 @@ include ../_util-fns :marked + 어떤 개발자는 Visual Studio를 IDE (Integrated Development Environment)로 선호합니다. + Some developers prefer Visual Studio as their Integrated Development Environment (IDE). + 이 요리책은 ASP.NET 4.x 프로젝트로 **Visual Studio 2015**에서 + Angular 빠른시작 파일을 설정하고 사용하는데 필요한 단계를 설명합니다. + This cookbook describes the steps required to set up and use the Angular QuickStart files in **Visual Studio 2015 within an ASP.NET 4.x project**. .l-sub-section :marked + 이 요리책에는 애플리케이션이 아닌 Visual Studio를 설명하기 때문에 *라이브 예제*가 없습니다. + There is no *live example* for this cookbook because it describes Visual Studio, not the application. .l-main-section :marked + ## ASP.NET 4.x 프로젝트 d: ## ASP.NET 4.x Project + 이 요리책은 Visual Studio 2015에서 **ASP.NET 4.x 프로젝트**로 + 빠른시작 파일을 설정하는 방법을 설명합니다. + This cookbook explains how to set up the QuickStart files with an **ASP.NET 4.x project** in Visual Studio 2015. .l-sub-section :marked + `파일 | 새 프로젝트` 방식을 선호하고 **ASP.NET Core**를 사용하고 있다면, + _실험적인_ Visual Studio 2015 용 ASP.NET Core + Angular 템플릿 + 을 고려해보세요. + 생성된 코드는 문서와 매핑되지 않습니다. 적절히 수정하세요. + If you prefer a `File | New Project` experience and are using **ASP.NET Core**, then consider the _experimental_ ASP.NET Core + Angular template for Visual Studio 2015. Note that the resulting code does not map to the docs. Adjust accordingly. :marked + 다음 단계를 따라합니다: + The steps are as follows: + - [사전준비](#prereq1): Node.js를 설치합니다. - [Prerequisite](#prereq1): Install Node.js + - [사전준비](#prereq2): Visual Studio 2015 Update 3를 설치합니다. - [Prerequisite](#prereq2): Install Visual Studio 2015 Update 3 + - [사전준비](#prereq3): 외부 웹 도구를 설정합니다. - [Prerequisite](#prereq3): Configure External Web tools + - [사전준비](#prereq4): TypeScript 2 for Visual Studio 2015를 설치합니다. - [Prerequisite](#prereq4): Install TypeScript 2 for Visual Studio 2015 + - [Step 1](#download): 빠른시작 파일을 다운로드 합니다. - [Step 1](#download): Download the QuickStart files + - [Step 2](#create-project): Visual Studio ASP.NET 프로젝트를 생성합니다. - [Step 2](#create-project): Create the Visual Studio ASP.NET project + - [Step 3](#copy): 빠른시작 파일을 ASP.NET 프로젝트 폴더에 복사합니다. - [Step 3](#copy): Copy the QuickStart files into the ASP.NET project folder + - [Step 4](#restore): 필요한 패키지를 복구합니다. - [Step 4](#restore): Restore required packages + - [Step 5](#build-and-run): 앱을 빌드하고 실행합니다. - [Step 5](#build-and-run): Build and run the app .l-main-section +h2#prereq1 사전준비: Node.js h2#prereq1 Prerequisite: Node.js :marked + 아직 설치되지 않았다면 + **[Node.js® and npm](https://nodejs.org/en/download/)**를 설치합니다. + Install **[Node.js® and npm](https://nodejs.org/en/download/)** if they are not already on your machine. .l-sub-section :marked + 터미널/콘솔 창에서 `node -v`와 `npm -v`를 실행하여 + **노드 버전 `4.6.x` 이상, npm `3.x.x` 이상인지 확인하세요**. + 이전 버전에서는 에러가 발생합니다. + **Verify that you are running node version `4.6.x` or greater, and npm `3.x.x` or greater** by running `node -v` and `npm -v` in a terminal/console window. Older versions produce errors. .l-main-section +h2#prereq2 사전준비: Visual Studio 2015 Update 3 h2#prereq2 Prerequisite: Visual Studio 2015 Update 3 :marked + Visual Studio에서 Angular 애플리케이션을 개발하기 위한 최소 요구 사항은 Update 3입니다. + 이전 버전은 TypeScript로 애플리케이션을 개발하는 최상의 방법을 따르지 않았습니다. + Visual Studio 2015의 버전은 `Help | Visual Studio 정보`에서 확인하세요. + The minimum requirement for developing Angular applications with Visual Studio is Update 3. Earlier versions do not follow the best practices for developing applications with TypeScript. To view your version of Visual Studio 2015, go to `Help | About Visual Studio`. + 아직 설치 전이라면 **[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**를 설치하십시오. + 또는 `도구 | 확장 및 업데이트`를 사용하여 Visual Studio 2015에서 직접 Update 3로 업데이트 하십시오. + If you don't have it, install **[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**. Or use `Tools | Extensions and Updates` to update to Update 3 directly from Visual Studio 2015. .l-main-section +h2#prereq3 사전준비: 외부 웹 도구 설정 h2#prereq3 Prerequisite: Configure External Web tools :marked + Visual Studio와 함께 제공되는 도구 대신 글로벌 외부 웹 도구를 사용하도록 Visual Studio를 설정합니다: + Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio: + * `도구` | `옵션` 메뉴로 **옵션** 창을 엽니다. + * Open the **Options** dialog with `Tools` | `Options` + + * 트리의 왼쪽에서 `프로젝트 및 솔류션` | `외부 웹 도구`를 선택합니다. + * In the tree on the left, select `Projects and Solutions` | `External Web Tools`. + + * 오른쪽에서 `$(PATH)` 엔트리를 `$(DevEnvDir)` 엔트리 위쪽으로 이동합니다. 이것은 Visual Studio에게 + 자체 외부 도구를 사용하기 전에 전역 경로에서 찾은 (npm과 같은) 외부 도구를 사용하도록 알려줍니다. + * On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to use the external tools (such as npm) found in the global path before using its own version of the external tools. + + * OK를 눌러 창을 닫습니다. + * Click OK to close the dialog. + + * 변경사항이 반영되도록 Visual Studio를 재시작합니다. + * Restart Visual Studio for this change to take effect. + 이제 Visual Studio는 현재 작업공간에서 먼저 외부 도구를 찾아보고 없는 경우 + 전역 경로에서 찾아보고 그래도 없는 경우, + Visual Studio는 자체 버전의 도구를 사용합니다. + Visual Studio will now look first for external tools in the current workspace and if not found then look in the global path and if it is not found there, Visual Studio will use its own versions of the tools. .l-main-section +h2#prereq4 사전준비: TypeScript 2 for Visual Studio 2015 설치 h2#prereq4 Prerequisite: Install TypeScript 2 for Visual Studio 2015 :marked + Visual Studio Update 3에는 TypeScript 지원 기능이 기본적으로 제공되지만 + 현재는 Angular 애플리케이션을 개발하기 위해 필요한 TypeScript 2가 함께 제공되지 않습니다. + While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2, which you need to develop Angular applications. + TypeScript 2를 설치하려면: + To install TypeScript 2: + + * **[TypeScript 2.0 for Visual Studio 2015](http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe)를 다운로드 후 설치하세요.** + * Download and install **[TypeScript 2.0 for Visual Studio 2015](http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe)** + + * 또는 npm으로 설치하세요: `npm install -g typescript@2.0`. + * OR install it with npm: `npm install -g typescript@2.0`. + Visual studio의 TypeScript 2 지원에 대해 **[여기](https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/)**에서 자세히 살펴보세요. + You can find out more about TypeScript 2 support in Visual studio **[here](https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/)** + 이제 Visual Studio가 준비되었습니다. Visual Studio를 닫고 + 다시 시작하여 모든 것이 잘 되었는지 확인하는 것이 좋습니다. + At this point, Visual Studio is ready. It’s a good idea to close Visual Studio and restart it to make sure everything is clean. .l-main-section +h2#download Step 1: 빠른시작 파일 다운로드 h2#download Step 1: Download the QuickStart files :marked + github에서 [빠른시작 소스를 다운로드](https://github.com/angular/quickstart) + 하세요. zip 파일로 다운로드 받았다면 압축을 해제하세요. + [Download the QuickStart source](https://github.com/angular/quickstart) from github. If you downloaded as a zip file, extract the files. .l-main-section +h2#create-project Step 2: Visual Studio ASP.NET 프로젝트 생성 h2#create-project Step 2: Create the Visual Studio ASP.NET project :marked + 다음과 같이 일반적인 방법으로 ASP.NET 4.x 프로젝트를 만듭니다: + Create the ASP.NET 4.x project in the usual way as follows: + * Visual Studio 메뉴에서 `파일` | `새로 만들기` | `프로젝트`를 선택합니다. + * In Visual Studio, select `File` | `New` | `Project` from the menu. + + * 템플릿 트리에서 `템플릿` | `Visual C#` (또는`Visual Basic`) | `웹`을 선택합니다. + * In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`. + + * `ASP.NET 웹 응용 프로그램` 템플릿을 선택하고 프로젝트 이름을 지정한 다음 확인을 클릭하세요. + * Select the `ASP.NET Web Application` template, give the project a name, and click OK. + + * 원하는 ASP.NET 4.5.2 템플릿을 선택하고 확인을 클릭하세요. + * Select the desired ASP.NET 4.5.2 template and click OK. .l-sub-section :marked + 이 요리책에서는 추가 폴더나 인증 및 호스팅이 없는 `Empty` 템플릿을 선택할 것입니다. + 프로젝트에 적합한 템플릿과 옵션을 선택하세요. + In this cookbook we'll select the `Empty` template with no added folders, no authentication and no hosting. Pick the template and options appropriate for your project. .l-main-section +h2#copy Step 3: 빠른시작 파일을 ASP.NET 프로젝트 폴더에 복사 h2#copy Step 3: Copy the QuickStart files into the ASP.NET project folder :marked + github에서 다운로드한 빠른시작 파일을 `.csproj` 파일이 들어있는 폴더에 복사하세요. + 다음과 같이 Visual Studio 프로젝트에 파일을 포함시킵니다. +   Copy the QuickStart files we downloaded from github into the folder containing the `.csproj` file. Include the files in the Visual Studio project as follows: + * 솔루션 탐색기에서 `모든 파일 표시` 버튼을 클릭하여 프로젝트의 모든 숨김 파일을 표시하세요. + * Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project. - * Right-click on each folder/file to be included in the project and select `Include in Project`. - Minimally, include the following folder/files: + + * 프로젝트에 포함될 각 폴더/파일을 마우스 오른쪽 버튼으로 클릭하고 '프로젝트에 포함'을 클릭하세요. 최소한 다음 폴더/파일을 포함하세요: + + Right-click on each folder/file to be included in the project and select `Include in Project`. Minimally, include the following folder/files: + + * app 폴더 (만약 TypeScript Typings를 검색할 것이냐고 묻는다면 *아니오*라고 답하세요) + * app folder (answer *No* if asked to search for TypeScript Typings) + + * styles.css + * styles.css + + * index.html + * index.html + * package.json + + * package.json + + * tsconfig.json + * tsconfig.json .l-main-section +h2#restore Step 4: 필요한 패키지 복구 h2#restore Step 4: Restore the required packages :marked + 다음과 같이 Angular 어플리케이션에 필요한 패키지를 복원하세요: +   Restore the packages required for an Angular application as follows: + * 솔루션 탐색기에서 `package.json` 파일을 오른쪽 클릭하고 `패키지 복원`을 선택하세요. +
`npm`을 사용하여 `package.json` 파일에 정의된 모든 패키지를 설치합니다. + 약간의 시간이 걸릴 수 있습니다. + * Right-click on the `package.json` file in Solution Explorer and select `Restore Packages`.
This uses `npm` to install all of the packages defined in the `package.json` file. It may take some time. + + * 원하는 경우 출력 창 (`보기` |`출력`)을 열어 npm 명령이 실행되는 것을 살펴보세요. + * If desired, open the Output window (`View` | `Output`) to watch the npm commands execute. + + * 경고는 무시하세요. + * Ignore the warnings. + + * 복원이 끝나면 `npm command completed with exit code 0` 메시지가 나타납니다. + * When the restore is finished, a message should say: `npm command completed with exit code 0`. + + * 솔루션 탐색기에서 `새로 고침` 아이콘을 클릭하세요. + * Click the `Refresh` icon in Solution Explorer. + + * `node_modules` 폴더를 프로젝트에 **포함하지 마세요**. 그것은 숨겨진 프로젝트 폴더가 되게 하세요. + * **Do not** include the `node_modules` folder in the project. Let it be a hidden project folder. .l-main-section +h2#build-and-run Step 5: 앱 빌드 및 실행 h2#build-and-run Step 5: Build and run the app :marked + 먼저, `index.html`이 시작 페이지로 설정되어 있는지 확인하세요. + 솔루션 탐색기에서 `index.html`을 오른쪽 클릭하고 `시작 페이지로 설정` 옵션을 선택하세요. +   First, ensure that `index.html` is set as the start page. Right-click `index.html` in Solution Explorer and select option `Set As Start Page`. - + + **Run** 버튼을 클릭하거나 `F5`를 눌러 디버거로 앱을 빌드하고 실행하세요. + Build and launch the app with debugger by clicking the **Run** button or press `F5`. .l-sub-section :marked + `Ctrl-F5`를 눌러 디버거 없이 실행하면 보다 빠릅니다. + It's faster to run without the debugger by pressing `Ctrl-F5`. :marked + 기본 브라우저가 열리고 빠른시작 샘플 애플리케이션이 표시됩니다. + The default browser opens and displays the QuickStart sample application. + 아무것이나 프로젝트 파일을 편집 해보세요. *저장* 후 + 변경 사항을 보려면 브라우저를 새로 고침하세요. + Try editing any of the project files. *Save* and refresh the browser to - see the changes. + see the changes. .l-main-section +h2#routing 라우팅 애플리케이션 주의사항 h2#routing Note on Routing Applications :marked + 이 애플리케이션이 Angular 라우터를 사용하는 경우, 브라우저 새로 고침은 *404 - Not Found*를 반환 할 수 있습니다. + 검색 주소창을 보십시오. 내비게이션 URL ("deep link") ... 또는 `/`이나 `/index.html`이 아닌 어떤 URL을 포함하고 있지 않습니까? +   If this application used the Angular router, a browser refresh could return a *404 - Page Not Found*. Look at the address bar. Does it contain a navigation url (a "deep link") ... any path other than `/` or `/index.html`? + 이 요청에 대해 `index.html`을 반환하도록 서버를 설정해야합니다. + 그렇게 하기 전까지는 내비게이션 경로를 제거하고 다시 새로 고침하세요. + You'll have to configure the server to return `index.html` for these requests. Until you do, remove the navigation path and refresh again. diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index 3b30a017..61303b93 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -583,7 +583,7 @@ a#H .l-sub-section :marked Angular [의존성 주입 시스템](#dependency-injection)에 포함되는 객체이며 - 대상의 캐시 내부에서 이름지어진 "의존성"을 찾거나 기록된 [공급자](#provider)와 함께 + 대상의 캐시 내부에서 이름지어진 "의존성"을 찾거나 기록된 [제공자](#provider)와 함께 특정 대상을 만들어낼 수 있습니다. An object in the Angular dependency injection system @@ -863,12 +863,12 @@ a#N Read more in the page on [pipes](!{docsLatest}/guide/pipes.html). :marked - ## 공급자 (Provider) + ## 제공자 (Provider) ## Provider .l-sub-section :marked - _공급자(Provider)_는 [의존성 주입(Dependency Injection)](#dependency-injection) 시스템을 위해서 새로운 의존 인스턴스를 생성합니다. - 공급자는 조회용 토큰을 소위 조리법(recipe)이라 불리우는 의존값을 생성할 수 있는 코드와 연결시킵니다. + _제공자(Provider)_는 [의존성 주입(Dependency Injection)](#dependency-injection) 시스템을 위해서 새로운 의존 인스턴스를 생성합니다. + 제공자는 조회용 토큰을 소위 조리법(recipe)이라 불리우는 의존값을 생성할 수 있는 코드와 연결시킵니다. A _provider_ creates a new instance of a dependency for the [dependency injection](#dependency-injection) system. diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index 82da0af0..96f9fc13 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -199,7 +199,7 @@ block angular-modules JavaScript에서 각 _파일_은 모듈이며 파일에 정의 된 모든 객체는 해당 모듈에 속합니다. 모듈은 `export` 키워드로 그것들을 표시함으로써 몇몇 객체를 공용(public)으로 선언합니다. - 다른 JavaScript 모듈은 * import문 *을 사용하여 다른 모듈의 공용 객체에 접근합니다. + 다른 JavaScript 모듈은 *import문*을 사용하여 다른 모듈의 공용 객체에 접근합니다. In JavaScript each _file_ is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the `export` key word. @@ -449,7 +449,7 @@ block ts-decorator block dart-directives :marked - - `providers`: 컴포넌트가 필요로 하는 서비스에 대한 ** 의존성 주입 제공자 **의 배열. + - `providers`: 컴포넌트가 필요로 하는 서비스에 대한 **의존성 주입 제공자**의 배열. 이것은 Angular에게 컴포넌트의 생성자가 `HeroService`를 필요로 하므로 표시 할 히어로 목록을 가져올 수 있다고 알려주는 하나의 방법입니다. - `providers`: !{_array} of **dependency injection providers** for services that the component requires. @@ -777,7 +777,7 @@ figure Angular uses dependency injection to provide new components with the services they need.
:marked - Angular는 생성자 매개변수의 유형을 살펴봄으로써 컴포넌트에 필요한 서비스를 알 수 있습니다. + Angular는 생성자 파라미터의 유형을 살펴봄으로써 컴포넌트에 필요한 서비스를 알 수 있습니다. 예를 들어, `HeroListComponent`의 생성자는 `HeroService`를 필요로합니다 : Angular can tell which services a component needs by looking at the types of its constructor parameters. @@ -813,19 +813,19 @@ figure If the injector doesn't have a `HeroService`, how does it know how to make one? - 간략하게 이야기하면, 주입자로 `HeroService`의 ** 제공자 **를 미리 등록 했어야 합니다. - 공급자는 일반적으로 서비스 클래스 자체를 생성하거나 반환할 수 있는 서비스입니다. + 간략하게 이야기하면, 주입자로 `HeroService`의 **제공자**를 미리 등록 했어야 합니다. + 제공자는 일반적으로 서비스 클래스 자체를 생성하거나 반환할 수 있는 서비스입니다. In brief, you must have previously registered a **provider** of the `HeroService` with the injector. A provider is something that can create or return a service, typically the service class itself. block registering-providers :marked - 공급자를 모듈 또는 컴포넌트에 등록 할 수 있습니다. + 제공자를 모듈 또는 컴포넌트에 등록 할 수 있습니다. You can register providers in modules or in components. - 일반적으로 공급자를 [최상위 모듈](#module)에 추가하여 동일한 서비스 인스턴스가 모든 곳에서 사용 가능하도록 합니다. + 일반적으로 제공자를 [최상위 모듈](#module)에 추가하여 동일한 서비스 인스턴스가 모든 곳에서 사용 가능하도록 합니다. In general, add providers to the [root module](#module) so that the same instance of a service is available everywhere. @@ -858,17 +858,17 @@ block registering-providers * *주입자(injector)*가 주요 메커니즘입니다. * 주입자는 생성한 서비스 인스턴스의 *컨테이너*를 유지 관리합니다. - * 주입자는 * 공급자 *로부터 새로운 서비스 인스턴스를 생성 할 수 있습니다. + * 주입자는 *제공자*로부터 새로운 서비스 인스턴스를 생성 할 수 있습니다. * The *injector* is the main mechanism. * An injector maintains a *container* of service instances that it created. * An injector can create a new service instance from a *provider*. - * *공급자*는 서비스를 만드는 방법입니다. + * *제공자*는 서비스를 만드는 방법입니다. * A *provider* is a recipe for creating a service. - * 주입자와 함께 * 공급자 *를 등록하세요. + * 주입자와 함께 *제공자*를 등록하세요. * Register *providers* with injectors. diff --git a/public/docs/ts/latest/guide/deployment.jade b/public/docs/ts/latest/guide/deployment.jade index eb6fbe8e..5a08e1eb 100644 --- a/public/docs/ts/latest/guide/deployment.jade +++ b/public/docs/ts/latest/guide/deployment.jade @@ -1,65 +1,126 @@ include ../_util-fns :marked + 이 페이지에서는 Angular 애플리케이션을 배포하고 최적화 하기 위한 도구와 기술에 대해 설명합니다. + This page describes tools and techniques for deploy and optimize your Angular application. a#toc :marked + ## 목차 ## Table of contents + + * [개요](#overview) + * [Overview](#overview) + + * [가장 간단한 배포](#dev-deploy) + * [Simplest deployment possible](#dev-deploy) - * [Optimize for production](#optimize) + + * [상용 최적화](#optimize) + + [Optimize for production](#optimize) + * [Ahead-of-Time (AOT) 컴파일](#aot) * [Ahead-of-Time (AOT) compilation](#aot) * [Webpack](#webpack) + * [Webpack](#webpack) + * [_rollup_으로 Tree shaking](#rollup) * [Tree shaking with _rollup_](#rollup) + * [라이브러리 정리](#prune) * [Pruned libraries](#prune) + * [사전 성능측정](#measure) * [Measure performance first](#measure) - * [Angular configuration](#angular-configuration) + * [Angular 설정](#angular-configuration) + [Angular configuration](#angular-configuration) + * [`base` 태그](#base-tag) * [The `base` tag](#base-tag) + * [상용 모드 활성화](#enable-prod-mode) * [Enable production mode](#enable-prod-mode) + * [지연 로딩](#lazy-loading) * [Lazy loading](#lazy-loading) - * [Server configuration](#server-configuration) + * [서버 설정](#server-configuration) + [Server configuration](#server-configuration) + * [라우팅된 앱은 반드시 `index.html`으로 fallback](#fallback) * [Routed apps must fallback to `index.html`](#fallback) + * [CORS: 다른 서버에서 서비스 요청](#cors) * [CORS: requesting services from a different server](#cors) a#overview .l-main-section :marked + ## 개요 ## Overview + 이 가이드에서는 원격으로 실행되는 서버에 Angular 애플리케이션을 준비하고 배포하는 기술에 대해 설명합니다. + 이 기술은 _간단하나 최적은 아닌 것_에서 _보다 최적화되고 복잡한 방법으로_ 진행됩니다. + This guide describes techniques for preparing and deploying an Angular application to a server running remotely. The techniques progress from _easy but suboptimal_ to _more optimal and more involved_. + * [간단한 방법](#dev-deploy "가장 간단한 배포")은 개발환경을 서버에 복사하는 것입니다. + * The [simple way](#dev-deploy "Simplest deployment possible") is to copy the development environment to the server. + * [_Ahead of Time_ 컴파일 (AOT)](#aot "AOT 컴파일")은 + [여러 최적화 전략](#optimize)의 첫 번째 방법입니다. + [AOT 요리책의 상세한 안내](../cookbook/aot-compiler.html "AOT Cookbook")도 읽어보시기 바랍니다. + * [_Ahead of Time_ compilation (AOT)](#aot "AOT Compilation") is the first of [several optimization strategies](#optimize). You'll also want to read the [detailed instructions in the AOT Cookbook](../cookbook/aot-compiler.html "AOT Cookbook"). + * [Webpack](#webpack "Webpack 최적화")은 AOT용 플러그인을 포함하여 풍부한 생태계가 있는 인기 있는 범용 패키징 도구입니다. + Angular [webpack 가이드](webpack.html "Webpack: 소개")에서 시작할 수 있고 + _이_ 페이지에서 추가 최적화 조언을 얻을 수 있지만, 직접 webpack에 대해 자세히 알아야 할 것입니다. + * [Webpack](#webpack "Webpack Optimization") is a popular general purpose packaging tool with a rich ecosystem, including plugins for AOT. The Angular [webpack guide](webpack.html "Webpack: an introduction") can get you started and _this_ page provides additional optimization advice, but you'll probably have to learn more about webpack on your own. + * [Angular 설정](#angular-configuration "Angular 설정") 섹션에서는 + 성능을 향상시킬 수 있는 특정 클라이언트 애플리케이션 변경 사항에 대해 주의를 환기시킵니다. + * The [Angular configuration](#angular-configuration "Angular configuration") section calls attention to specific client application changes that could improve performance. + * [서버 설정](#server-configuration "서버 설정") 섹션에서는 _애플리케이션을 배포하는 + 방법에 관계없이_ 필요할 만한 서버 측 변경 사항을 설명합니다. + * The [Server configuration](#server-configuration "Server configuration") section describes server-side changes that may be necessary, _no matter how you deploy the application_. .l-main-section a#dev-deploy :marked + ## 가장 간단한 배포 ## Simplest deployment possible + 앱을 배포하는 가장 간단한 방법은 개발 환경 밖에 있는 + 웹 서버에 앱을 게시하는 것입니다. + The simplest way to deploy the app is to publish it to a web server directly out of the development environment. + 앱은 이미 로컬에서 실행 중입니다. 다른 사람들이 접근 할 수 있도록 + 로컬이 아닌 서버에 거의 _그대로_ 복사만 하면 됩니다. + It's already running locally. You'll just copy it, almost _as is_, to a non-local server that others can reach. + 1. _모든 것_ (또는 [_거의_ 모든 것](#node-modules "웹에서 npm package 로딩"))을 + 로컬 프로젝트 폴더에서 서버의 폴더로 복사하세요. + 1. Copy _everything_ (or [_almost_ everything](#node-modules "Loading npm packages from the web")) from the local project folder to a folder on the server. + 1. 하위 폴더에서 앱을 제공하는 경우 + `index.html`의 버전을 편집하여 ``를 적절하게 설정하세요. + 예를 들어, `index.html`의 URL이 `www.mysite.com/my/app/` 이면, + _base href_를 ``으로 설정하세요. + 그렇지 않으면 그대로 두세요. + [자세한 내용은 아래에 있습니다](#base-tag). + 1. If you're serving the app out of a subfolder, edit a version of `index.html` to set the `` appropriately. For example, if the URL to `index.html` is `www.mysite.com/my/app/`, set the _base href_ to @@ -67,15 +128,26 @@ a#dev-deploy Otherwise, leave it alone. [More on this below](#base-tag). + 1. 누락 된 파일에 대한 요청이 `index.html`으로 리디렉션하도록 서버를 구성하세요. + [자세한 내용은 아래에 있습니다](#fallback). + 1. Configure the server to redirect requests for missing files to `index.html`. [More on this below](#fallback). + 1. [아래에서 설명하는 것처럼](#enable-prod-mode) 상용 모드를 활성화하세요 (옵션). + 1. Enable production mode as [described below](#enable-prod-mode) (optional). + 이것이 여러분이 할 수 있는 가장 간단한 배포입니다. + That's the simplest deployment you can do. .alert.is-helpful :marked + 이것은 상용 배포가 _아닙니다_. 최적화되지 않았으며 사용자에게는 빠르지 않을 것입니다. + 관리자, 팀원 및 기타 이해 관계자에게 내부 진행 상황이나 아이디어를 공유하기에 충분할 수 있습니다. + 아래의 [상용 최적화](#optimize "상용 최적화"") 를 꼭 읽어보세요. + This is _not_ a production deployment. It's not optimized and it won't be fast for users. It might be good enough for sharing your progress and ideas internally with managers, teammates, and other stakeholders. Be sure to read about [optimizing for production](#optimize "Optimizing for production") below. @@ -83,39 +155,72 @@ a#dev-deploy a#node-modules :marked + ### 웹에서 npm 패키지 파일 로딩 (SystemJS) ### Load npm package files from the web (SystemJS) + _npm 패키지_의 `node_modules` 폴더에는 실제로 브라우저에서 + 앱을 실행하는 데 필요한 것보다 훨씬 많은 코드가 들어 있습니다. + 빠른시작 설치를 위한 `node_modules`는 일반적으로 20,500개 이상의 파일과 180MB 이상의 크기를 갖습니다. + 애플리케이션 자체는 실행하는 데 아주 작은 부분을 필요로 합니다. + The `node_modules` folder of _npm packages_ contains much more code than is needed to actually run your app in the browser. The `node_modules` for the Quickstart installation is typically 20,500+ files and 180+ MB. The application itself requires a tiny fraction of that to run. + 쓸모없이 대용량을 업로드 하는데 오랜 시간이 걸리고 + 라이브러리 파일을 조금씩 다운로드 하는 동안에 사용자는 불필요하게 기다리게 됩니다. + It takes a long time to upload all of that useless bulk and users will wait unnecessarily while library files download piecemeal. + 대신에 웹에서 필요한 몇 가지 파일을 로드하세요. + Load the few files you need from the web instead. + (1) 배포를 위해 `index.html`의 사본을 만들고 모든 `node_module` 스크립트를 + 웹에서 로드하는 버전으로 대체하세요. 다음과 같은 모습일 것입니다. + (1) Make a copy of `index.html` for deployment and replace all `node_module` scripts with versions that load from the web. It might look like this. +makeExample('deployment/ts/src/index.html', 'node-module-scripts', '')(format=".") :marked + (2) `systemjs.config.server.js`를 로드하는 스크립트로 + `systemjs.config.js` 스크립트를 대체하세요. + (2) Replace the `systemjs.config.js` script with a script that loads `systemjs.config.server.js`. +makeExample('deployment/ts/src/index.html', 'systemjs-config', '')(format=".") :marked + (3) `src/` 폴더에 (아래 코드 샘플과 같이) `systemjs.config.server.js`를 추가하세요. + 이 대체 버전은 _SystemJS_를 구성하여 Angular (및 기타 타사 패키지)의 _UMD_ 버전을 + 웹에서 로드합니다. + (3) Add `systemjs.config.server.js` (shown in the code sample below) to the `src/` folder. This alternative version configures _SystemJS_ to load _UMD_ versions of Angular (and other third-party packages) from the web. + `systemjs.config.jar`에 대한 변경 사항과 동기화 되도록 + `systemjs.config.server.js`를 수정하세요. + Modify `systemjs.config.server.js` as necessary to stay in sync with changes you make to `systemjs.config.js`. + `paths` 키에 주의하세요: + Notice the `paths` key: +makeExample('deployment/ts/src/systemjs.config.server.js', 'paths', '')(format=".") :marked + 표준 SystemJS 설정에서 `npm` 경로는 `node_modules/`를 가리킵니다. + 이번 서버 설정에서는 + _npm packages_를 호스팅하는 사이트인, + https://unpkg.com를 가리키며, + 웹에서 직접 로드합니다. + 같은 일을 하는 다른 서비스 제공 업체들도 있습니다. + In the standard SystemJS config, the `npm` path points to the `node_modules/`. In this server config, it points to https://unpkg.com, @@ -123,13 +228,21 @@ a#node-modules and loads them from the web directly. There are other service providers that do the same thing. + 오픈된 웹에서 패키지를 로드 할 수 없거나 로드하고 싶지 않은 경우, + `systemjs.config.server.js`의 인벤토리는 서버의 라이브러리 폴더에 복사 할 + 파일과 폴더를 확인합니다. + 그런 다음 config의 `'npm'` 경로가 해당 폴더를 가리키도록 변경합니다. + If you are unwilling or unable to load packages from the open web, the inventory in `systemjs.config.server.js` identifies the files and folders that you would copy to a library folder on the server. Then change the config's `'npm'` path to point to that folder. + ### 예제 실습 ### Practice with an example + 다음 간단한 라우터 샘플 애플리케이션은 이러한 변경 사항을 보여줍니다. + The following trivial router sample app shows these changes. +makeTabs( @@ -152,91 +265,194 @@ a#node-modules `) :marked + 애플리케이션에서 이러한 기술을 시도하기 전에 이 샘플로 연습하세요. + Practice with this sample before attempting these techniques on your application. + 1. 라는 새 프로젝트를 생성하려면 + [설정 안내](../guidelines/setup.html "Angular 빠른시작 설정")를 따라하세요. + 1. Follow the [setup instructions](../guide/setup.html "Angular QuickStart setup") for creating a new project named . + 1. 위에 표시된 "간단한 배포" 샘플 파일을 추가하세요. + 1. Add the "Simple deployment" sample files shown above. + 1. 프로젝트를 시작할 때와 마찬가지로 `npm start` 명령으로 실행하세요. + 1. Run it with `npm start` as you would any project. + 1. 브라우저 개발자 도구에서 네트워크 트래픽을 검사하세요. + 웹에서 모든 패키지를 로드하는 것에 주의하세요. + `node_modules` 폴더를 삭제해도 앱은 여전히 실행됩니다. + (비록 그것을 복원 할 때까지는 재컴파일하거나 + `lite-server`를 시작할 수는 없지만요) + 1. Inspect the network traffic in the browser developer tools. Notice that it loads all packages from the web. You could delete the `node_modules` folder and the app would still run (although you wouldn't be able to recompile or launch `lite-server` until you restored it). + 1. 샘플을 서버에 배포하세요 (`node_modules` 폴더를 제외하고요!). + 1. Deploy the sample to the server (minus the `node_modules` folder!). + 작업이 완료되면, 여러분의 애플리케이션에 동일한 과정을 시도해보세요. + When you have that working, try the same process on your application. a#optimize .l-main-section :marked + ## 상용 최적화 ## Optimize for production + 개발 환경의 작업을 직접 배포해도 되지만, 최적화된 상태와는 거리가 멉니다. + Although deploying directly from the development environment works, it's far from optimal. + 클라이언트는 많은 소규모의 개별 애플리케이션 코드 및 템플릿 파일을 요청합니다. + 이것은 브라우저 개발자 도구의 네트워크 탭을 보고 금방 확인할 수 있습니다. + 작은 파일을 다운로드 할 때마다 데이터를 전송하는 것보다 더 많은 시간을 서버와 통신하는데 사용할 수 있습니다. + The client makes many small requests for individual application code and template files, a fact you can quickly confirm by looking at the network tab in a browser's developer tools. Each small file download can spend more time communicating with the server than tranfering data. + 개발중인 파일에는 가독성과 디버깅을 위해 주석과 공백이 가득합니다. + 브라우저는 앱에 필요한 부분만이 아니라 전체 라이브러리를 다운로드합니다. + 서버에서 클라이언트로 전달되는 코드("페이로드")의 양은 + 애플리케이션을 실행하는 데 꼭 필요한 코드보다 훨씬 클 수 있습니다. + Development files are full of comments and whitespace for easy reading and debugging. The browser downloads entire libraries, instead of just the parts the app needs. The volume of code passed from server to client (the "payload") can be significantly larger than is strictly necessary to execute the application. + 많은 요청과 큰 페이로드는 + 앱을 최적화 한 경우보다 시작 시간이 오래 걸린다는 것을 의미합니다. + 사용자가 무엇을 보거나 유용한 어떤 것을 하기 전에 몇 초가 (또는 더 많이) 지났을 수 있습니다. + The many requests and large payloads mean the app takes longer to launch than it would if you optimized it. Several seconds may pass (or worse) before the user can see or do anything userful. + 이게 그렇게 중요할까요? 그것은 비즈니스나 여러분이 스스로 평가해야만 하는 기술적인 요소에 달려있습니다. + Does it matter? That depends upon business and technical factors you must evaluate for yourself. + 만약 이것이 _진짜_ 중요하다면, 요청 횟수와 응답 크기를 줄이는 도구와 기술이 있습니다. + If it _does_ matter, there are tools and techniques to reduce the number of requests and the size of responses. + - Ahead-of-Time (AOT) 컴파일: Angular 컴포넌트 템플릿을 미리 컴파일합니다. + - Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates. + + - 번들링(Bundling): 모듈을 하나의 파일(번들)로 합칩니다. + - Bundling: concatenates modules into a single file (bundle). + + - 인라이닝(Inlining): 템플릿 html 및 css를 컴포넌트로 가져옵니다. + - Inlining: pulls template html and css into the components. + + - 최소화(Minification): 여분의 공백, 주석 및 선택적 토큰을 제거합니다. + - Minification: removes excess whitespace, comments, and optional tokens. + + - 난독화(Uglification): 짧고 비밀스러운 변수 및 함수 이름을 사용하도록 코드를 다시 작성합니다. + - Uglification: rewrites code to use short, cryptic variable and function names. + + - 사용하지 않는 코드(dead code) 제거 : 참조되지 않은 모듈과 사용되지 않는 코드를 제거합니다. + - Dead code elimination: removes unreferenced modules and unused code. + + - 라이브러리 정리: 사용하지 않는 라이브러리를 삭제하고 다른 것들은 필요한 기능으로 잘라냅니다. + - Pruned libraries: drop unused libraries and pare others down to the features you need. + + - 성능 측정: 측정 가능한 차이를 만드는 최적화에 초점을 둡니다. + - Performance measurement: focus on optimizations that make a measurable difference. + 각각의 도구는 다른 일을 합니다. + 이것들을 조합하면 가장 잘 작동하고 서로 상호 보완을 합니다. + Each tool does something different. They work best in combination and are mutually reinforcing. + 원하는 어떤 빌드 시스템을 사용할 수 있습니다. + 선택한 시스템이 무엇이든 간에, + 상용 빌드가 단일 단계로 되도록 자동화 해야합니다. + You can use any build system you like. Whatever system you choose, be sure to automate it so that building for production is a single step. a#aot :marked + ### Ahead-of-Time (AOT) 컴파일 ### Ahead-of-Time (AOT) compilation + Angular _Ahead of Time_ 컴파일러는 빌드 프로세스 중에 애플리케이션 컴포넌트와 + 해당 템플릿을 미리 컴파일합니다. + The Angular _Ahead-of-Time_ compiler pre-compiles application components and their templates during the build process. + AOT로 컴파일 된 앱은 몇 가지 이유로 더 빨리 실행됩니다. + Apps compiled with AOT launch faster for several reasons. + + * 애플리케이션 컴포넌트는 클라이언트 측 컴파일 없이 즉시 실행됩니다. + * Application components execute immediately, without client-side compilation. + + * 템플릿은 컴포넌트 내에 코드로 포함되므로 템플릿 파일에 대한 클라이언트 측 요청이 없습니다. + * Templates are embedded as code within their components so there is no client-side request for template files. + + * Angular 컴파일러를 다운로드하지 않습니다. 이 컴파일러는 그 자체로 꽤 큽니다. + * You don't download the Angular compiler, which is pretty big on its own. + + * 컴파일러는 tree-shaking 도구로 제외 할 수 있는 사용하지 않는 Angular 지시자를 삭제합니다. + * The compiler discards unused Angular directives that a tree-shaking tool can then exclude. + AOT 컴파일에 대한 자세한 내용은 [AOT 요리책](../cookbook/aot-compiler.html "AOT 요리책")을 참조하세요. + 명령줄에서 AOT 컴파일러를 실행하는 방법과 + 번들링, 최소화, 난독화 및 tree shaking을 위해 [_rollup_](# rollup)을 사용하는 방법에 대해 설명합니다. + Learn more about AOT Compilation in the [AOT Cookbook](../cookbook/aot-compiler.html "AOT Cookbook") which describes running the AOT compiler from the command line and using [_rollup_](#rollup) for bundling, minification, uglification and tree shaking. a#webpack :marked + ### Webpack (과 AOT) ### Webpack (and AOT) + Webpack 2는 + 템플릿과 스타일시트의 인라이닝, 번들링, 최소화 및 애플리케이션 난독화를 위한 또 다른 훌륭한 옵션입니다. + "[Webpack: 소개](webpack.html "Webpack: 소개")" 가이드는 Angular에서 webpack을 사용하는 것을 안내합니다. + Webpack 2 is another great option for inlining templates and style-sheets, for bundling, minifying, and uglifying the application. The "[Webpack: an introduction](webpack.html "Webpack: an introduction")" guide will get you started using webpack with Angular. + 공식 + Angular Ahead-of-Time Webpack 플러그인 문서에서 + _Webpack_ 설정을 확인하세요. + 이 플러그인은 TypeScript 애플리케이션 코드를 트랜스파일링하고, + 지연 로딩된 `NgModules`을 따로 묶고; 소스 코드에는 어떠한 변경도 없이 + AOT 컴파일을 수행합니다. + Consider configuring _Webpack_ with the official Angular Ahead-of-Time Webpack Plugin. @@ -246,14 +462,28 @@ a#webpack a#rollup :marked + ### _rollup_으로 사용하지 않는 코드(dead code) 제거 ### Dead code elimination with _rollup_ + 호출하지 않는 코드는 _dead code_입니다. + 애플리케이션이나 타사 라이브러리에서 사용 불가능한 코드를 제거하여 애플리케이션의 전체 크기를 크게 줄일 수 있습니다. + Any code that you don't call is _dead code_. You can reduce the total size of the application substantially by removing dead code from the application and from third-party libraries. + + _Tree shaking_은 JavaScript 모듈의 익스포트 전체를 제거하는 _dead code 제거_ 기술입니다. + 만약 라이브러리가 애플리케이션에서 임포트하지 않는 것을 익스포트하면, tree shaking 도구는 그것을 코드에서 제거합니다. _Tree shaking_ is a _dead code elimination_ technique that removes entire exports from JavaScript modules. If a library exports something that the application doesn't import, a tree shaking tool removes it from the code base. + 번들링, 최소화, 난독화를 위한 플러그인 생태계를 가진 인기있는 도구인 + Rollup에 의해 + tree shaking이 대중화 되었습니다. + rollup 제작자인 Rich Harris가 작성한 + + 이 포스트에서 tree shaking과 dead code 제거에 대해 자세히 알아보세요. + Tree shaking was popularized by Rollup, a popular tool with an ecosystem of plugins for bundling, minification, and uglification. @@ -263,45 +493,78 @@ a#rollup a#prune :marked + ### 라이브러리 정리 ### Pruned libraries + 자동화 중에 모든 dead code가 제거될 것이라고 믿지 마세요. + Don't count on automation to remove all dead code. + 사용하지 않는 라이브러리, 특히 `index.html`에서 불필요한 스크립트를 제거하세요. + 사용 중인 라이브러리에 대해 보다 작은 대안이 있는지 고려해보세요. + Remove libraries that you don't use, especially unnecessary scripts in `index.html`. Consider smaller alternatives to the libraries that you do use. + 어떤 라이브러리는 필요한 기능만 갖춘 맞춤형 최소화 버전을 제작할 수 있는 기능을 제공합니다. + 다른 어떤 라이브러리는 _별도로_ 기능을 가져올 수 있습니다. + **RxJS**가 좋은 예입니다; 전체 라이브러리 대신 RxJS Observable 연산자를 개별적으로 임포트합니다. + Some libraries offer facilities for building a custom, skinny version with just the features you need. Other libraries let you import features _a la carte_. **RxJS** is a good example; import RxJS `Observable` operators individually instead of the entire library. a#measure :marked + ### 사전 성능측정 ### Measure performance first + 애플리케이션을 느리게 만드는 것을 명확하고 정확하게 이해하고 있다면 + 무엇을 어떻게 최적화할지에 대해 더 나은 결정을 내릴 수 있습니다. + 그 원인은 그럴 것이라고 생각하는 것이 아닐 수 있습니다. + 확실한 이점이 없는 무언가를 최적화하는 데 많은 시간과 비용을 낭비할 수 있고 심지어 앱을 더 느리게 할 수도 있습니다. + 여러분에게 중요한 환경에서 실행될 때의 앱의 실제 동작을 측정해야만 합니다. + You can make better decisions about what to optimize and how when you have a clear and accurate understanding of what's making the application slow. The cause may not be what you think it is. You can waste a lot of time and money optimizing something that has no tangible benefit or even makes the app slower. You should measure the app's actual behavior when running in the environments that are important to you. + + 크롬 네트워크 성능측정 개발자도구는 성능 측정 학습을 하기에 좋은 장소입니다. + The Chrome DevTools Network Performance page is a good place to start learning about measuring performance. + [WebPageTest](https://www.webpagetest.org/) 도구는 배포가 성공적인지 + 확인하는 데 도움이 되는 또 다른 좋은 선택지입니다. + The [WebPageTest](https://www.webpagetest.org/) tool is another good choice that can also help verify that your deployment was successful. a#angular-configuration .l-main-section :marked + ## Angular 설정 ## Angular configuration + Angular 설정을 하여 앱을 빠르게 실행하거나 전혀 로드하지 않도록 차이를 만들 수 있습니다. + Angular configuration can make the difference between whether the app launches quickly or doesn't load at all. a#base-tag :marked + ### `base` 태그 ### The `base` tag + HTML [_<base href="..."/>_](https://angular.io/docs/ts/latest/guide/router.html#!#base-href)는 + 이미지, 스크립트 및 스타일시트와 같은 자산에 대해 상대 URL을 결정하기 위한 기본 경로를 설정합니다. + 예를 들어 ``로 설정된 상태라면 브라우저는 `some/place/foo.jpg`와 같은 URL을 + `my/app/some/place/foo.jpg`에 대한 서버 요청으로 해석합니다. + 탐색하는 동안 Angular 라우터는 _base href_를 컴포넌트, 템플릿 및 모듈 파일의 기본 경로로 사용합니다. + The HTML [_<base href="..."/>_](https://angular.io/docs/ts/latest/guide/router.html#!#base-href) specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets. For example, given the ``, the browser resolves a URL such as `some/place/foo.jpg` @@ -310,59 +573,102 @@ a#base-tag .l-sub-section :marked + 대안으로 [*APP_BASE_HREF*](../api/common/index/APP_BASE_HREF-let.html "API: APP_BASE_HREF")도 참조하세요. + See also the [*APP_BASE_HREF*](../api/common/index/APP_BASE_HREF-let.html "API: APP_BASE_HREF") alternative. :marked + 개발 중에는 일반적으로 `index.html`이 있는 폴더에서 서버를 시작합니다. + 그것은 루트 폴더이고 `/`는 앱의 루트이기 때문에 ``를 `index.html`의 맨 위에 추가하세요. + In development, you typically start the server in the folder that holds `index.html`. That's the root folder and you'd add `` near the top of `index.html` because `/` is the root of the app. + 하지만 공유 서버나 상용 서버에서는 하위 폴더에서 애플리케이션을 구동할 수 있습니다. + 예를 들어, 앱을 로드할 URL이 `http://www.mysite.com/my/app/`인 경우, + 하위 폴더는 `my/app/`이고 서버의 `index.html`에 ``를 추가해야만 합니다. + But on the shared or production server, you might serve the app from a subfolder. For example, when the URL to load the app is something like `http://www.mysite.com/mysrc/app/`, the subfolder is `my/app/` and you should add `` to the server version of the `index.html`. + `base` 태그가 잘못 설정되면 앱이 로딩되지 않고 브라우저 콘솔에 누락된 파일에 대한 + `404 - Not Found` 오류가 표시됩니다. 찾으려고 _시도했던_ 파일들을 확인 후 base 태그를 적절히 수정하세요. + When the `base` tag is misconfigured, the app fails to load and the browser console displays `404 - Not Found` errors for the missing files. Look at where it _tried_ to find those files and adjust the base tag appropriately. a#enable-prod-mode :marked + ### 상용 모드 활성화 ### Enable production mode + Angular 앱은 기본적으로 개발 모드에서 실행됩니다. + 브라우저 콘솔에서 다음 메시지를 볼 수 있습니다. + Angular apps run in development mode by default, as you can see by the following message on the browser console: code-example(format="nocode"). Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. :marked + 상용 모드로 전환하면 이중 변경 감지 주기와 같은 개발 관련 검사를 비활성화하여 실행 속도를 향상시킬 수 있습니다. + Switching to production mode can make it run faster by disabling development specific checks such as the dual change detection cycles. + 원격으로 실행 중일 때 [상용 모드](../api/core/index/enableProdMode-function.html)를 활성화하려면 다음 코드를`main.ts`에 추가하세요. + To enable [production mode](../api/core/index/enableProdMode-function.html) when running remotely, add the following code to the `main.ts`. +makeExample('src/main.ts', 'enableProdMode','src/main.ts (enableProdMode)')(format=".") a#lazy-loading :marked + ### 지연 로딩 ### Lazy loading + 앱이 시작될 때 꼭 있어야 하는 애플리케이션 모듈만 로드하여 + 실행 시간을 크게 줄일 수 있습니다. + You can dramatically reduce launch time by only loading the application modules that absolutely must be present when the app starts. + [앱이 시작될 때까지 대기](router.html#preloading "Preloading")하거나 + 필요할 때 [_지연 로딩_](router.html#asynchronous-routing - "지연 로딩")하여 + 다른 모든 모듈 (및 관련 코드)의 로딩을 연기하도록 Angular 라우터를 설정하세요. + Configure the Angular Router to defer loading of all other modules (and their associated code), either by [waiting until the app has launched](router.html#preloading "Preloading") or by [_lazy loading_](router.html#asynchronous-routing "Lazy loading") them on demand. + #### 지연 로딩된 모듈의 무엇인가를 즉시 임포트하지 마세요. #### Don't eagerly import something from a lazy loaded module + 이것은 흔히 범하는 실수입니다. + 모듈을 지연 로딩하도록 했지만 + 앱이 시작될 때 즉시 로딩된 파일 (`AppModule`과 같은 파일)에서 + 의도치 않게 JavaScript의 `import` 구문을 사용해 임포트하는 경우입니다. + 그렇게 하면 모듈이 즉시 로드됩니다. + It's a common mistake. You've arranged to lazy load a module. But you unintentionally import it, with a JavaScript `import` statement, in a file that's eagerly loaded when the app starts, a file such as the root `AppModule`. If you do that, the module will be loaded immediately. + 번들 구성은 지연 로딩을 고려해야합니다. + 지연 로딩된 모듈은 (방금 언급한 것처럼) JavaScript에서 임포트한 것이 아니기 때문에, 기본적으로 번들러는 그것을 제외합니다. + 번들러는 라우터 구성에 대해 알지 못하고 지연 로딩된 모듈을 위해 별도의 번들을 만들지 않습니다. + 이러한 번들은 수동으로 만들어야 합니다. + The bundling configuration must take lazy loading into consideration. Because lazy loaded modules aren't imported in JavaScript (as just noted), bundlers exclude them by default. Bundlers don't know about the router configuration and won't create separate bundles for lazy loaded modules. You have to create these bundles manually. + [Angular Ahead-of-Time Webpack Plugin] (https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)은 + 느린 로딩 된`NgModules`을 자동으로 인식하여 별도의 번들을 생성합니다. + The [Angular Ahead-of-Time Webpack Plugin](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack) automatically recognizes lazy loaded `NgModules` and creates separate bundles for them. @@ -371,51 +677,92 @@ a#lazy-loading a#server-configuration .l-main-section :marked + ## 서버 설정 ## Server configuration + 이 섹션에서는 서버 또는 서버에 배포 된 파일의 변경 사항에 대해 설명합니다. + This section covers changes you may have make to the server or to files deployed to the server. a#fallback :marked + ### 라우팅된 앱은 반드시 `index.html`으로 fallback ### Routed apps must fallback to `index.html` + Angular 애플리케이션은 간단한 정적 HTML 서버에서 구동하기에 완벽한 후보입니다. + Angular는 클라이언트 측에서 실행되기 때문에 + 애플리케이션 페이지를 동적으로 구성하기 위한 서버 측 엔진이 필요하지 않습니다. + Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side. + 만약 애플리케이션이 Angular 라우터를 사용하는 경우, 가지고 있지 않은 파일을 요청 받는다면 + 애플리케이션의 호스트 페이지 (`index.html`)를 반환하도록 서버를 구성해야 합니다. + If the app uses the Angular router, you must configure the server to return the application's host page (`index.html`) when asked for a file that it does not have. a#deep-link :marked + 라우팅 된 애플리케이션은 "deep link"를 지원해야 합니다. + _deep link_는 앱 내부의 컴포넌트에 대한 경로를 지정하는 URL입니다. + 예를 들어 `http://www.mysite.com/heroes/42`는 `id: 42`의 히어로를 + 표시하는 히어로 상세 페이지의 _deep link_입니다. + A routed application should support "deep links". A _deep link_ is a URL that specifies a path to a component inside the app. For example, `http://www.mysite.com/heroes/42` is a _deep link_ to the hero detail page that displays the hero with `id: 42`. + 사용자가 실행 중인 클라이언트에 있는 URL로 탐색 할 때는 아무런 문제가 없습니다. + Angular 라우터는 URL을 해석하여 해당 페이지와 히어로에게 전달합니다. + There is no issue when the user navigates to that URL from within a running client. The Angular router interprets the URL and routes to that page and hero. + 그러나 이메일에서 링크를 클릭하거나, 브라우저의 주소창에 입력하거나, + 그저 히어로 상세 페이지에서 브라우저를 새로 고침하는 — + 이러한 모든 작업은 실행중인 애플리케이션 _바깥에 있는_ 브라우저에서 자체적으로 처리합니다. + 브라우저는 라우터를 우회하여 해당 URL에 대해 서버에 직접 요청합니다. + But clicking a link in an email, entering it in the browser address bar, or merely refreshing the browser while on the hero detail page — all of these actions are handled by the browser itself, _outside_ the running application. The browser makes a direct request to the server for that URL, bypassing the router. + 정적 서버는 `http://www.mysite.com/`에 대한 요청을 받으면 `index.html`을 반환합니다. + 그러나 `index.html`을 반환하도록 설정하지 *않았다면* + `http://www.mysite.com/heroes/42`를 거부하고 `404 - Not Found` 에러를 반환합니다. + A static server routinely returns `index.html` when it receives a request for `http://www.mysite.com/`. But it rejects `http://www.mysite.com/heroes/42` and returns a `404 - Not Found` error *unless* it is configured to return `index.html` instead. + #### Fallback 설정 예 #### Fallback configuration examples + 모든 서버에서 작동하는 단일 구성은 없습니다. + 다음 절에서는 가장 많이 사용되는 일부 서버의 구성에 대해 설명합니다. + 목록은 결코 완전한 것이 아니지만 좋은 시작점을 제공합니다. + There is no single configuration that works for every server. The following sections describe configurations for some of the most popular servers. The list is by no means exhaustive, but should provide you with a good starting point. + #### 개발 서버 #### Development servers + - [Lite-Server](https://github.com/johnpapa/lite-server): + [빠른시작 repo](https://github.com/angular/quickstart)에 설치된 기본 개발 서버는 + `index.html`로 fallback 되도록 사전 설정되어 있습니다. + - [Lite-Server](https://github.com/johnpapa/lite-server): the default dev server installed with the [Quickstart repo](https://github.com/angular/quickstart) is pre-configured to fallback to `index.html`. + - [Webpack-Dev-Server](https://github.com/webpack/webpack-dev-server): + 개발 서버 옵션의 `historyApiFallback` 엔트리를 다음과 같이 설정합니다: + - [Webpack-Dev-Server](https://github.com/webpack/webpack-dev-server): setup the `historyApiFallback` entry in the dev server options as follows: @@ -426,8 +773,14 @@ code-example(). } :marked + #### 상용 서버 #### Production servers + - [Apache](https://httpd.apache.org/): + [rewrite 규칙](http://httpd.apache.org/docs/current/mod/mod_rewrite.html)을 + `.htaccess`파일에 + [여기](https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/)처럼 추가하세요: + - [Apache](https://httpd.apache.org/): add a [rewrite rule](http://httpd.apache.org/docs/current/mod/mod_rewrite.html) to the `.htaccess` file as show @@ -443,6 +796,10 @@ code-example(format="."). RewriteRule ^ /index.html :marked + - [NGinx](http://nginx.org/): + [Front Controller Pattern Web Apps](https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps)에 기술된 것처럼, + `index.html`을 구동하도록 수정된 `try_files`를 사용합니다: + - [NGinx](http://nginx.org/): use `try_files`, as described in [Front Controller Pattern Web Apps](https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps), modified to serve `index.html`: @@ -451,6 +808,9 @@ code-example(format="."). try_files $uri $uri/ /index.html; :marked + - [IIS](https://www.iis.net/): [여기](http://stackoverflow.com/a/26152011/2116927)에 보이는 것과 비슷하게 + `web.config`에 rewrite rule을 추가합니다: + - [IIS](https://www.iis.net/): add a rewrite rule to `web.config`, similar to the one shown [here](http://stackoverflow.com/a/26152011/2116927): code-example(format="." escape="html"). @@ -470,6 +830,15 @@ code-example(format="." escape="html"). :marked + - [GitHub Pages](https://pages.github.com/): GitHub Pages 서버에 + [직접 설정](https://github.com/isaacs/github/issues/408)은 할 수 없습니다. + 그러나 404 페이지를 추가할 수 있습니다. + `index.html` 파일을 `404.html`로 복사하세요. + 여전히 404 응답을 할 것입니다. 그러나 브라우저는 해당 페이지를 처리하여 앱을 적절히 로드할 것입니다. + [master의 `docs/`에서 구동](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch) + 하거나 [`.nojekyll` 파일을 생성](https://www.bennadel.com/blog/3181-including-node-modules-and-vendors-folders-in-your-github-pages-site.htm) + 하는 것도 좋은 방법입니다. + - [GitHub Pages](https://pages.github.com/): you can't [directly configure](https://github.com/isaacs/github/issues/408) the GitHub Pages server, but you can add a 404 page. @@ -480,6 +849,9 @@ code-example(format="." escape="html"). and to [create a `.nojekyll` file](https://www.bennadel.com/blog/3181-including-node-modules-and-vendors-folders-in-your-github-pages-site.htm) + - [Firebase 호스팅](https://firebase.google.com/docs/hosting/): + [rewrite rule](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites)을 추가하세요. + - [Firebase hosting](https://firebase.google.com/docs/hosting/): add a [rewrite rule](https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites). @@ -492,14 +864,26 @@ code-example(format="."). a#cors .l-main-section :marked + ### 다른 서버에서 서비스 요청 (CORS) ### Requesting services from a different server (CORS) + Angular 개발자는 + 애플리케이션의 자체 호스트 서버가 아닌 다른 서버에 서비스 요청을 하면 (일반적으로 데이터 서비스 요청) + + cross-origin resource sharing 에러를 만나게 될 것입니다. + 브라우저가 명시적으로 허용하지 않는 한 브라우저는 이러한 요청을 금지합니다. + Angular developers may encounter a cross-origin resource sharing error when making a service request (typically a data service request). to a server other than the application's own host server. Browsers forbid such requests unless the server permits them explicitly. + 클라이언트 애플리케이션이 이러한 오류에 대해 할 수 있는 것이 아무것도 없습니다. + 서버가 반드시 애플리케이션의 요청을 받아들이도록 구성되어야 합니다. + + ## 목차 ## Table of contents + [Webpack이란 무엇인가요?](#what-is-webpack) + [What is Webpack?](#what-is-webpack) + * [엔트리와 출력](#entries-outputs) + * [Entries and outputs](#entries-outputs) + + * [로더](#loaders) + * [Loaders](#loaders) + + * [플러그인](#plugins) + * [Plugins](#plugins) + [Webpack 설정](#configure-webpack) + [Configuring Webpack](#configure-webpack) + * [공통 설정](#common-configuration) + * [Common configuration](#common-configuration) + + * [개발 설정](#development-configuration) + * [Development configuration](#development-configuration) + + * [상용 설정](#production-configuration) + * [Production configuration](#production-configuration) + + * [테스트 설정](#test-configuration) + * [Test configuration](#test-configuration) + [맛보기](#try) + [Trying it out](#try) + [결론](#conclusions) + [Conclusions](#conclusions) .l-main-section :marked + ## Webpack이란 무엇인가요? + ## What is Webpack? + Webpack은 강력한 모듈 번들러입니다. + _번들_은 _asset_을 포함하는 JavaScript 파일이며 + 단일 파일 요청에 대한 응답으로 클라이언트에 제공되어야 합니다. + 번들에는 JavaScript, CSS 스타일, HTML 및 거의 모든 다른 종류의 파일이 포함될 수 있습니다. + Webpack is a powerful module bundler. A _bundle_ is a JavaScript file that incorporate _assets_ that *belong* together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file. + Webpack은 애플리케이션 소스 코드를 훑어서 `import` 문을 찾고, + 의존성 그래프를 만들고, 하나 이상의 _번들_을 방출합니다. + 플러그인과 규칙을 통해 Webpack은 TypeScript, SASS 및 LESS 파일과 같은 여러 non-JavaScript 파일을 전처리하고 최소화 할 수 있습니다. + Webpack roams over your application source code, looking for `import` statements, building a dependency graph, and emitting one (or more) _bundles_. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files. + JavaScript 설정 파일인 `webpack.config.js`를 사용하여 Webpack이 무엇을 할지와 그것을 어떻게 할지를 결정합니다. + You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`. a(id="entries-outputs") .l-main-section :marked + ### 엔트리와 출력 ### Entries and outputs + 하나 이상의 *엔트리* 파일을 Webpack에 제공하여 해당 엔트리에서 방출되는 의존성을 찾아 통합시키도록 합니다. + 이 예제에서 하나의 진입점 파일은 애플리케이션 루트 파일인 `src/app.ts`입니다: + You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries. The one entry point file in this example is the application's root file, `src/app.ts`: +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-entry', 'webpack.config.js (single entry)')(format=".") :marked + Webpack은 해당 파일을 검사하고 `import` 의존성을 재귀적으로 탐색합니다. + Webpack inspects that file and traverses its `import` dependencies recursively. +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'app-example', 'src/app.ts')(format=".") :marked + *@angular/core*를 임포트하는 것을 확인하여 번들에 (잠재적으로) 포함을 하기 위해 의존성 목록에 추가합니다. + *@angular/core* 파일을 열고 `app.ts`에서 아래로 최종 의존성 그래프를 완성할 때까지 `import`문의 네트워크를 따라갑니다. + It sees that you're importing *@angular/core* so it adds that to its dependency list for (potential) inclusion in the bundle. It opens the *@angular/core* file and follows _its_ network of `import` statements until it has built the complete dependency graph from `app.ts` down. + 그런 다음 이러한 파일을 설정 파일에서 지정한 `app.js` _번들 파일_에 **출력합니다**: + Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration: +makeExample('webpack/ts-snippets/webpack.config.snippets.ts', 'one-output', 'webpack.config.js (single output)')(format=".") :marked + 이 `app.js` 출력 번들은 애플리케이션 소스와 그 의존성을 포함하는 단일 JavaScript 파일입니다. + 나중에 `