DOM 인터랙션
DOM은 동적 웹 애플리케이션 개발의 필수입니다.
클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
리액트, 자바스크립트, 타입스크립트, HTML, vue, DOM
수료증
발급 가능
추천 학습대상
- 동적 웹 애플리케이션을 개발하려는 개발자
- 이벤트의 모든 것을 알고 싶은 개발자
- 프레임워크, 라이브러리는 사용하고 있지만 근본 기술을 갈구하는 개발자
- 이벤트의 모든 것을 알고 싶은 개발자
- 프레임워크, 라이브러리는 사용하고 있지만 근본 기술을 갈구하는 개발자
DOM 이란?
DOM은 동적 애플리케이션의 필수이며 바탕입니다.
Element, Document, Window 오브젝트에서 발생하는, 발생시키는 모든 이벤트를 기본부터 활용까지 다룹니다.
Web Component(Custom Element, Shadow DOM, Template)을 완전하게 배울 수 있으며 활용할 수 있습니다.
개설된 "DOM 완전 끝내기: 기본" 강좌와 더불어 DOM의 마침표를 찍을 수 있습니다.
해당 강좌로 배울 수 있는 것
DOM은 기능도 중요하지만, 감각을 만드는 것이 더 중요합니다.
감각을 만들기 위해서는 코딩도 중요하지만 넓이와 깊이를 느껴야 합니다.
다양한 코드 형태를 다루며, 감각이 만들어 지도록 넓고 깊으면서 자세하게 설명합니다.
자바스크립트와 DOM을 활용한 코드도 같이 다룹니다. 자바스크립트 실력도 향상시킬 수 있습니다.
웹의 기반 기술은 HTML, CSS, DOM, JavaScript입니다.
트렌드 기술은 시간이 지나면 바뀌거나 없어지기도 하지만, 기반 기술은 없어지지 않으며 기술이 축적됩니다.
처음부터 깊고 넓으면서 자세하게 배울 필요가 있습니다.
개설된 4개의 자바스크립트 끝내기 강좌와 함께 웹 개발의 바탕이 되는 기반 기술을 완전하게 마침표를 찍을 수 있습니다.
강의 주된 내용
Element, Document, Window의 모든 이벤트를 배웁니다.
* Web Components : Custom Element, Shadow DOM, <template>
Clip Board, Drag & Drop, Mutation Observer
DOM의 프로퍼티와 메소드는 모든 언어에서 사용하며 기능도 같습니다. 다만, 구현하는 형태가 다릅니다.
자바스크립트 언어로 강좌를 진행하지만, DOM 개념 / 기능 파악이 목적이라면 다른 언어의 개발자도 수강할 수 있습니다.
강좌를 통해 DOM의 숲, 나무, 가지, 꽃을 보았다는 개발자에게 가장 중요한 자신감을 갖게 됩니다.
웹 애플리케이션의 구상, 생각, 접근이 달라집니다.
강의 주제
사용자 중심의 동적 애플리케이션을 구현하려면, 사용자의 행동을 인식해야 하며, DOM 이벤트로 할 수 있습니다.
Element, Document, Window 오브젝트에서 발생하는, 발생시키는 모든 이벤트를 기본부터 활용까지 다룹니다.
Web Component는 HTML, CSS, DOM, 자바스크립트를 조합한 컴포넌트 개발의 바탕입니다.
Custom Element, Shadow DOM, Template을 완전하게 배울 수 있으며 활용할 수 있습니다.
개설된 "DOM 완전 끝내기" 강좌와 더불어 DOM의 마침표를 찍을 수 있습니다.
강의 특징
1. DOM 관련 스펙의 95% 이상을 다룹니다. 이 강의 하나로 끝낼 수 있습니다.
누락되지 않도록 체크 리스트를 작성하여 체크했습니다.
체크 리스트를 정리하여 인터페이스, 프로퍼티, 메소드 리스트를 만들었으며 PDF 파일로 제공합니다.
2. 강좌 전체가 하나의 시나리오입니다.
배우는 순서를 갖고 있으므로 하나씩 따라오시면 자연스럽게 전체를 배울 수 있습니다.
내용이 중복되지 않으므로 이에 따른 노력, 시간, 비용을 허비하지 않습니다.
3. 넓고(Wide), 깊으며(Deep), 자세(Detail)합니다.
강의를 따라 가면 자연스럽게 숲, 나무, 가지 꽃을 볼 수 있습니다.
경력이 많아질수록 요구되는 것이 기본의 깊이입니다.
기본의 깊이를 튼튼하게 다질 수 있습니다.
깊고 넓으면서 자세하게 다루기 위해, 3개 강좌로 분리하여 다룹니다.
첫 번째 강좌인 "DOM 완전 끝내기: 기본"은 DOM 기본과 Window 오브젝트를 다룹니다.
본 강좌는 두 번째 강좌로 "DOM 완전 끝내기: DOM 인터랙션"입니다.
세 번째 강좌는 "DOM 완전 끝내기: CSS DOM"으로 CSS 중심의 DOM 처리를 다룹니다. 2023년 상반기 오픈 예정입니다.
4. 시나리오 형태의 강의입니다.
이벤트, 프로퍼티, 메소드 하나를 깊고 넓게 다루지만, 더불어 이것이 실행되는 앞뒤의 코드를 시나리오로 만들어 다룹니다.
기능을 외우는 것이 아니라 시나리오로 전체의 감을 잡는 형태입니다.
이를 통해 전체를 볼 수 있으며 깊고 넓으면서 자세하게 느낄 수 있습니다.
5. 라이브 코딩을 하지 않습니다.
DOM 강의는 HTML, CSS, DOM, 자바스크립트가 연결된 형태이므로
이벤트, 프로퍼티, 메소드 하나를 설명하려면 10라인~30라인의 코드를 작성해야 합니다.
그런데 라이브로 코딩하면 시간이 많이 걸리며 수강자는 기다려야 합니다.
코딩을 완료해야 전체를 볼 수 있으며 흘러가는 흐름을 파악할 수 있습니다.
이를 방지하기 위해 사전에 코딩된 코드를 제시하고 설명합니다.
제공하는 학습 자료
인터페이스, 프로퍼티, 메소드 리스트를 PDF 파일로 제공하며
"섹션 2의 수업 0"에서 다운로드 받을 수 있습니다.
교육 과정
모두 펼치기
- 010. 강좌 소개
- 021. Event 개요
- 032. HTMLElement 인터페이스
- 043. HTMLxxxElement 인터페이스
- 054. Tabular data
- 065. Forms: 1
- 076. Forms: 2
- 087. Forms-3
- 098. Event 개념, 범위
- 109. Event 인터페이스
- 1110. Synthetic Event
- 1211. UI Events
- 1312. Mouse Event
- 1413. Keyboard, Input, Composition Event
- 1514. HTML Event
- 1615. Window 오브젝트: Page Lifecycle
- 1716. Window 오브젝트 Event
- 1817. Clipboard API and events
- 1918. Drag and Drop
- 2019. Mutation Observer
- 2120. Web Components: Custom Element
- 2221. Shadow DOM
- 2322. Template
1. 강좌 범위, 강좌 수강 대상, 강좌 접근
1. Event 4대 요소
2. 이벤트 리스너, 핸들러
1. HTMLElement 인터페이스 형태
2. metadata attributes
3. user interaction-1
4. user interaction-2, click()
5. HTMLOrSVGElement 인터페이스: focus(), blur()
6. HTMLOrSVGElement 인터페이스 프로퍼티
7. DOMStringMap 인터페이스
8. ElementContentEditable 인터페이스, enterKeyHint 프로퍼티
1. HTMLxxxElement 인터페이스: 개요, 스펙 형태, 강좌 범위
2. Document metadata-1: HTML 스펙의 목차 형태, HTMLTitleElement
3. Document metadata-2: HTMLLinkElement, HTMLMetaElement
4. Sections: HTMLBodyElement, HTMLHeadingElement
5. Text-level semantics: HTMLAnchorElement, HTMLHyperlinkElementUtils
6. Embedded content-1: HTMLImageElement, decode()
7. Embedded content-2: HTMLIFrameElement, HTMLEmbedElement
8. Interactive elements, Scripting: HTMLDialogElement, HTMLScriptElement
1. HTMLTableElement 프로퍼티: HTMLTableElement
2. HTMLTableElement 메소드: caption 엘리먼트, thead 엘리먼트, tfoot 엘리먼트
3. HTMLTableSectionElement: tbody 엘리먼트, HTMLTableSectionElement
4. HTMLTableRowElement, HTMLTableCellElement
1. HTMLFormElement: reset()
2. HTMLFormControlsCollection, RadioNodeList
3. SubmitEvent 인터페이스, form 전송 플로우
4. submit(), requestSubmit()
5. checkValidity(), reportValidity()
6. FormDataEvent 인터페이스
7. FormData 인터페이스
8. FormData 인터페이스 메소드
1. HTMLLabelElement
2. HTMLInputElement-1:
3. HTMLInputElement-2
4. HTMLInputElement-3: FileList, File 인터페이스, value 속성값 조정
5. text control selection: setSelectionRange()
6. text control selection: setRangeText()
7. constraint validation, setCustomValidity()
8. ValidityState 인터페이스
1. HTMLTextAreaElement, HTMLOutputElement, HTMLButtonElement
2. HTMLFieldSetElement, HTMLProgressElement
3. HTMLDataListElement, HTMLMeterElement, HTMLLegendElement
4. HTMLSelectElement-1
5. HTMLSelectElement-2
6. HTMLOptionElement
7. HTMLOptionsCollection
1. Event 관련 스펙: DOM 스펙, HTML 스펙, UI Events 스펙
2. EventTarget 인터페이스, addEventListener()
3. 이벤트를 발생시키는 목적
4. Event Flow: Capture
5. Event Flow: Bubbling
1. target, currentTarget 프로퍼티
2. 이벤트 전파 방지: stopPropagation(), stopImmediatePropagation(), bubbles 프로퍼티
3. Default Action: preventDefault(), defaultPrevented, cancelable
4. isTrusted, timeStamp
5. 이벤트 리스너 옵션, 삭제: addEventListener(), removeEventListener()
1. Event 오브젝트 생성: 이벤트 발생 형태, new Event(), dispatchEvent()
2. CustomEvent 인터페이스, new CustomEvent()
3. EventTarget 인터페이스 상속, 이벤트와 bind()
1. UIEvent 인터페이스: 개요, Activation triggers, behavior, UI Events 인터페이스 상속
2. UI Event Types: select type
3. FocusEvent 인터페이스: focus, focusin 이벤트, blur, focusout 이벤트
4. Focus Event 발생 순서, target과 relatedTarget
1. MouseEvent 인터페이스-1: screenX, screenY, clientX, clientY
2. Mouse Event 타입-1: mousedown, mouseup, mousemove 이벤트
3. Mouse Event 타입-2: mouseover, mouseenter, mouseout, mouseleave 이벤트
4. Mouse Event 발생 순서, relatedTarget 프로퍼티
5. Mouse Event 타입-3: click, dblclick, contextmenu, auxclick 이벤트, detail 프로퍼티
6. MouseEvent 인터페이스-2: button, buttons 프로퍼티
7. getModifierState(), scroll 이벤트 타입
8. Wheel Event: 개요, Delta 개념, wheel 이벤트
1. KeyboardEvent 인터페이스-1: Keyboard Event Types, key, code, location 프로퍼티
2. KeyboardEvent 인터페이스-2: ctrlKey, shiftKey, altKey, metaKey, repeat 프로퍼티
3. InputEvent 인터페이스-1: Input Event 개요, data, inputType 프로퍼티
4. Input Event Types: beforeinput, input 이벤트
5. CompositionEvent 인터페이스: 개요, Composition 이벤트, 이벤트 발생 순서
1. HTML Event 개요: HTML 이벤트, HTML 이벤트 인터페이스 구성
2. 이벤트 핸들러
3. GlobalEventHandlers 인터페이스-1: abort, error 이벤트, AbortController 인터페이스
4. GlobalEventHandlers 인터페이스-2: close, cancel, change 이벤트
5. GlobalEventHandlers 인터페이스-3: toggle, invalid, reset 이벤트
6. DOMContentLoaded 이벤트
7. load, readystatechange 이벤트
1. Page Lifecycle 상태와 이벤트 개요, unload Event
2. Back-Forward cache
3. beforeunload 이벤트
4. visibilitychange 이벤트, HTML Document
5. pageshow 이벤트
6. pagehide 이벤트
7. PageTransitionEvent 인터페이스
1. beforeprint, afterprint 이벤트
2. popstate Event
3. hashchange, languagechange, online, offline 이벤트
4. unhandledrejection, rejectionhandled 이벤트
5. message, messageerror 이벤트
6. storage 이벤트
1. 개요, DocumentAndElementEventHandlers 인터페이스: copy, cut, paste 이벤트
2. ClipboardEvent, DataTransfer, DataTransferItemList 인터페이스
3. DataTransferItem, DataTransferItemList 인터페이스
4. Clipboard Event 오버라이딩: copy, cut, paste 이벤트, 복사/잘라내기/첨부 방지
5. Clipboard 인터페이스-1: clipboard 프로퍼티, readText(), writeText()
6. Clipboard 인터페이스-2: read(), write()
7. ClipboardItem 인터페이스: constructor(), types, getType()
1. 개요, DragEvent 인터페이스, draggable 속성
2. Drag and Drop 이벤트-1: dragstart, drop 이벤트
3. Drag and Drop 이벤트-2: drag, dragenter, dragover, dragleave, dragend 이벤트
4. DataTransfer 인터페이스, setDragImage()
5. DataTransferItemList, DataTransferItem 인터페이스, document 오브젝트 사용
1. 개요, MutationObserver 인터페이스-1: constructor(), observe(), childList, subtre
2. MutationObserver 인터페이스-2: observe(), attributes, characterData
3. MutationObserver 인터페이스-3: disconnect(), takeRecords()
4. MutationRecord 인터페이스-1: MutationObserver callback, MutationRecord 프로퍼티
5. MutationRecord 인터페이스: MutationRecord 노드 프로퍼티
1. 개요, Custom Element, Shadow DOM, 캡슐화, Template Element
2. Custom Element: customElements 프로퍼티, define()
3. Customized built-in element , Custom 엘리먼트 생성
4. Custom element reactions-1: connected, disconnected
5. Custom element reactions-2: adoptedCallback(), attributeChangedCallback()
6. CustomElementRegistry 인터페이스: get(), whenDefined()
1. Shadow Root 생성: attachShadow()
2. ShadowRoot 인터페이스-1: {mode: "open"}, {mode: "closed"}, host 프로퍼티
3. CSS Style 적용 범위, <link> 작성
4. ElementInternals 인터페이스-1: attachInternals(), shadowRoot 프로퍼티, form 프로퍼티
5. ElementInternals 인터페이스-2: setFormValue()
6. ShadowRoot 인터페이스-2: attachShadow(), delegatesFocus, getRootNode()
1. HTMLTemplateElement 인터페이스, content 프로퍼티, Template 사용 형태
2. HTMLSlotElement 인터페이스-1, name 프로퍼티
3. Slottable 인터페이스, template과 slot 엘리먼트, slot, assignedSlot 프로퍼티
4. WebComponents 이벤트-1: slotchange 이벤트
5. WebComponents 이벤트-2: composed 프로퍼티, composedPath()
6. HTMLSlotElement 인터페이스-2: assignedNodes(), assignedElements(), assign()
마지막 업데이트|2023년 01월 02일
강의자 소개
40년 넘게 소프트웨어를 개발했으며 지금도 개발하고 있습니다.
그 중에서 20년 넘게 JavaScript 중심으로 개발했습니다.
저서:
몰입! 자바스크립트, ECMAScript 6, 자바스크립트 정규표현식
HTML5, DOM 스크립팅, Ajax 활용, prototype.js 완전분석
요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js JavaScript
9권 중에서 8권이 국내 저자 최초입니다. 특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.
강좌 후기
￦
77,000
평균평점
0.0
난이도
보통
수강기간
평생 무제한