패밀리 서비스
goormEDU
로그인회원가입
전체
루트공지사항Q&A

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"에서 다운로드 받을 수 있습니다.

교육 과정
모두 펼치기
  • 01
    0. 강좌 소개
    1개 (05:48)
    • 1. 강좌 범위, 강좌 수강 대상, 강좌 접근
    05:48
  • 02
    1. Event 개요
    2개 (30:18)
    • 1. Event 4대 요소
    14:29
    2. 이벤트 리스너, 핸들러
    15:49
  • 03
    2. HTMLElement 인터페이스
    8개 (01:15:58)
    • 1. HTMLElement 인터페이스 형태
    11:27
    2. metadata attributes
    10:34
    3. user interaction-1
    08:25
    4. user interaction-2, click()
    08:38
    5. HTMLOrSVGElement 인터페이스: focus(), blur()
    13:10
    6. HTMLOrSVGElement 인터페이스 프로퍼티
    10:45
    7. DOMStringMap 인터페이스
    05:30
    8. ElementContentEditable 인터페이스, enterKeyHint 프로퍼티
    07:29
  • 04
    3. HTMLxxxElement 인터페이스
    8개 (01:11:27)
    • 1. HTMLxxxElement 인터페이스: 개요, 스펙 형태, 강좌 범위
    05:39
    2. Document metadata-1: HTML 스펙의 목차 형태, HTMLTitleElement
    06:57
    3. Document metadata-2: HTMLLinkElement, HTMLMetaElement
    09:54
    4. Sections: HTMLBodyElement, HTMLHeadingElement
    08:27
    5. Text-level semantics: HTMLAnchorElement, HTMLHyperlinkElementUtils
    05:58
    6. Embedded content-1: HTMLImageElement, decode()
    12:30
    7. Embedded content-2: HTMLIFrameElement, HTMLEmbedElement
    10:10
    8. Interactive elements, Scripting: HTMLDialogElement, HTMLScriptElement
    11:52
  • 05
    4. Tabular data
    4개 (42:21)
    • 1. HTMLTableElement 프로퍼티: HTMLTableElement
    09:16
    2. HTMLTableElement 메소드: caption 엘리먼트, thead 엘리먼트, tfoot 엘리먼트
    09:07
    3. HTMLTableSectionElement: tbody 엘리먼트, HTMLTableSectionElement
    11:10
    4. HTMLTableRowElement, HTMLTableCellElement
    12:48
  • 06
    5. Forms: 1
    8개 (01:19:13)
    • 1. HTMLFormElement: reset()
    10:05
    2. HTMLFormControlsCollection, RadioNodeList
    11:09
    3. SubmitEvent 인터페이스, form 전송 플로우
    08:15
    4. submit(), requestSubmit()
    08:59
    5. checkValidity(), reportValidity()
    09:27
    6. FormDataEvent 인터페이스
    07:40
    7. FormData 인터페이스
    10:01
    8. FormData 인터페이스 메소드
    13:37
  • 07
    6. Forms: 2
    8개 (01:15:17)
    • 1. HTMLLabelElement
    03:39
    2. HTMLInputElement-1:
    09:00
    3. HTMLInputElement-2
    07:45
    4. HTMLInputElement-3: FileList, File 인터페이스, value 속성값 조정
    08:08
    5. text control selection: setSelectionRange()
    07:10
    6. text control selection: setRangeText()
    09:08
    7. constraint validation, setCustomValidity()
    13:00
    8. ValidityState 인터페이스
    17:27
  • 08
    7. Forms-3
    7개 (01:21:08)
    • 1. HTMLTextAreaElement, HTMLOutputElement, HTMLButtonElement
    15:31
    2. HTMLFieldSetElement, HTMLProgressElement
    11:53
    3. HTMLDataListElement, HTMLMeterElement, HTMLLegendElement
    06:05
    4. HTMLSelectElement-1
    13:07
    5. HTMLSelectElement-2
    12:44
    6. HTMLOptionElement
    09:52
    7. HTMLOptionsCollection
    11:56
  • 09
    8. Event 개념, 범위
    5개 (51:41)
    • 1. Event 관련 스펙: DOM 스펙, HTML 스펙, UI Events 스펙
    10:46
    2. EventTarget 인터페이스, addEventListener()
    12:16
    3. 이벤트를 발생시키는 목적
    08:12
    4. Event Flow: Capture
    11:03
    5. Event Flow: Bubbling
    09:24
  • 10
    9. Event 인터페이스
    5개 (57:30)
    • 1. target, currentTarget 프로퍼티
    11:35
    2. 이벤트 전파 방지: stopPropagation(), stopImmediatePropagation(), bubbles 프로퍼티
    13:53
    3. Default Action: preventDefault(), defaultPrevented, cancelable
    13:45
    4. isTrusted, timeStamp
    07:31
    5. 이벤트 리스너 옵션, 삭제: addEventListener(), removeEventListener()
    10:46
  • 11
    10. Synthetic Event
    3개 (36:54)
    • 1. Event 오브젝트 생성: 이벤트 발생 형태, new Event(), dispatchEvent()
    15:19
    2. CustomEvent 인터페이스, new CustomEvent()
    08:09
    3. EventTarget 인터페이스 상속, 이벤트와 bind()
    13:26
  • 12
    11. UI Events
    4개 (34:44)
    • 1. UIEvent 인터페이스: 개요, Activation triggers, behavior, UI Events 인터페이스 상속
    08:47
    2. UI Event Types: select type
    08:47
    3. FocusEvent 인터페이스: focus, focusin 이벤트, blur, focusout 이벤트
    08:49
    4. Focus Event 발생 순서, target과 relatedTarget
    08:21
  • 13
    12. Mouse Event
    8개 (01:17:31)
    • 1. MouseEvent 인터페이스-1: screenX, screenY, clientX, clientY
    08:53
    2. Mouse Event 타입-1: mousedown, mouseup, mousemove 이벤트
    06:43
    3. Mouse Event 타입-2: mouseover, mouseenter, mouseout, mouseleave 이벤트
    10:52
    4. Mouse Event 발생 순서, relatedTarget 프로퍼티
    12:11
    5. Mouse Event 타입-3: click, dblclick, contextmenu, auxclick 이벤트, detail 프로퍼티
    10:30
    6. MouseEvent 인터페이스-2: button, buttons 프로퍼티
    10:26
    7. getModifierState(), scroll 이벤트 타입
    08:40
    8. Wheel Event: 개요, Delta 개념, wheel 이벤트
    09:16
  • 14
    13. Keyboard, Input, Composition Event
    5개 (47:57)
    • 1. KeyboardEvent 인터페이스-1: Keyboard Event Types, key, code, location 프로퍼티
    09:51
    2. KeyboardEvent 인터페이스-2: ctrlKey, shiftKey, altKey, metaKey, repeat 프로퍼티
    09:30
    3. InputEvent 인터페이스-1: Input Event 개요, data, inputType 프로퍼티
    11:56
    4. Input Event Types: beforeinput, input 이벤트
    06:23
    5. CompositionEvent 인터페이스: 개요, Composition 이벤트, 이벤트 발생 순서
    10:17
  • 15
    14. HTML Event
    7개 (01:06:58)
    • 1. HTML Event 개요: HTML 이벤트, HTML 이벤트 인터페이스 구성
    06:08
    2. 이벤트 핸들러
    12:57
    3. GlobalEventHandlers 인터페이스-1: abort, error 이벤트, AbortController 인터페이스
    13:32
    4. GlobalEventHandlers 인터페이스-2: close, cancel, change 이벤트
    09:09
    5. GlobalEventHandlers 인터페이스-3: toggle, invalid, reset 이벤트
    08:38
    6. DOMContentLoaded 이벤트
    07:48
    7. load, readystatechange 이벤트
    08:46
  • 16
    15. Window 오브젝트: Page Lifecycle
    7개 (48:51)
    • 1. Page Lifecycle 상태와 이벤트 개요, unload Event
    05:51
    2. Back-Forward cache
    07:18
    3. beforeunload 이벤트
    07:12
    4. visibilitychange 이벤트, HTML Document
    08:19
    5. pageshow 이벤트
    05:46
    6. pagehide 이벤트
    07:55
    7. PageTransitionEvent 인터페이스
    06:30
  • 17
    16. Window 오브젝트 Event
    6개 (48:28)
    • 1. beforeprint, afterprint 이벤트
    05:14
    2. popstate Event
    09:04
    3. hashchange, languagechange, online, offline 이벤트
    10:32
    4. unhandledrejection, rejectionhandled 이벤트
    09:44
    5. message, messageerror 이벤트
    07:35
    6. storage 이벤트
    06:19
  • 18
    17. Clipboard API and events
    7개 (01:01:49)
    • 1. 개요, DocumentAndElementEventHandlers 인터페이스: copy, cut, paste 이벤트
    10:23
    2. ClipboardEvent, DataTransfer, DataTransferItemList 인터페이스
    08:53
    3. DataTransferItem, DataTransferItemList 인터페이스
    10:21
    4. Clipboard Event 오버라이딩: copy, cut, paste 이벤트, 복사/잘라내기/첨부 방지
    09:31
    5. Clipboard 인터페이스-1: clipboard 프로퍼티, readText(), writeText()
    07:24
    6. Clipboard 인터페이스-2: read(), write()
    06:57
    7. ClipboardItem 인터페이스: constructor(), types, getType()
    08:20
  • 19
    18. Drag and Drop
    5개 (50:24)
    • 1. 개요, DragEvent 인터페이스, draggable 속성
    08:33
    2. Drag and Drop 이벤트-1: dragstart, drop 이벤트
    09:50
    3. Drag and Drop 이벤트-2: drag, dragenter, dragover, dragleave, dragend 이벤트
    07:25
    4. DataTransfer 인터페이스, setDragImage()
    10:53
    5. DataTransferItemList, DataTransferItem 인터페이스, document 오브젝트 사용
    13:43
  • 20
    19. Mutation Observer
    5개 (52:46)
    • 1. 개요, MutationObserver 인터페이스-1: constructor(), observe(), childList, subtre
    11:32
    2. MutationObserver 인터페이스-2: observe(), attributes, characterData
    13:21
    3. MutationObserver 인터페이스-3: disconnect(), takeRecords()
    09:11
    4. MutationRecord 인터페이스-1: MutationObserver callback, MutationRecord 프로퍼티
    09:33
    5. MutationRecord 인터페이스: MutationRecord 노드 프로퍼티
    09:09
  • 21
    20. Web Components: Custom Element
    6개 (48:00)
    • 1. 개요, Custom Element, Shadow DOM, 캡슐화, Template Element
    07:18
    2. Custom Element: customElements 프로퍼티, define()
    07:20
    3. Customized built-in element , Custom 엘리먼트 생성
    07:03
    4. Custom element reactions-1: connected, disconnected
    07:54
    5. Custom element reactions-2: adoptedCallback(), attributeChangedCallback()
    08:50
    6. CustomElementRegistry 인터페이스: get(), whenDefined()
    09:35
  • 22
    21. Shadow DOM
    6개 (58:08)
    • 1. Shadow Root 생성: attachShadow()
    13:36
    2. ShadowRoot 인터페이스-1: {mode: "open"}, {mode: "closed"}, host 프로퍼티
    09:49
    3. CSS Style 적용 범위, <link> 작성
    08:02
    4. ElementInternals 인터페이스-1: attachInternals(), shadowRoot 프로퍼티, form 프로퍼티
    07:50
    5. ElementInternals 인터페이스-2: setFormValue()
    08:14
    6. ShadowRoot 인터페이스-2: attachShadow(), delegatesFocus, getRootNode()
    10:37
  • 23
    22. Template
    6개 (58:20)
    • 1. HTMLTemplateElement 인터페이스, content 프로퍼티, Template 사용 형태
    12:09
    2. HTMLSlotElement 인터페이스-1, name 프로퍼티
    09:03
    3. Slottable 인터페이스, template과 slot 엘리먼트, slot, assignedSlot 프로퍼티
    10:38
    4. WebComponents 이벤트-1: slotchange 이벤트
    07:47
    5. WebComponents 이벤트-2: composed 프로퍼티, composedPath()
    07:37
    6. HTMLSlotElement 인터페이스-2: assignedNodes(), assignedElements(), assign()
    11:06
마지막 업데이트|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
난이도
보통
수강기간
평생 무제한