diff --git a/public/docs/ts/latest/cookbook/component-relative-paths.jade b/public/docs/ts/latest/cookbook/component-relative-paths.jade index df9845c8..3066548c 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). diff --git a/public/docs/ts/latest/cookbook/visual-studio-2015.jade b/public/docs/ts/latest/cookbook/visual-studio-2015.jade index c450e89c..fafaca81 100644 --- a/public/docs/ts/latest/cookbook/visual-studio-2015.jade +++ b/public/docs/ts/latest/cookbook/visual-studio-2015.jade @@ -2,30 +2,58 @@ include ../_util-fns :marked + IDE로써 Visual Studio를 선호하는 사람들이 조금 있습니다. + 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 프로젝트 + ## 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**를 사용하고 계시다면, _실험적인 기능_을 고려해 보세요. + ASP.NET Core + Angular template for Visual Studio 2015. + 결과로 만들어지는 코드는 docs로 연결되지 않으니 적절히 수정해서 사용하세요. + 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 설치하기 + - [준비사항](#prereq2): Visual Studio 2015 업데이트 3 설치하기 + - [준비사항](#prereq3): External Web tools 설정하기 + - [준비사항](#prereq4): Visual Studio 2015용 TypeScript 2 설치하기 + - [단계 1](#download): 빠른시작 파일들 다운로드 하기 + - [단계 2](#create-project): Visual Studio에서 ASP.NET 프로젝트 생성하기 + - [단계 3](#copy): 빠른시작 파일들을 ASP.NET 프로젝트 폴더로 복사하기 + - [단계 4](#restore): 필요한 패키지들을 복원하기 + - [단계 5](#build-and-run): 어플리케이션을 빌드하고 실행하기 + - [Prerequisite](#prereq1): Install Node.js - [Prerequisite](#prereq2): Install Visual Studio 2015 Update 3 @@ -38,31 +66,61 @@ include ../_util-fns - [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® 와 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 버전 `4.6.x`이나 그 상위 버전, npm 버전 `3.x.x`이나 그 상위 버전을 설치 했는지 확인하세요** + `node -v`와 `npm -v` 명령어를 터미널에서 사용해서 확인하실 수 있습니다. 더 이전 버전들은 에러를 발생시킵니다. + **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의 버전을 보고 싶으시면, `도움말 | 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`. + Update 3이 설치되어 있지 않다면 **[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**에서 설치하세요. + 아니면 Visual Studio 2015의 `도구 | 확장 프로그램과 업데이트` 에서 바로 설치하실 수 있습니다. + 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: + * '도구' | `옵션` 에서 **옵션** 을 엽니다. +    * 왼쪽의 트리에서 '프로젝트 및 솔루션' | `외부 웹 도구` 을 선택하세요. +    * 오른쪽에서 `$(PATH)` 항목을 `$ (DevEnvDir`) 항목 위로 이동하세요. 이를 통해 Visual Studio에게 +      기존 버전의 외부 도구 대신에 전역 경로의 외부 도구 ( npm 같은 )를 사용하게 합니다. +    * 확인을 클릭하여 대화 상자를 닫습니다. +    * 이 변경 사항을 적용하려면 Visual Studio를 다시 시작하세요. + * Open the **Options** dialog with `Tools` | `Options` * In the tree on the left, select `Projects and Solutions` | `External Web Tools`. * On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to @@ -70,36 +128,67 @@ h2#prereq3 Prerequisite: Configure External Web tools * Click OK to close the dialog. * 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 준비사항: Visual Studio 2015를 위해 TypeScript 2 설치하기 + 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를 설치하려면: +    * [TypeScript 2.0 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`. + To install TypeScript 2: * 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)** * OR install it with npm: `npm install -g typescript@2.0`. + **[여기](https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/)**에서 Visual Studio의 TypeScript 2 지원에 대한 자세한 내용을 볼 수 있습니다. + 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 단계 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 단계 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의 메뉴에서 `파일` | `신규` | `프로젝트`를 선택하세요. +  * 템플릿 트리에서 `Templates` | `Visual C#` (또는 `Visual Basic`) | `웹`. +  * 'ASP.NET 웹 응용 프로그램 템플릿을 선택하고 프로젝트 이름을 지정한 다음 확인을 클릭하십시오. +  * 원하는 ASP.NET 4.5.2 템플릿을 선택하고 확인을 클릭하세요. * In Visual Studio, select `File` | `New` | `Project` from the menu. * In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`. @@ -108,16 +197,33 @@ h2#create-project Step 2: Create the Visual Studio ASP.NET project .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 단계 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: +  * 솔루션 탐색기에서 `모든 파일 표시` 버튼을 클릭하여 프로젝트의 모든 숨김 파일을 표시하세요. +  * 프로젝트에 포함될 각 폴더 / 파일을 마우스 오른쪽 버튼으로 클릭하고 `프로젝트에 포함` 을 선택하세요. +    최소한 다음 폴더 / 파일들을 포함하세요. +    * app 폴더 (TypeScript 타이핑을 검색하라는 메시지가 표시되면 *아니오*라고 답하세요) +    * styles.css +    * index.html +    * package.json +    * tsconfig.json + * 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: @@ -128,10 +234,23 @@ h2#copy Step 3: Copy the QuickStart files into the ASP.NET project folder * tsconfig.json .l-main-section +h2#restore 단계 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` 파일에 정의 된 모든 패키지를 설치합니다. +    약간의 시간이 걸릴 수 있습니다. +  * 원하는 경우 (`View` | `Output`)으로 출력 창을 열면 npm 명령이 실행되는 것을 볼 수 있습니다. +  * 경고들은 무시하세요. +  * 복원이 끝나면 `npm command completed with exit code 0`라는 메시지가 나타납니다. +  * 솔루션 탐색기에서 `새로 고침` 아이콘을 클릭하십시오. +  * `node_modules` 폴더를 프로젝트에 포함하지 **마세요**. 숨겨진 프로젝트 폴더로 내버려 두세요. + * 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. @@ -142,27 +261,52 @@ h2#restore Step 4: Restore the required packages * **Do not** include the `node_modules` folder in the project. Let it be a hidden project folder. .l-main-section +h2#build-and-run 단계 5: app 빌드 및 실행 + h2#build-and-run Step 5: Build and run the app :marked + 먼저, 'index.html`이 시작 페이지로 설정되어 있는지 확인하세요. +  솔루션 탐색기에서` index.html`을 오른쪽 클릭하고 `Set As Start Page` 옵션을 선택하십시오. + 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 + 기본 브라우저가 열리고 빠른시작 샘플 application이 표시됩니다. +   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. .l-main-section +h2#routing 라우팅 애플리케이션에 대한 주의사항 + h2#routing Note on Routing Applications :marked + 응용 프로그램이 Angular 라우터를 사용하는 경우 브라우저 새로 고침이 *404 - Page Not Found*를 반환 할 수 있습니다. +  검색 주소창을 보세요. navigation URL ("deep link")를 포함하고 있나요? ... 아니면 `/` 또는 + `/index.html` 이외의 경로를 포함하고 있나요? +   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` 을 반환하도록 서버를 설정해야합니다. +  그 전까지는 navigation 경로들을 지우고 다시 새로고침 하세요. + You'll have to configure the server to return `index.html` for these requests. Until you do, remove the navigation path and refresh again.