github-actions · Sep 12, 2020 · Sep 4, 2020 · Sep 4, 2020 · Sep 4, 2020 · Sep 4, 2020
diff --git a/packages/documentation/copy/ko/tutorials/Babel with TypeScript.md b/packages/documentation/copy/ko/tutorials/Babel with TypeScript.md
@@ -0,0 +1,49 @@
+---
+title: Using Babel with TypeScript
+layout: docs
+permalink: /ko/docs/handbook/babel-with-typescript.html
+oneline: How to create a hybrid Babel + TypeScript project
+translatable: true
+---
+
+## Babel vs TypeScript의 `tsc`
+
+모던 JavaScript 프로젝트를 만들 때, TypeScript에서 JavaScript 파일로 변환하는 올바른 방법에 대해 고민할 수 있습니다.
+
+많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같은 기존 프레임워크 또는 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면 결정은 여러분 손에 달려있습니다.
+
+하지만, 사용할만한 직관적인 방법은 다음과 같습니다:
+
+- 빌드 출력 결과와 소스 입력 파일이 거의 비슷한가요? `tsc`를 사용하세요.
+- 여러 잠재적인 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링을 하고, `tsc`로 타입을 검사하세요.
+
+## 트랜스파일링은 Babel, 타입은 `tsc` (Babel for transpiling, `tsc` for types)
-## 트랜스파일링은 Babel, 타입은 `tsc` (Babel for transpiling, `tsc` for types)
+## 트랜스파일링은 Babel, 타입은 `tsc`
-## 트랜스파일링은 Babel, 타입은 `tsc` (Babel for transpiling, `tsc` for types)
+## 트랜스파일링은 Babel, 타입은 `tsc`
+
+JavaScript 코드 베이스에서 TypeScript로 포팅되었을 수 있는 기존 빌드 인프라 구조를 가진 프로젝트의 일반적인 패턴입니다.
+
+이 기술은, Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성한 후, TypeScript를 사용하여 타입 검사 및 `.d.ts` 파일을 생성하는 복합 접근 방식입니다.
+
+Babel은 TypeScript를 지원하기 때문에, 기존 빌드 파이프라인으로 작업할 수 있고 Babel이 코드 타입을 검사하지 않기 때문에 JS 출력 시간이 더 빨라질 수 있습니다.
+
+#### 타입 검사와 d.ts 파일 생성 (Type Checking and d.ts file generation)
-#### 타입 검사와 d.ts 파일 생성 (Type Checking and d.ts file generation)
+#### 타입 검사와 d.ts 파일 생성
-#### 타입 검사와 d.ts 파일 생성 (Type Checking and d.ts file generation)
+#### 타입 검사와 d.ts 파일 생성
+
+Babel 사용의 단점은 TS를 JS로 전환하는 동안 타입 검사를 할 수 없다는 점입니다. 즉, 에디터에서 잡지 못한 타입 오류가 프로덕션 코드에 포함될 수도 있다는 뜻입니다.
+
+또한, Babel은 TypeScript에 대한 `.d.ts` 파일을 만들 수 없기 때문에 여러분의 프로젝트가 라이브러리인 경우 작업하기가 더 어려워질 수 있습니다.
+
+이러한 문제를 해결하려면 TSC를 사용하여 프로젝트의 타입을 검사할 수 있는 명령어를 설정하는 것이 좋습니다. 이는 Babel 구성의 일부를 해당 [`tsconfig.json`](/tconfig)에 복제하고, 다음 플래그가 활성화되었는지 확인하는 것을 의미합니다:
+
+```json tsconfig
+"compilerOptions": {
+  // tsc를 사용해 .js 파일이 아닌 .d.ts 파일이 생성되었는지 확인합니다.
+  "declaration": true,
+  "emitDeclarationOnly": true,
+  // Babel이 TypeScript 프로젝트의 파일을 안전하게 트랜스파일할 수 있는지 확인합니다.
+  "isolatedModules": true
+}
+```
+
+해당 플래그에 대한 자세한 내용은 다음을 참고해주세요:
+
+- [`isolatedModules`](/tsconfig#isolatedModules)
+- [`declaration`](/tsconfig#declaration), [`emitDeclarationOnly`](/tsconfig#emitDeclarationOnly)
diff --git a/packages/documentation/copy/ko/tutorials/React.md b/packages/documentation/copy/ko/tutorials/React.md
@@ -0,0 +1,26 @@
+---
+title: React
+layout: docs
+permalink: /ko/docs/handbook/react.html
+oneline: Links to learn about TypeScript and React
+translatable: true
+---
+
+TypeScript는 [JSX](/docs/handbook/jsx.html)를 지원하며 `useState`와 같은 React 코드 베이스에서 사용되는 패턴을 올바르게 모델링할 수 있습니다.
+
+### React 프로젝트 설정하기
+
+오늘날 TypeScript를 지원하는 많은 프레임워크가 있습니다:
+
+- [Create React App](https://create-react-app.dev) - [TS docs](https://create-react-app.dev/docs/adding-typescript/)
+- [Next.js](https://nextjs.org) - [TS docs](https://nextjs.org/learn/excel/typescript)
+- [Gatsby](https://www.gatsbyjs.org) - [TS Docs](https://www.gatsbyjs.org/docs/typescript/)
+
+이들 모두 시작하기에 좋은 프레임워크들입니다. [이 웹사이트](https://github.com/microsoft/TypeScript-Website/)에서는 TypeScript와 함께 [Gatsby](https://www.gatsbyjs.org/blog/2020-01-23-why-typescript-chose-gatsby/#reach-skip-nav)를 사용하므로, 유용한 레퍼런스가 될 수 있습니다.
+
+### 문서
+
+다음은 React 및 TypeScript에 대한 최신 정보를 찾을 수 있는 좋은 사이트들입니다:
+
+- [React TypeScript Cheatsheets](https://react-typescript-cheatsheet.netlify.app)
+- [React & Redux in TypeScript](https://github.com/piotrwitek/react-redux-typescript-guide#react--redux-in-typescript---complete-guide)
diff --git a/packages/documentation/copy/ko/tutorials/TypeScript Tooling in 5 minutes.md b/packages/documentation/copy/ko/tutorials/TypeScript Tooling in 5 minutes.md
@@ -0,0 +1,187 @@
+---
+title: TypeScript Tooling in 5 minutes
+layout: docs
+permalink: /ko/docs/handbook/typescript-tooling-in-5-minutes.html
+oneline: A tutorial to understand how to create a small website with TypeScript
+translatable: true
+---
+
+TypeScript로 간단한 웹 애플리케이션을 만들어봅시다.
+
+## TypeScript 설치하기
+
+프로젝트에서 TypeScript를 사용할 수 있는 두 가지 주요 방법이 있습니다:
+
+- npm 사용하기(Node.js 패키지 매니저)
+- Visual Studio TypeScript 플러그인 설치하기
+
+Visual Studio 2017과 Visual Studio 2015 Update 3에는 TypeScript가 기본적으로 포함되어 있습니다.
+만약 Visual Studio로 TypeScript를 설치하지 않았다면, [여기서 다운로드하세요](/download).
+
+npm 사용자의 경우:
+
+```shell
+> npm install -g typescript
+```
+
+## 첫 번째 TypeScript 파일 생성하기
+
+에디터에서, 아래 JavaScript 코드를 `greeter.ts`에 작성하세요.
+
+```ts twoslash
+// @noImplicitAny: false
+function greeter(person) {
+  return "Hello, " + person;
+}
+
+let user = "Jane User";
+
+document.body.textContent = greeter(user);
+```
+
+## 코드 컴파일하기
+
+우리는 `.ts` 확장자를 사용했지만, 이 코드는 JavaScript일 뿐입니다.
+이 코드를 기존 JavaScript 앱에 바로 복사/붙여넣을 수 있습니다.
+
+명령 줄에서, TypeScript 컴파일러를 실행해보세요:
+
+```shell
+tsc greeter.ts
+```
+
+방금 작성한 코드와 동일한 JavaScript 파일, `greeter.js`이 생성될 것입니다.
+JavaScript 앱에서 TypeScript를 사용하여 실행 중입니다!
+
+이제, TypeScript에서 제공하는 몇 가지 새로운 도구들을 사용해봅시다.
+여기 표시된 대로 함수 인수인 'person'에 `: string` 타입 표기를 추가해봅시다.
+
+```ts twoslash
+function greeter(person: string) {
+  return "Hello, " + person;
+}
+
+let user = "Jane User";
+
+document.body.textContent = greeter(user);
+```
+
+## 타입 표기
+
+TypeScript의 타입 표기는 함수나 변수의 의도된 계약을 기록하는 간단한 방법입니다.
+이 경우, greeter 함수를 단일 문자열 매개변수로 호출하도록 합니다.
+대신 배열을 전달하여 greeter 함수를 호출하도록 변경해봅시다.
+
+```ts twoslash
+// @errors: 2345
+function greeter(person: string) {
+  return "Hello, " + person;
+}
+
+let user = [0, 1, 2];
+
+document.body.textContent = greeter(user);
+```
+
+다시 컴파일해보면, 오류가 발생한 것을 볼 수 있습니다:
+
+```shell
+error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
+```
+
+마찬가지로, greeter 호출에 대한 모든 인수를 제거해봅시다.
+TypeScript는 예상치 못한 수의 매개변수를 사용하여 이 함수를 호출했음을 알려줍니다.
+두 경우 모두, TypeScript는 코드 구조와 사용자가 제공한 타입 표기를 기반으로 정적 분석을 제공할 수 있습니다.
+
+오류가 있었음에도, `greeter.js` 파일은 여전히 생성됩니다.
+코드에 오류가 있어도 TypeScript를 사용할 수 있습니다. 그러나 이 경우, TypeScript는 코드가 예상대로 실행되지 않을 것이라고 경고합니다.
+
+## 인터페이스
+
+샘플을 좀 더 발전시켜봅시다. 여기 firstName과 lastName 필드가 있는 객체를 설명하는 인터페이스가 있습니다.
+TypeScript에서는, 내부 구조가 호환되는 경우 두 개의 타입이 호환됩니다.
+이를 통해, 명시적인 `implements` 절 없이도 인터페이스가 필요로 하는 모양을 갖추는 것만으로 인터페이스를 구현할 수 있습니다.
+
+```ts twoslash
+interface Person {
+  firstName: string;
+  lastName: string;
+}
+
+function greeter(person: Person) {
+  return "Hello, " + person.firstName + " " + person.lastName;
+}
+
+let user = { firstName: "Jane", lastName: "User" };
+
+document.body.textContent = greeter(user);
+```
+
+## 클래스
+
+마지막으로, 클래스를 사용하여 예제를 확장해봅시다.
+TypeScript는 클래스 기반 객체 지향 프로그래밍 지원과 같은 JavaScript의 새로운 기능을 지원합니다.
+
+몇 가지 퍼블릭 필드와 생성자를 포함한 `Student` 클래스를 생성해봅시다.
+클래스와 인터페이스가 함께 잘 작동하므로, 프로그래머가 적절한 수준의 추상화를 결정할 수 있습니다.
+
+또한, 생성자에 대한 인수에 `public`을 사용하는 것은 자동으로 그 이름을 가진 속성을 만들 수 있게 해주는 약어입니다.
+
+```ts twoslash
+class Student {
+  fullName: string;
+  constructor(
+    public firstName: string,
+    public middleInitial: string,
+    public lastName: string
+  ) {
+    this.fullName = firstName + " " + middleInitial + " " + lastName;
+  }
+}
+
+interface Person {
+  firstName: string;
+  lastName: string;
+}
+
+function greeter(person: Person) {
+  return "Hello, " + person.firstName + " " + person.lastName;
+}
+
+let user = new Student("Jane", "M.", "User");
+
+document.body.textContent = greeter(user);
+```
+
+`tsc greeter.ts` 명령어를 다시 실행해보면, 기존 코드와 새로 생성된 JavaScript 코드가 동일하다는 것을 알 수 있습니다.
+TypeScript의 클래스는 JavaScript에서 자주 사용되는 동일한 프로토타입 기반 OO의 약어입니다.
+
+## TypeScript 웹 앱 실행해보기
+
+`greeter.html`에 다음과 같이 입력하세요:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>TypeScript Greeter</title>
+  </head>
+  <body>
+    <script src="greeter.js"></script>
+  </body>
+</html>
+```
+
+브라우저에서 `greeter.html`을 열어 첫 번째 간단한 TypeScript 웹 애플리케이션을 실행하세요!
+
+추가로: Visual Studio에서 `greeter.ts`를 열거나, TypeScript playground에 코드를 복사해보세요.
+식별자 위로 마우스를 가져가면 해당 타입을 볼 수 있습니다.
+어떤 경우에는 사용자를 위해 자동으로 타입이 추론됩니다.
+마지막 줄을 다시 입력하고, DOM 요소 유형에 따라 완성 목록과 매개 변수 도움말을 참고해보세요.
+greeter 함수에 대한 참조에 커서를 놓고, F12를 눌러 해당 정의로 이동해보세요.
+심벌에 우클릭하여 리팩토링을 사용하여 이름을 바꿀 수 있습니다.
+
+제공된 타입 정보는 애플리케이션 규모에서 JavaScript로 작업하는 도구와 함께 동작합니다.
+TypeScript에서 가능한 것에 대한 더 많은 예제는 웹사이트의 Samples 부분을 참고하세요.
+
+![Visual Studio picture](/images/docs/greet_person.png)