From 3d5a4264eb563b911c408fd228164a4f4c5869af Mon Sep 17 00:00:00 2001 From: taejinchoi-cbnu Date: Fri, 15 May 2026 21:13:55 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[=EB=AC=B8=EC=84=9C]=202=ED=9A=8C=EC=B0=A8?= =?UTF-8?q?=20=EA=B3=BC=EC=A0=9C=20C29=20=EC=B6=A9=EB=8F=8C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../1-deposit-calculator/task.md | 7 - .../3-events-change-input/article.md | 53 ++------ .../01-onload-ondomcontentloaded/article.md | 30 +--- .../02-script-async-defer/article.md | 128 ++++-------------- .../01-popup-windows/article.md | 4 - 4-binary/02-text-decoder/article.md | 15 +- 5-network/01-fetch/article.md | 44 +----- 7 files changed, 46 insertions(+), 235 deletions(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md index d050fcf46..ee2a0282d 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md @@ -14,15 +14,8 @@ importance: 5 공식은 아래와 같습니다. ```js -<<<<<<< HEAD // initial: 계산 전의 잔고 // interest: 이자율. 0.05는 연 5%의 이자율을 의미합니다. // years: 예금 유치 기간으로, 연 단위 -let result = Math.round(initial * (1 + interest * years)); -======= -// initial: the initial money sum -// interest: e.g. 0.05 means 5% per year -// years: how many years to wait let result = Math.round(initial * (1 + interest) ** years); ->>>>>>> upstream/master ``` diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 9020095eb..d8aa02be6 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -58,19 +58,11 @@ `cut`, `copy`, `paste` 이벤트는 각각 값을 잘라내기·복사하기·붙여넣기 할 때 발생합니다. -<<<<<<< HEAD -세 이벤트는 [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) 클래스의 하위 클래스이며 복사하거나 붙여넣기 한 데이터에 접근할 수 있도록 해줍니다. -======= -They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is cut/copied/pasted. ->>>>>>> upstream/master +세 이벤트는 [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) 클래스의 하위 클래스이며 잘라내기·복사하기·붙여넣기 된 데이터에 접근할 수 있도록 해줍니다. `input` 이벤트와는 달리 세 이벤트는 `event.preventDefault()`를 사용해 기본 동작을 막을 수 있습니다. 이렇게 하면 아무것도 복사·붙여넣기 할 수 없습니다. -<<<<<<< HEAD -예를 들어 아래 코드는 잘라내기·복사하기·붙여넣기 동작을 시도하면 모든 동작들이 중단되고 얼럿창을 통해 중단된 이벤트 이름을 보여줍니다. -======= -For instance, the code below prevents all `cut/copy/paste` events and shows the text we're trying to cut/copy/paste: ->>>>>>> upstream/master +예를 들어 아래 코드는 잘라내기·복사하기·붙여넣기 동작을 시도하면 모든 동작이 중단되고 얼럿창을 통해 잘라내기·복사하기·붙여넣기를 시도하는 텍스트를 표시합니다. ```html autorun height=40 run @@ -87,39 +79,30 @@ For instance, the code below prevents all `cut/copy/paste` events and shows the ``` -<<<<<<< HEAD -알아두세요! 텍스트뿐만 아니라 모든 것을 복사·붙여넣기 할 수 있습니다. 예를 들어 OS 파일 매니저에서 파일을 복사해 붙여넣을 수 있습니다. +알아두세요! 잘라내기·복사 이벤트 핸들러 내부에서 `event.clipboardData.getData(...)`를 호출하면 빈 문자열을 반환합니다. 이는 엄밀히 말하면 아직 데이터가 클립보드에 들어가 있지 않기 때문입니다. 또한 `event.preventDefault()`를 사용하면 아예 복사조차 하지 못합니다. -클립보드에서 읽기·쓰기, 파일 등 다양한 데이터 타입에서 작동하는 메서드 목록 [명세서](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer)를 확인할 수 있습니다. +따라서 위 예제는 `document.getSelection()`을 사용하여 선택한 텍스트를 가져옵니다. 문서 선택(document selection)에 대한 자세한 내용은 에서 다룹니다. -다만 클립보드는 '전역' OS 레벨입니다. `onclick` 이벤트 핸들러처럼 대부분의 브라우저는 안전을 위해 특정 사용자 동작의 범위에서만 클립보드의 읽기·쓰기에 대한 접근을 허용합니다. +텍스트뿐만 아니라 모든 것을 복사하기·붙여넣기 할 수 있습니다. 예를 들어 OS 파일 매니저에서 파일을 복사해 붙여넣을 수 있습니다. -또한 Firefox를 제외한 모든 브라우저에서 `dispatchEvent`를 사용하여 '커스텀' 클립보드 이벤트를 생성하는 것을 금지하고 있습니다. -======= -Please note: inside `cut` and `copy` event handlers a call to `event.clipboardData.getData(...)` returns an empty string. That's because technically the data isn't in the clipboard yet. If we use `event.preventDefault()` it won't be copied at all. +이는 `clipboardData`가 드래그 앤 드롭과 복사하기·붙여넣기에 공통으로 사용되는 `DataTransfer` 인터페이스를 구현하기 때문입니다. 이 인터페이스는 현재 논의 범위를 벗어나므로 자세히 다루지는 않지만 관련 메서드는 [DataTransfer 명세서](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface)에서 확인할 수 있습니다. -So the example above uses `document.getSelection()` to get the selected text. You can find more details about document selection in the article . +또한 클립보드에 접근하는 별도의 비동기 API인 `navigator.clipboard`도 있습니다 ([Firefox에서는 지원되지 않습니다](https://caniuse.com/async-clipboard)). 자세한 내용은 [클립보드 API 및 이벤트](https://www.w3.org/TR/clipboard-apis/) 명세서를 참조하면 됩니다. -It's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it. -That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's a bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface). +### 안전 제한 사항 -Also, there's an additional asynchronous API of accessing the clipboard: `navigator.clipboard`. More about it in the specification [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [not supported by Firefox](https://caniuse.com/async-clipboard). +클립보드는 '전역' OS 레벨입니다. 사용자는 여러 애플리케이션을 오가며 다양한 내용을 복사하기·붙여넣기 할 수 있는데 브라우저 페이지가 그 내용을 모두 볼 수 있어서는 안 됩니다. -### Safety restrictions +그래서 대부분의 브라우저는 복사하기·붙여넣기 같은 특정 사용자 동작이 일어나는 범위 안에서만 클립보드 읽기·쓰기에 끊김없이 접근할 수 있도록 허용합니다. -The clipboard is a "global" OS-level thing. A user may switch between various applications, copy/paste different things, and a browser page shouldn't see all that. +Firefox를 제외한 모든 브라우저에서는 `dispatchEvent`로 '사용자 지정(custom)' 클립보드 이벤트를 생성하는 것이 금지하고 있습니다. 그런 이벤트를 보내는(dispatch) 데 성공하더라도 명세에는 이러한 '합성(synthetic)' 이벤트가 클립보드에 접근해서는 안 된다고 명확히 규정합니다. -So most browsers allow seamless read/write access to the clipboard only in the scope of certain user actions, such as copying/pasting etc. +이벤트 핸들러 안에서 `event.clipboardData`를 저장해두었다가 나중에 접근하려고 해도 마찬가지로 동작하지 않습니다. -It's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. And even if we manage to dispatch such event, the specification clearly states that such "synthetic" events must not provide access to the clipboard. +다시 말해 [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata)는 오직 사용자가 직접 발생시킨 이벤트의 핸들러 안에서만 동작합니다. -Even if someone decides to save `event.clipboardData` in an event handler, and then access it later -- it won't work. - -To reiterate, [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) works solely in the context of user-initiated event handlers. - -On the other hand, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard) is the more recent API, meant for use in any context. It asks for user permission, if needed. ->>>>>>> upstream/master +반면 [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard)는 더 최근에 등장한 API로 어떤 콘텍스트에서든 사용할 수 있도록 설계되었습니다. 필요한 경우 사용자에게 권한을 요청합니다. ## 요약 @@ -127,12 +110,6 @@ On the other hand, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h | 이벤트 | 설명 | 특이사항 | |---------|----------|-------------| -<<<<<<< HEAD | `change` | 값이 변경될 때 이벤트 발생 | 텍스트 입력의 경우 포커스를 잃을 때 실행 | | `input` | 텍스트가 입력될 때마다 이벤트 발생 | `change`와 달리 즉시 실행 | -| `cut`, `copy`, `paste` | 잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 | 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. `event.clipboardData` 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음 | -======= -| `change`| A value was changed. | For text inputs triggers on focus loss. | -| `input` | For text inputs on every change. | Triggers immediately unlike `change`. | -| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives access to the clipboard. All browsers except Firefox also support `navigator.clipboard`. | ->>>>>>> upstream/master +| `cut`, `copy`, `paste` | 잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 | 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. `event.clipboardData` 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음 (Firefox를 제외한 모든 브라우저는 `navigator.clipboard` 도 지원) | diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md index 0ac4ac593..477496215 100644 --- a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md +++ b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md @@ -2,15 +2,9 @@ HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다. -<<<<<<< HEAD - `DOMContentLoaded` -- 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(``)이나 스타일시트 등의 기타 자원은 기다리지 않습니다. - `load` -- HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. - `beforeunload/unload` -- 사용자가 페이지를 떠날 때 발생합니다. -======= -- `DOMContentLoaded` -- the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures `` and stylesheets may not yet have loaded. -- `load` -- not only HTML is loaded, but also all the external resources: images, styles etc. -- `beforeunload/unload` -- the user is leaving the page. ->>>>>>> upstream/master 세 이벤트는 다음과 같은 상황에서 활용할 수 있습니다. @@ -39,13 +33,8 @@ document.addEventListener("DOMContentLoaded", ready); function ready() { alert('DOM이 준비되었습니다!'); -<<<<<<< HEAD - // 이미지가 로드되지 않은 상태이기 때문에 사이즈는 0x0입니다. + // 이미지가 로드되지 않은 상태(캐시된 경우가 아니라면)이기 때문에 사이즈는 0x0입니다. alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`); -======= - // image is not yet loaded (unless it was cached), so the size is 0x0 - alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`); ->>>>>>> upstream/master } *!* @@ -56,11 +45,7 @@ document.addEventListener("DOMContentLoaded", ready); ``` -<<<<<<< HEAD 위 예시에서 `DOMContentLoaded` 핸들러는 문서가 로드되었을 때 실행됩니다. 따라서 핸들러 아래쪽에 위치한 ``뿐만 아니라 모든 요소에 접근할 수 있습니다. -======= -In the example, the `DOMContentLoaded` handler runs when the document is loaded, so it can see all the elements, including `` below. ->>>>>>> upstream/master 그렇지만 이미지가 로드되는 것은 기다리지 않기 때문에 `alert` 창엔 이미지 사이즈가 0이라고 뜹니다. @@ -103,11 +88,7 @@ In the example, the `DOMContentLoaded` handler runs when the document is loaded, ```html run ``` @@ -133,13 +114,8 @@ Firefox와 Chrome, Opera의 폼 자동완성(form autofill)은 `DOMContentLoaded ```html run height=200 refresh ` 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춥니다. 이는 `src` 속성이 있는 외부 스크립트 ``를 만났을 때도 마찬가지입니다. 외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있습니다. -======= -When the browser loads HTML and comes across a `` tag, it can't continue building the DOM. It must execute the script right now. The same happens for external scripts ``: the browser must wait for the script to download, execute the downloaded script, and only then can it process the rest of the page. ->>>>>>> upstream/master 이런 브라우저의 동작 방식은 두 가지 중요한 이슈를 만듭니다. @@ -41,11 +37,7 @@ When the browser loads HTML and comes across a `` tag, it ca ## defer -<<<<<<< HEAD -브라우저는 `defer` 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드'에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 `defer` 스크립트 실행은 페이지 구성이 끝날 때까지 *지연* 됩니다. -======= -The `defer` attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads "in the background", and then runs when the DOM is fully built. ->>>>>>> upstream/master +브라우저는 `defer` 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드'에서 다운로드합니다. 따라서 지연 스크립트를 다운로드하는 도중에도 HTML 처리를 계속 진행하며 DOM을 생성합니다. 그리고 defer 스크립트 실행은 DOM 구성이 완료된 뒤 실행됩니다. 위쪽 예시와 동일한 코드인데 스크립트에 `defer`만 붙여보겠습니다. @@ -58,29 +50,16 @@ The `defer` attribute tells the browser not to wait for the script. Instead, the

...스크립트 뒤 콘텐츠...

``` -<<<<<<< HEAD - 지연 스크립트는 페이지 생성을 절대 막지 않습니다. - 지연 스크립트는 DOM이 준비된 후에 실행되긴 하지만 `DOMContentLoaded` 이벤트 발생 전에 실행됩니다. 예시를 통해 직접 살펴봅시다. -======= -In other words: - -- Scripts with `defer` never block the page. -- Scripts with `defer` always execute when the DOM is ready (but before `DOMContentLoaded` event). - -The following example demonstrates the second part: ->>>>>>> upstream/master ```html run height=100

...스크립트 앞 콘텐츠...

@@ -88,40 +67,23 @@ The following example demonstrates the second part:

...스크립트 뒤 콘텐츠...

``` -<<<<<<< HEAD 1. 페이지 콘텐츠는 바로 출력됩니다. 2. `DOMContentLoaded` 이벤트는 지연 스크립트 실행을 기다립니다. 따라서 얼럿창은 DOM 트리가 완성되고 지연 스크립트가 실행된 후에 뜹니다. -지연 스크립트는 일반 스크립트와 마찬가지로 HTML에 추가된 순(상대순, 요소순)으로 실행됩니다. +**지연 스크립트는 일반 스크립트와 마찬가지로 HTML에 추가된 순(상대순, 요소순)으로 실행됩니다.** 따라서 길이가 긴 스크립트가 앞에, 길이가 짧은 스크립트가 뒤에 있어도 짧은 스크립트는 긴 스크립트가 실행될 때까지 기다립니다. -======= -1. The page content shows up immediately. -2. `DOMContentLoaded` event handler waits for the deferred script. It only triggers when the script is downloaded and executed. - -**Deferred scripts keep their relative order, just like regular scripts.** - -Let's say, we have two deferred scripts: the `long.js` and then `small.js`: ->>>>>>> upstream/master ```html ``` -<<<<<<< HEAD -```smart header="작은 스크립트는 먼저 다운되지만, 실행은 나중에 됩니다." -브라우저는 성능을 위해 페이지에 어떤 스크립트들이 있는지 쭉 살펴본 후에야 스크립트를 병렬적으로 다운로드합니다. 위 예시에서도 스크립트 다운로드가 병렬적으로 진행되었습니다. 그런데 이 때 크기가 작은 `small.js`이 `long.js`보다 먼저 다운로드 될 수 있습니다. - -하지만 명세서에서 스크립트를 문서에 추가한 순서대로 실행하라고 정의했기 때문에 `small.js`는 `long.js` 다음에 실행됩니다. -``` -======= -Browsers scan the page for scripts and download them in parallel, to improve performance. So in the example above both scripts download in parallel. The `small.js` probably finishes first. +브라우저는 성능을 위해 페이지에 어떤 스크립트들이 있는지 쭉 살펴본 후에야 스크립트를 병렬적으로 다운로드합니다. 위 예시에서도 스크립트 다운로드가 병렬적으로 진행되었습니다. 그런데 이때 크기가 작은 `small.js`가 `long.js`보다 먼저 다운로드될 수 있습니다. -...But the `defer` attribute, besides telling the browser "not to block", ensures that the relative order is kept. So even though `small.js` loads first, it still waits and runs after `long.js` executes. +하지만 `defer` 속성은 브라우저에 '막지 마'라고 지시하는 것 외에도 상대 순서를 유지합니다. 따라서 `small.js`가 먼저 다운로드 되더라도 `long.js` 다음에 실행됩니다. -That may be important for cases when we need to load a JavaScript library and then a script that depends on it. ->>>>>>> upstream/master +이는 자바스크립트 라이브러리를 로드한 다음 해당 라이브러리에 의존하는 스크립트를 로드해야 하는 경우에 중요할 수 있습니다. ```smart header="`defer` 속성은 외부 스크립트에만 유효합니다." ` ``` -알아두세요! 잘라내기·복사 이벤트 핸들러 내부에서 `event.clipboardData.getData(...)`를 호출하면 빈 문자열을 반환합니다. 이는 엄밀히 말하면 아직 데이터가 클립보드에 들어가 있지 않기 때문입니다. 또한 `event.preventDefault()`를 사용하면 아예 복사조차 하지 못합니다. +알아두세요! 잘라내기·복사하기 이벤트 핸들러 내부에서 `event.clipboardData.getData(...)`를 호출하면 빈 문자열을 반환합니다. 이는 엄밀히 말하면 아직 데이터가 클립보드에 들어가 있지 않기 때문입니다. 또한 `event.preventDefault()`를 사용하면 아예 복사조차 하지 못합니다. 따라서 위 예제는 `document.getSelection()`을 사용하여 선택한 텍스트를 가져옵니다. 문서 선택(document selection)에 대한 자세한 내용은 에서 다룹니다. From 376a194eab63d4f93ab8afbc0b6b3c27386d8d5b Mon Sep 17 00:00:00 2001 From: taejinchoi-cbnu Date: Fri, 15 May 2026 23:26:57 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[=EB=AC=B8=EC=84=9C]=20=EB=A1=9C=EC=BB=AC?= =?UTF-8?q?=20=EC=84=9C=EB=B2=84=20=EC=84=B8=ED=8C=85=20=ED=9B=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-ui/4-forms-controls/3-events-change-input/article.md | 6 ++++-- 2-ui/5-loading/01-onload-ondomcontentloaded/article.md | 2 +- 2-ui/5-loading/02-script-async-defer/article.md | 5 ++--- 5-network/01-fetch/article.md | 4 ++-- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index a6f67e679..3d8b936f2 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -79,7 +79,9 @@ ``` -알아두세요! 잘라내기·복사하기 이벤트 핸들러 내부에서 `event.clipboardData.getData(...)`를 호출하면 빈 문자열을 반환합니다. 이는 엄밀히 말하면 아직 데이터가 클립보드에 들어가 있지 않기 때문입니다. 또한 `event.preventDefault()`를 사용하면 아예 복사조차 하지 못합니다. +(붙여넣기는 얼럿창에 나오지만 잘라내기·복사하기는 '-'로 보입니다 - 옮긴이) + +알아두세요! 잘라내기·복사하기 이벤트 핸들러 내부에서 `event.clipboardData.getData(...)`를 호출하면 빈 문자열을 반환합니다. 엄밀히 말하면 아직 데이터가 클립보드에 들어가 있지 않기 때문입니다. 또한 `event.preventDefault()`를 사용하면 아예 복사조차 하지 못합니다. 따라서 위 예제는 `document.getSelection()`을 사용하여 선택한 텍스트를 가져옵니다. 문서 선택(document selection)에 대한 자세한 내용은 에서 다룹니다. @@ -112,4 +114,4 @@ Firefox를 제외한 모든 브라우저에서는 `dispatchEvent`로 '사용자 |---------|----------|-------------| | `change` | 값이 변경될 때 이벤트 발생 | 텍스트 입력의 경우 포커스를 잃을 때 실행 | | `input` | 텍스트가 입력될 때마다 이벤트 발생 | `change`와 달리 즉시 실행 | -| `cut`, `copy`, `paste` | 잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 | 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. `event.clipboardData` 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음 (Firefox를 제외한 모든 브라우저는 `navigator.clipboard` 도 지원) | +| `cut`, `copy`, `paste` | 잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 | 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. \ `event.clipboardData` 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음 \ (Firefox를 제외한 모든 브라우저는 `navigator.clipboard` 도 지원) | diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md index 477496215..63229d0ee 100644 --- a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md +++ b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md @@ -33,7 +33,7 @@ document.addEventListener("DOMContentLoaded", ready); function ready() { alert('DOM이 준비되었습니다!'); - // 이미지가 로드되지 않은 상태(캐시된 경우가 아니라면)이기 때문에 사이즈는 0x0입니다. + // 이미지가 아직 로드되지 않았기 때문에(캐시된 경우 제외) 크기는 0x0입니다. alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`); } diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index 0dc4c9d37..d23b95f79 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -101,8 +101,7 @@ - 페이지 구성이 끝난 후에 async 스크립트 다운로딩이 끝난 경우, `DOMContentLoaded`는 async 스크립트 실행 전에 발생할 수 있습니다, - async 스크립트가 짧아서 페이지 구성이 끝나기 전에 다운로드 되거나 스크립트가 HTTP 캐시 처리 된 경우, `DOMContentLoaded`는 `async` 스크립트 실행 후에 발생할 수도 있습니다. - -In other words, `async` scripts load in the background and run when ready. The DOM and other scripts don't wait for them, and they don't wait for anything. A fully independent script that runs when loaded. As simple, as it can get, right? +다시 말해 비동기 스크립트는 백그라운드에서 로드되어 준비가 되면 실행됩니다. DOM이나 다른 스크립트는 비동기 스크립트를 기다리지 않으며 비동기 스크립트 또한 그 어떤 것도 기다리지 않습니다. 로드되는 즉시 실행되는 완전히 독립적인 스크립트인 셈입니다. 간단하죠? defer 스크립트를 사용했을 때와 비슷한 예시를 살펴봅시다. `long.js`와 `small.js` 스크립트가 있고, `defer` 대신 `async`를 사용했습니다. @@ -161,7 +160,7 @@ document.body.append(script); // (*) 아래 예시에선 `loadScript(src)` 함수는 스크립트를 추가하고 `async`를 `false`로 설정합니다. -So `long.js` always runs first (as it's added first): +따라서 `long.js`는 (가장 먼저 추가되었기 때문에) 항상 먼저 실행됩니다. ```js run function loadScript(src) { diff --git a/5-network/01-fetch/article.md b/5-network/01-fetch/article.md index 925d782f3..bc42a749d 100644 --- a/5-network/01-fetch/article.md +++ b/5-network/01-fetch/article.md @@ -61,8 +61,8 @@ if (response.ok) { // HTTP 상태 코드가 200~299일 경우 `response` 에는 프라미스를 기반으로 하는 다양한 메서드가 있습니다. 이 메서드들을 사용하면 다양한 형태의 응답 본문을 처리할 수 있습니다. -- **`response.text()`** -- 응답을 읽고 텍스트를 반환합니다, -- **`response.json()`** -- 응답을 JSON 형태로 파싱합니다, +- **`response.text()`** -- 응답을 읽고 텍스트를 반환합니다. +- **`response.json()`** -- 응답을 JSON 형태로 파싱합니다. - **`response.formData()`** -- 응답을 `FormData` 객체 형태로 반환합니다. `FormData`에 대한 자세한 내용은 [다음 챕터](info:formdata)에서 다루겠습니다. - **`response.blob()`** -- 응답을 [Blob](info:blob)(타입이 있는 바이너리 데이터) 형태로 반환합니다. - **`response.arrayBuffer()`** -- 응답을 [ArrayBuffer](info:arraybuffer-binary-arrays)(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환합니다.