[문서] 2회차 과제 C29 충돌 해결

Author: taejinchoi-cbnu

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
 ```

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
 <input type="text" id="input">
@@ -87,52 +79,37 @@ For instance, the code below prevents all `cut/copy/paste` events and shows the
 </script>
 ```
 
-<<<<<<< HEAD
-알아두세요! 텍스트뿐만 아니라 모든 것을 복사·붙여넣기 할 수 있습니다. 예를 들어 OS 파일 매니저에서 파일을 복사해 붙여넣을 수 있습니다.
+알아두세요! 잘라내기·복사 이벤트 핸들러 내부에서 `event.clipboardData.getData(...)`를 호출하면 빈 문자열을 반환합니다. 이는 엄밀히 말하면 아직 데이터가 클립보드에 들어가 있지 않기 때문입니다. 또한 `event.preventDefault()`를 사용하면 아예 복사조차 하지 못합니다.
 
-클립보드에서 읽기·쓰기, 파일 등 다양한 데이터 타입에서 작동하는 메서드 목록 [명세서](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer)를 확인할 수 있습니다.
+따라서 위 예제는 `document.getSelection()`을 사용하여 선택한 텍스트를 가져옵니다. 문서 선택(document selection)에 대한 자세한 내용은 <info:selection-range>에서 다룹니다.
 
-다만 클립보드는 '전역' 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 <info:selection-range>.
+또한 클립보드에 접근하는 별도의 비동기 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로 어떤 콘텍스트에서든 사용할 수 있도록 설계되었습니다. 필요한 경우 사용자에게 권한을 요청합니다.
 
 ## 요약
 
 데이터가 변경될 때 실행되는 다양한 이벤트를 정리해봅시다.
 
 | 이벤트 | 설명 | 특이사항 |
 |---------|----------|-------------|
-<<<<<<< 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` 도 지원) |

2-ui/5-loading/01-onload-ondomcontentloaded/article.md

@@ -2,15 +2,9 @@
 
 HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다.
 
-<<<<<<< HEAD
 - `DOMContentLoaded` -- 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(`<img>`)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
 - `load` -- HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
 - `beforeunload/unload` -- 사용자가 페이지를 떠날 때 발생합니다.
-=======
-- `DOMContentLoaded` -- the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures `<img>` 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);
 <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
 ```
 
-<<<<<<< HEAD
 위 예시에서 `DOMContentLoaded` 핸들러는 문서가 로드되었을 때 실행됩니다. 따라서 핸들러 아래쪽에 위치한 `<img>`뿐만 아니라 모든 요소에 접근할 수 있습니다.
-=======
-In the example, the `DOMContentLoaded` handler runs when the document is loaded, so it can see all the elements, including `<img>` below.
->>>>>>> upstream/master
 
 그렇지만 이미지가 로드되는 것은 기다리지 않기 때문에 `alert` 창엔 이미지 사이즈가 0이라고 뜹니다. 
 
@@ -103,11 +88,7 @@ In the example, the `DOMContentLoaded` handler runs when the document is loaded,
 ```html run
 <link type="text/css" rel="stylesheet" href="style.css">
 <script>
-<<<<<<< HEAD
   // 이 스크립트는 위 스타일시트가 로드될 때까지 실행되지 않습니다.
-=======
-  // the script doesn't execute until the stylesheet is loaded
->>>>>>> upstream/master
   alert(getComputedStyle(document.body).marginTop);
 </script>
 ```
@@ -133,13 +114,8 @@ Firefox와 Chrome, Opera의 폼 자동완성(form autofill)은 `DOMContentLoaded
 
 ```html run height=200 refresh
 <script>
-<<<<<<< HEAD
   window.onload = function() { // window.addEventListener('load', (event) => {와 동일합니다.
     alert('페이지 전체가 로드되었습니다.');
-=======
-  window.onload = function() { // can also use window.addEventListener('load', (event) => {
-    alert('Page loaded');
->>>>>>> upstream/master
 
     // 이번엔 이미지가 제대로 불러와 진 후에 얼럿창이 실행됩니다.
     alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`);
@@ -253,11 +229,7 @@ window.addEventListener("beforeunload", (event) => {
 function work() { /*...*/ }
 
 if (document.readyState == 'loading') {
-<<<<<<< HEAD
   // 아직 로딩 중이므로 이벤트를 기다립니다.
-=======
-  // still loading, wait for the event
->>>>>>> upstream/master
   document.addEventListener('DOMContentLoaded', work);
 } else {
   // DOM이 완성되었습니다!