Skip to content

Commit

Permalink
ko: Convert noteblocks to GFM Alerts (part 2) (#22759)
Browse files Browse the repository at this point in the history
This PR converts the noteblocks for the Korean locale to GFM Alerts syntax, using a [conversion script](https://github.com/queengooborg/mdn-toolkit/blob/main/upgrade-noteblock.js). This is part 2. Note: manual adjustments have also been made to correct some issues, including capitalization, syntax, duplicated keywords and more.
  • Loading branch information
queengooborg authored Jul 31, 2024
1 parent 090ccaf commit 042c48e
Show file tree
Hide file tree
Showing 100 changed files with 570 additions and 284 deletions.
3 changes: 2 additions & 1 deletion files/ko/learn/html/tables/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화

이 모듈을 시작하기 전에, 당신은 이미 HTML의 기본 지식을 가지고 있어야 합니다. — [Introduction to HTML](/ko/docs/Learn/HTML/Introduction_to_HTML).

> **참고:** 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.
> [!NOTE]
> 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.
## 가이드

Expand Down
3 changes: 2 additions & 1 deletion files/ko/learn/html/tables/structuring_planet_data/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ l10n:

또는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/)와 같은 사이트를 사용하여 HTML, CSS 및 JavaScript를 붙여넣어 평가를 수행할 수 있습니다. 별도의 JavaScript/CSS 패널이 없는 온라인 편집기를 사용하는 경우, HTML 문서 내에 인라인 `<script>` 또는 `<style>` 요소로 넣을 수 있습니다.

> **참고:** 궁금한 점이 있거나 도움이 필요하면 문의하세요. 이 페이지 하단의 [평가 또는 추가 도움](#평가_또는_추가_도움) 섹션을 참조하세요.
> [!NOTE]
> 궁금한 점이 있거나 도움이 필요하면 문의하세요. 이 페이지 하단의 [평가 또는 추가 도움](#평가_또는_추가_도움) 섹션을 참조하세요.
## 프로젝트 개요

Expand Down
5 changes: 3 additions & 2 deletions files/ko/learn/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ MDN 학습지의 목표는 여러분을 "전문가"로 만드는 것이 아니

웹 개발이 완전 처음이시라면 시작이 다소 어려우실 수 있습니다. 저희가 이끌어드리면서 주제와 충분히 친숙해지고, 제대로 익히실 수 있도록 상세하게 알려드리겠습니다. 독학이나 강의로 웹 개발을 배우는 학생, 교육 자료를 찾고 계시는 선생님, 취미로 웹 개발을 알아보시는 분, 그저 웹 기술의 동작 원리를 알아보고 싶으신 분 모두 편하게 보실 수 있을거예요.

> **알림:**
> [!CALLOUT]
>
> #### 프런트엔드 웹 개발자가 되고자 하시나요?
>
Expand Down Expand Up @@ -40,7 +40,8 @@ MDN 학습지의 목표는 여러분을 "전문가"로 만드는 것이 아니
읽어보세요. 그 후에는
[클라이언트 사이드 JavaScript 프레임워크](/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)[서버 사이드 웹 사이트 프로그래밍](/ko/docs/Learn/Server-side)도 한 번 고려해보세요.

> **참고:** MDN [용어집](/ko/docs/Glossary)에서 각종 용어의 정의를 찾아보실 수 있습니다. 웹 개발에 관한 질문이 있으시면 [자주 하는 질문](/ko/docs/Learn/Common_questions) 문서도 확인해보세요.
> [!NOTE]
> MDN [용어집](/ko/docs/Glossary)에서 각종 용어의 정의를 찾아보실 수 있습니다. 웹 개발에 관한 질문이 있으시면 [자주 하는 질문](/ko/docs/Learn/Common_questions) 문서도 확인해보세요.
## 다루는 주제

Expand Down
5 changes: 3 additions & 2 deletions files/ko/learn/javascript/asynchronous/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ l10n:

이 과정에서 우리는 {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}와 이것이 중요한 이유, 서버에서 리소스를 가져오는 것과 같은 잠재적 블로킹 연산을 어떻게 효과적으로 다룰 수 있을지에 대해 살펴봅니다.

> **Callout:**
> [!CALLOUT]
>
> #### 프론트엔드 웹 개발자가 되고싶으신가요?
>
Expand All @@ -21,7 +21,8 @@ l10n:

Asynchronous Javascript는 상당히 고급 주제에 속하고, 시도해보기 전에 [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)[JavaScript 구성요소](/ko/docs/Learn/JavaScript/Building_blocks) 과정을 거치는것이 좋습니다.

> **참고:** 만약 파일을 만들 수 없는 컴퓨터/테블릿/기타 장치를 사용하고 있다면, [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)와 같은 온라인 코딩 프로그램에서 (대부분의) 예제 코드를 사용해볼 수 있습니다.
> [!NOTE]
> 만약 파일을 만들 수 없는 컴퓨터/테블릿/기타 장치를 사용하고 있다면, [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)와 같은 온라인 코딩 프로그램에서 (대부분의) 예제 코드를 사용해볼 수 있습니다.
## 가이드

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,8 @@ function generatePrimes(quota) {

`generatePrimes()` 함수는 동기 버전과 비슷하지만, 값을 반환하는 대신 작업이 끝나면 메인 스크립트로 메시지를 보냅니다. 이를 위해 {{domxref("DedicatedWorkerGlobalScope/postMessage", "postMessage()")}} 함수를 사용합니다. 이는 `addEventListener()`와 같이 워커의 전역 함수입니다. 이미 살펴본 바와 같이, 메인 스크립트는 이 메시지를 수신하고 있으며 메시지가 수신되면 DOM을 업데이트합니다.

> **참고:** 이 사이트를 실행하려면 로컬 웹 서버를 실행해야 합니다. file:// URL로는 워커를 로드할 수 없기 때문입니다. [테스트 로컬 서버 설정](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server) 가이드를 참조하시기 바랍니다. 이렇게 하면 "Generate primes"를 눌러 기본 페이지를 응답할 수 있는 상태로 유지할 수 있습니다.
> [!NOTE]
> 이 사이트를 실행하려면 로컬 웹 서버를 실행해야 합니다. file:// URL로는 워커를 로드할 수 없기 때문입니다. [테스트 로컬 서버 설정](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server) 가이드를 참조하시기 바랍니다. 이렇게 하면 "Generate primes"를 눌러 기본 페이지를 응답할 수 있는 상태로 유지할 수 있습니다.
>
> 예제를 만들거나 실행하는 데 문제가 있는 경우 <https://github.com/mdn/learning-area/blob/main/javascript/asynchronous/workers/finished>에서 완성된 버전을 확인하고 <https://mdn.github.io/learning-area/javascript/asynchronous/workers/finished> 에서 라이브로 사용해 볼 수 있습니다.
Expand Down
30 changes: 20 additions & 10 deletions files/ko/learn/javascript/asynchronous/promises/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ function handleCallButton(evt) {

여기서 중요한건 `getUserMedia()`는 카메라 스트림이 아직 확보되지 않았음에도 거의 즉시 반환을 해줬다는 것 입니다. `handleCallButton()` 함수가 자신을 호출한 코드로 결과를 이미 반환을 했더라도 `getUserMedia()`의 작업이 종료되면 프로그래머가 작성한 다음 핸들러를 호출할 것 입니다. 앱이 스트리밍을 했다고 가정하지 않는 한 계속 실행될 수 있습니다.

> **참고:** You can learn more about this somewhat advanced topic, if you're interested, in the article [Signaling and video calling](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling). Code similar to this, but much more complete, is used in that example.
> [!NOTE]
> You can learn more about this somewhat advanced topic, if you're interested, in the article [Signaling and video calling](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling). Code similar to this, but much more complete, is used in that example.
## The trouble with callbacks

Expand Down Expand Up @@ -151,7 +152,8 @@ chooseToppings()

그런데 이렇게 작성하면 읽기가 쉽지 않습니다. 사용자의 코드가 지금의 예제보다 더 복잡하다면 위의 방법은 사용하기 힘듭니다.

> **참고:** 다음 장에서 배울 `async`/`await` 문법으로 좀 더 간결화 할 수 있습니다.
> [!NOTE]
> 다음 장에서 배울 `async`/`await` 문법으로 좀 더 간결화 할 수 있습니다.
Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습니다. :

Expand All @@ -164,7 +166,8 @@ Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습

첫 번째로, 웹에서 이미지를 가져오기 위하여 [`fetch()`](/ko/docs/Web/API/fetch) 메서드를 사용할 때 입니다.{{domxref("Body.blob", "blob()")}} 메서드는 fetch가 응답한 원시 body컨텐츠를 {{domxref("Blob")}} 오브젝트로 변환시켜주고{{htmlelement("img")}} 엘리먼트에 표현합니다. 이예제는 [first article of the series](/ko/docs/Learn/JavaScript/Asynchronous/Introducing#Asynchronous_JavaScript)유사합니다. 다만 Promise를 사용하기 위해 약간의 변경을 하겠습니다.

> **참고:** The following example will not work if you just run it directly from the file (i.e. via a `file://` URL). You need to run it through a [local testing server](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server), or use an online solution such as [Glitch](https://glitch.com/) or [GitHub pages](/ko/docs/Learn/Common_questions/Using_Github_pages).
> [!NOTE]
> The following example will not work if you just run it directly from the file (i.e. via a `file://` URL). You need to run it through a [local testing server](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server), or use an online solution such as [Glitch](https://glitch.com/) or [GitHub pages](/ko/docs/Learn/Common_questions/Using_Github_pages).
1. 먼저 [simple HTML template](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) 와 fetch할 이미지인 [sample image file](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg) 을 다운받습니다.
2. HTML {{htmlelement("body")}} 하단에 {{htmlelement("script")}} 엘리먼트를 삽입합니다.
Expand All @@ -178,7 +181,8 @@ Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습

4. 작업이 성공적으로 진행될 때를 대응하기 위해 (이번 예제에선 {{domxref("Response")}} 가 반환될 때 입니다. ), 우리는 Promise 오브젝트의 [`.then()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 메서드를 호출합니다. `.then()` 블럭 안의 callback은 (**executor** 라고 부름) Promise가 성공적으로 완료되고{{domxref("Response")}} 오브젝트를 반환할 때만 실행합니다. — 이렇게 성공한 Promise의 상태를 **fulfilled**라고 부릅니다. 그리고 반환된 {{domxref("Response")}} 오브젝트를 매개변수로 전달합니다.

> **참고:** The way that a `.then()` block works is similar to when you add an event listener to an object using `AddEventListener()`. It doesn't run until an event occurs (when the promise fulfills). The most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.
> [!NOTE]
> The way that a `.then()` block works is similar to when you add an event listener to an object using `AddEventListener()`. It doesn't run until an event occurs (when the promise fulfills). The most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.
그리고 즉시 `blob()` 메서드를 실행하여 Response Body가 완전히 다운로드 됐는지 확인합니다. 그리고 Response Body가 이용 가능할 때 추가 작업을 할 수 있는 `Blob` 오브젝트로 변환시킵니다. 해당 코드는 아래와 같이 작성할 수 있습니다. :

Expand Down Expand Up @@ -221,7 +225,8 @@ Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습

If you save the HTML file you've just created and load it in your browser, you'll see that the image is displayed in the page as expected. Good work!

> **참고:** You will probably notice that these examples are somewhat contrived. You could just do away with the whole `fetch()` and `blob()` chain, and just create an `<img>` element and set its `src` attribute value to the URL of the image file, `coffee.jpg`. We did, however, pick this example because it demonstrates promises in a nice simple fashion, rather than for its real-world appropriateness.
> [!NOTE]
> You will probably notice that these examples are somewhat contrived. You could just do away with the whole `fetch()` and `blob()` chain, and just create an `<img>` element and set its `src` attribute value to the URL of the image file, `coffee.jpg`. We did, however, pick this example because it demonstrates promises in a nice simple fashion, rather than for its real-world appropriateness.
### Responding to failure

Expand All @@ -239,7 +244,8 @@ let errorCase = promise3.catch((e) => {

물론 `.catch()` 블록 없이 코드를 작동시킬 수 있습니다. 하지만 좀 더 깊게 생각해보면 `.catch()` 블록이 없으면 어떤 에러가 발생했는지, 어떻게 해결해야 하는지 디버깅이 어렵습니다. 실제 앱에서 `.catch()` 을 사용하여 이미지 가져오기를 다시 실행하거나, 기본 이미지를 표시하는 등 작업을 지시할 수 있습니다.

> **참고:** You can see [our version of the example live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html) (see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html) also).
> [!NOTE]
> You can see [our version of the example live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html) (see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html) also).
### Chaining the blocks together

Expand Down Expand Up @@ -385,9 +391,11 @@ Promise.all([a, b, c]).then(values => {

여기서 제공한 코드는 매우 기초적이지만, 내용을 전달하기에는 아주 좋습니다..

> **참고:** If you get stuck, you can compare your version of the code to ours, to see what it is meant to look like — [see it live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), and see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html).
> [!NOTE]
> If you get stuck, you can compare your version of the code to ours, to see what it is meant to look like — [see it live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), and see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html).
> **참고:** If you were improving this code, you might want to loop through a list of items to display, fetching and decoding each one, and then loop through the results inside `Promise.all()`, running a different function to display each one depending on what the type of code was. This would make it work for any number of items, not just three.
> [!NOTE]
> If you were improving this code, you might want to loop through a list of items to display, fetching and decoding each one, and then loop through the results inside `Promise.all()`, running a different function to display each one depending on what the type of code was. This would make it work for any number of items, not just three.
>
> Also, you could determine what the type of file is being fetched without needing an explicit `type` property. You could, for example, check the {{HTTPHeader("Content-Type")}} HTTP header of the response in each case using [`response.headers.get("content-type")`](/ko/docs/Web/API/Headers/get), and then react accordingly.
Expand Down Expand Up @@ -490,7 +498,8 @@ Try [running this live](https://mdn.github.io/learning-area/javascript/asynchron

위의 예시는 유연하게 적용된 예시가 아닙니다. — Promise는 항산 하나의 문자열로만 fulfil됩니다. 그리고 [`reject()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) 조건도 정의되어있지 않습니다. (사실, `setTimeout()` 은 실패 조건이 필요없습니다, 그러니 이 예제에서는 없어도 됩니다.).

> **참고:** Why `resolve()`, and not `fulfill()`? The answer we'll give you, for now, is _it's complicated_.
> [!NOTE]
> Why `resolve()`, and not `fulfill()`? The answer we'll give you, for now, is _it's complicated_.
### Rejecting a custom promise

Expand Down Expand Up @@ -538,7 +547,8 @@ timeoutPromise("Hello there!", 1000)

이 코드를 저장하고 브라우저를 새로 고침하면 1초 후에 'Hello there!' alert가 출력될 것 입니다. 이제 메시지 내용을 비우거나 interval을 음수로 지정해보세요 그렇게 하면 Promise가 reject되며 에러 메시지를 콘솔에 출력해 줄 것입니다. 또한 resolved 메시지를 다르게 만들어 줄 수도 있습니다.

> **참고:** You can find our version of this example on GitHub as [custom-promise2.html](https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html) (see also the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html)).
> [!NOTE]
> You can find our version of this example on GitHub as [custom-promise2.html](https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html) (see also the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html)).
### A more real-world example

Expand Down
Loading

0 comments on commit 042c48e

Please sign in to comment.