From 20b3f829947e861041a76ee8347e4aaf7e3747ed Mon Sep 17 00:00:00 2001 From: yahma25 Date: Wed, 3 Feb 2021 00:02:04 +0900 Subject: [PATCH 1/5] Translate 1 file to ko - Function Chaining --- .../Function Chaining.ts | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts diff --git a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts new file mode 100644 index 00000000..3e469f93 --- /dev/null +++ b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts @@ -0,0 +1,81 @@ +//// { order: 2, compiler: { esModuleInterop: true } } + +// 함수 체이닝 API는 JavaScript의 흔한 패턴입니다. +// 이는 여러분의 코드를 +// 중간값을 덜 포함함으로써 집중시킬 수 있고 +// JavaScript 중첩 특성 덕분에 더 읽기 쉽게 만들 수 있습니다. + +// 체이닝으로 동작하는 실제로 흔한 API는 jQuery입니다. +// 여기에 DefinitelyTyped의 타입과 함께 사용한 +// jQuery 예시가 있습니다: + +import $ from "jquery"; + +// jQuery API 사용 예시: + +$("#navigation").css("background", "red").height(300).fadeIn(200); + +// 위 라인에 점을 추가해보면, +// 긴 함수 리스트를 보게 될 것입니다. +// 이 패턴은 JavaScript에서 쉽게 재현할 수 있습니다. +// 핵심은 반드시 항상 같은 오브젝트 반환하는 것입니다. + +// 여기 체이닝 API를 만드는 API 예시가 있습니다. +// 핵심은 내부 상태를 파악하고 있는 외부 함수와 +// 항상 자신을 반환하는 API를 +// 노출하는 오브젝트를 갖는 것입니다. + +const addTwoNumbers = (start = 1) => { + let n = start; + + const api = { + // API에 있는 각 함수를 실행하세요 + add(inc: number = 1) { + n += inc; + return api; + }, + + print() { + console.log(n); + return api; + }, + }; + return api; +}; + +// jQuery에서 본 것처럼 +// 같은 스타일의 API를 허용: + +addTwoNumbers(1).add(3).add().print().add(1); + +// 클래스를 사용하는 비슷한 예시: + +class AddNumbers { + private n: number; + + constructor(start = 0) { + this.n = start; + } + + public add(inc = 1) { + this.n = this.n + inc; + return this; + } + + public print() { + console.log(this.n); + return this; + } +} + +// 여기에서 동작: + +new AddNumbers(2).add(3).add().print().add(1); + +// 이 예시는 JavaScript 패턴에 +// 도구를 제공하는 방법을 제공하기 위해서 +// TypeScript 타입 추론을 사용했습니다. + +// 더 많은 예시: +// +// - example:code-flow From ad1baf18806665d3283925822a79eb386e894277 Mon Sep 17 00:00:00 2001 From: MyoungHo Kim <34343507+yahma25@users.noreply.github.com> Date: Wed, 3 Feb 2021 21:28:55 +0900 Subject: [PATCH 2/5] Update docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts Co-authored-by: YeonJuan --- .../Functions with JavaScript/Function Chaining.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts index 3e469f93..1915c9a7 100644 --- a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts +++ b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts @@ -1,9 +1,9 @@ //// { order: 2, compiler: { esModuleInterop: true } } -// 함수 체이닝 API는 JavaScript의 흔한 패턴입니다. -// 이는 여러분의 코드를 -// 중간값을 덜 포함함으로써 집중시킬 수 있고 -// JavaScript 중첩 특성 덕분에 더 읽기 쉽게 만들 수 있습니다. +// 함수 체이닝 API는 JavaScript에서 흔한 패턴으로, +// JavaScript 의 중첩 특성으로 인해 +// 중간값을 줄이고 가독성을 높혀 +// 코드를 집중시킬 수 있습니다. // 체이닝으로 동작하는 실제로 흔한 API는 jQuery입니다. // 여기에 DefinitelyTyped의 타입과 함께 사용한 From 98f7ece15dff903d9120b81ca03d5048a6a96004 Mon Sep 17 00:00:00 2001 From: MyoungHo Kim <34343507+yahma25@users.noreply.github.com> Date: Wed, 3 Feb 2021 21:29:02 +0900 Subject: [PATCH 3/5] Update docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts Co-authored-by: YeonJuan --- .../JavaScript/Functions with JavaScript/Function Chaining.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts index 1915c9a7..b7f290c1 100644 --- a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts +++ b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts @@ -5,7 +5,7 @@ // 중간값을 줄이고 가독성을 높혀 // 코드를 집중시킬 수 있습니다. -// 체이닝으로 동작하는 실제로 흔한 API는 jQuery입니다. +// 체이닝으로 동작하는 흔한 API는 jQuery입니다. // 여기에 DefinitelyTyped의 타입과 함께 사용한 // jQuery 예시가 있습니다: From bf123c45e64c9a9ab7349551f53e078bb15aa592 Mon Sep 17 00:00:00 2001 From: MyoungHo Kim <34343507+yahma25@users.noreply.github.com> Date: Wed, 3 Feb 2021 21:29:09 +0900 Subject: [PATCH 4/5] Update docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts Co-authored-by: YeonJuan --- .../JavaScript/Functions with JavaScript/Function Chaining.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts index b7f290c1..52adcc53 100644 --- a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts +++ b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts @@ -6,8 +6,8 @@ // 코드를 집중시킬 수 있습니다. // 체이닝으로 동작하는 흔한 API는 jQuery입니다. -// 여기에 DefinitelyTyped의 타입과 함께 사용한 -// jQuery 예시가 있습니다: +// DefinitelyTyped의 타입과 함께 사용한 +// jQuery 예시입니다.: import $ from "jquery"; From cc11973896041c3c97b804b81fbb4140948d3790 Mon Sep 17 00:00:00 2001 From: MyoungHo Kim <34343507+yahma25@users.noreply.github.com> Date: Wed, 3 Feb 2021 21:29:15 +0900 Subject: [PATCH 5/5] Update docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts Co-authored-by: YeonJuan --- .../JavaScript/Functions with JavaScript/Function Chaining.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts index 52adcc53..977fb010 100644 --- a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts +++ b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts @@ -18,7 +18,7 @@ $("#navigation").css("background", "red").height(300).fadeIn(200); // 위 라인에 점을 추가해보면, // 긴 함수 리스트를 보게 될 것입니다. // 이 패턴은 JavaScript에서 쉽게 재현할 수 있습니다. -// 핵심은 반드시 항상 같은 오브젝트 반환하는 것입니다. +// 핵심은 반드시 항상 같은 오브젝트를 반환하는 것입니다. // 여기 체이닝 API를 만드는 API 예시가 있습니다. // 핵심은 내부 상태를 파악하고 있는 외부 함수와