Thumbnail
깜짝 할인 중
개발 · 프로그래밍 프론트엔드

DOM 인터랙션 대시보드

234명이 수강하고 있어요.

30%

53,900원

77,000원
지식공유자: 김영보
총 131개 수업 (21시간 3분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

DOM은 동적 애플리케이션의 필수이며 바탕입니다. Element, Document, Window 오브젝트에서 발생하는, 발생시키는 모든 이벤트를 기본부터 활용까지 다룹니다. Web Component(Custom Element, Shadow DOM, Template)을 완전하게 배울 수 있으며 활용할 수 있습니다. 개설된 "DOM 완전 끝내기: 기본" 강좌와 더불어 DOM의 마침표를 찍을 수 있습니다.

✍️
이런 걸
배워요!
Element, Document, Window의 모든 이벤트
Web Components: Custom Element, Shadow DOM, <template>
Clip Board, Drag & Drop, Mutation Observer

DOM + Web Component 
근본을 달리해야 흐름이 보입니다. 

동적 애플리케이션을 위한 
DOM의 마침표.

사용자 중심의 동적 애플리케이션을 구현하려면 사용자의 행동을 인식해야 합니다. Element, Document, Window 오브젝트에서 발생하거나 발생시키는 모든 DOM 이벤트로 이를 할 수 있습니다.

웹 컴포넌트를 완전하게 배워야 할 이유?

Web Component는 HTML, CSS, DOM 그리고 자바스크립트를 조합한 컴포넌트 개발의 바탕입니다. 이 흐름을 제대로 알아야 동적 애플리케이션 개발의 사고를 넓힐 수 있습니다.

깊고 넓으면서 자세하게 다루기 위해, 3개 강의로 분리하여 다룹니다.

  • 첫 번째 강의 "DOM 기본"은 DOM 기본과 Window 오브젝트를 다룹니다.
  • 본 강의는 두 번째 강의로 "DOM 인터랙션"입니다.
  • 세 번째 강의는 "DOM: CSSOM"으로 CSS 중심의 DOM 처리를 다룹니다.

특정한 프레임워크/라이브러리에 의존하지 않는 근본 기술 꿰뚫기

프레임워크, 라이브러리를 사용하고 있지만 근본 기술에 목말라 있지는 않았나요? 여러분이 바닐라 코딩으로 동적 웹 프로그램을 온전하게 개발할 수 있다면, 라이브러리/프레임워크를 모르더라도 배우는 데 그다지 시간이 걸리지 않습니다. 강의에서 배우는 내용 역시 이러한 라이브러리/프레임워크의 바탕이 됩니다.

DOM을 더욱 쉽고, 완전하게 배울 수 있습니다. 동적 웹 애플리케이션을 개발하려는 개발자, 이벤트의 모든 것을 알고 싶은 개발자이신가요? 이 강의로 근본부터 달라지는 경험을 해보시길 바랍니다.

지난 DOM 강의 (추천 선수 과정)


DOM을 온전하게 배우는
가장 깊고 정확한 길.

DOM 스펙의 95% 이상을 다룹니다. DOM의 마침표를 찍을 수 있습니다.
넓고(Wide), 깊으며(Deep), 자세(Detail)합니다. 시간, 비용, 노력을 허비하지 않습니다.

강의를 개발할 때마다 항상 요구사항에 대한 구현 방법을 고민하게 됩니다. 구현 방법을 결정하려면 우선 지원하는 것(메소드, 프로퍼티 등)을 알아야 합니다.

이전 "자바스크립트 완전 끝내기" 시리즈도 그렇지만, 이번 강의 역시 DOM 인터랙션 스펙의 95% 이상을 다룹니다. 지난 "DOM 완전 끝내기: 기본" 강의도 마찬가지입니다. 이렇게 내용을 완전하게 다루려면 실력과 경험이 있는 강의자가 시간을 많이 들여 강의를 만들어야 합니다. 하지만 이는 강의자의 사정이고, 학습자는 전체를 볼 수 있어야 합니다.

"DOM 완전 끝내기" 강의 2편을 만드는 데 1년 넘게 걸렸습니다. 70% 정도만 다뤘다면 훨씬 더 짧은 시간 안에 강의를 만들 수 있었을 것입니다. 그렇지만 이렇게 되면 강의자 입장에서만 편할 뿐, 학습자는 나머지 30%를 채우기 위한 노력에 많은 시간을 쏟아야 합니다. 문제는, 이 30%에 해당하는 게 무엇인지 모른다는 사실입니다.

학습자 여러분이 DOM의 전체를 보고, 동적 애플리케이션의 사고를 넓힐 수 있도록 95%라는 원칙을 고수하며 오랜 시간 준비한 강의라고 자신합니다.

체크 리스트를 
제공합니다.

인터페이스의 프로퍼티와 메소드를 빠뜨리지 않기 위해, 아래 이미지처럼 인터페이스의 프로퍼티와 메소드를 체크 리스트 형태로 만들었습니다.

이 리스트는 PDF 파일로 제공합니다. 섹션 [HTMLElement 인터페이스] 첫 번째 수업에서 자료를 내려받아 확인하실 수 있습니다.

프로퍼티, 메소드 강의순서 매치 리스트

강의 전체가 
완전한 하나의 
시나리오입니다.

시리즈 전체가 하나의 시나리오입니다. 기능을 외우는 게 아니라 전체의 감을 잡는 형태입니다. 순서대로 하나씩 따라오시면 자연스럽게 전체를 배울 수 있습니다. 내용이 중복되지 않으므로 이에 따른 노력, 시간, 비용을 허비하지 않습니다. 강의를 따라가면 자연스럽게 숲, 나무, 가지, 꽃을 두루 보며 기본의 깊이를 튼튼하게 다질 수 있습니다.

개설된 4개의 자바스크립트 강의와 함께 웹 개발의 기반이 되는 기반 기술을 완전하게 마침표를 찍을 수 있습니다. 이벤트, 프로퍼티, 메소드 하나를 깊고 넓게 다루지만, 더불어 이것이 실행되는 앞뒤의 코드를 시나리오로 만들어 다룹니다. 

40년 이상의 
경험에서 나옵니다.

40년 넘게 소프트웨어를 개발해 온 경험, 시간이 지나야 비로소 느낄 수 있는 감각적인 것, 동물적 감각이 된 것을 강의에 담았습니다.

진짜 실력을 
키울 수 있습니다.

DOM 강의는 HTML, CSS, DOM, 자바스크립트가 연결된 형태입니다. 때문에 이벤트, 프로퍼티, 메소드 하나를 설명하려면 10~30라인의 코드를 작성해야 합니다. 그런데 라이브로 코딩하면 시간은 오래 걸리고 학습자는 기다려야 합니다.

이런 문제를 방지하기 위해 사전에 코딩된 코드를 제시하고 설명합니다. 그 이후에는 여러분이 직접 코딩을 완료해야 전체를 볼 수 있고 흐름을 파악할 수 있습니다. 웹 프로그램을 개발할 때 강의 코드를 개발 환경에 맞춰 적용할 수 있도록 실력이 향상됩니다. 강의에서는 앞뒤 기본 코드를 제공하므로 이를 활용해 부분적인 코드를 완성할 수 있을 것입니다.

💾 실습 환경 및 학습 자료

  • 최신 브라우저에서 강의의 코드를 그대로 실행할 수 있습니다. 강의는 Windows 환경, Google Chrome 브라우저 100 버전에서 제작되었습니다.
  • 강의 자료로 인터페이스, 프로퍼티, 메소드 리스트 PDF 파일을 제공합니다. 섹션 2의 첫 번째 수업에서 다운로드받을 수 있습니다.

Q&A 💬

Q. "DOM 완전 끝내기: 기본" 강의가 있던데 그 강의를 먼저 들어야 하나요?

듣지 않아도 수강할 수 있습니다만, 이 강의에서는 DOM 기본 개념을 다루지 않으므로 듣는 것을 권장합니다. 강의를 완전하게 이해하지 못하거나 내용이 연결되지 않을 수도 있습니다. 스펙에 작성된 용어를 사용하므로 일반적으로 알려진 용어와 다른 것도 있을 수 있습니다.

Q. 강의를 듣기 전에 알아야 할 내용이 있나요?

HTML, 자바스크립트 기본은 아셔야 합니다. CSS는 다루지 않으므로 모르셔도 됩니다.

Q. DOM을 처음 접하는 비기너인데 수강이 가능할까요?

DOM에서 사용하는 용어, 개념이 있습니다. 이를 "DOM 완전 끝내기: 기본"에서 다루고 있으니 그 강의를 먼저 들으시기 바랍니다.

Q. DOM을 배우면 프레임워크/라이브러리를 사용하지 않고 웹 프로그램을 개발할 수 있나요?

HTML, CSS, 자바스크립트를 알면 개발할 수 있습니다.


함께 들으면 좋은 
연관 강의를 확인해보세요.

김영보자바스크립트 시리즈

자바스크립트 로드맵 바로가기 (40% 할인)

김영보DOM 시리즈

DOM 로드맵 바로가기 (40% 할인)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
동적 웹 애플리케이션을 배우려는 개발자
이벤트의 모든 것을 배우려는 개발자
사용자 중심의 UI/UX를 구현하려는 개발자
📚
선수 지식,
필요할까요?
자바스크립트 개발자
DOM 기본

안녕하세요
김영보 입니다.
김영보의 썸네일

40년 넘게 소프트웨어를 개발했으며, 지금도 개발하고 있습니다. 
23년 넘게 JavaScript 중심으로 개발했습니다.

동영상: 10개
자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(ES6+) 기본, 모던 자바스크립트(ES6+) 심화
DOM 기본, DOM 인터랙션
React 비기너, React 완전 끝내기
요구분석 구현 방법
자바스크립트 머신러닝 TensorFlow.js

저서: 9권
몰입! 자바스크립트, ECMAScript 6, HTML5, DOM 스크립팅
자바스크립트 정규표현식, 요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js JavaScript, Ajax 활용, prototype.js 완전분석  
9권 중에서 8권은 국내 최초 저자입니다.
특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.

 

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