#dom
노트 14개
Frontend › JavaScript
마우스·포인터·키보드 이벤트사용자 입력 장치가 만드는 DOM 이벤트. 클릭 한 번이 만드는 mousedown·mouseup·click 순서, button과 보조키(Ctrl·Cmd), mouseover·mouseout과 mouseenter·mouseleave의 차이와 relatedTarget, 마우스·터치·펜을 한 코드로 받는 포인터 이벤트(pointerId·pointercancel·touch-action·포인터 캡처·포인터 락), HTML 드래그 앤 드롭 API와 직접 만드는 드래그, key와 code·자동 반복·IME 조합을 다루는 키보드 이벤트를 정리한다.
Frontend › JavaScript
요소 크기·스크롤·좌표JavaScript로 요소와 창의 크기·스크롤·위치를 읽고 바꾸는 법. offset·client·scroll 계열 기하 속성이 각각 무엇을 재는지, CSS width 대신 기하 속성을 읽는 이유, 창 크기와 문서 높이, scrollTo·scrollIntoView와 스크롤 막기, 창 기준(clientX·getBoundingClientRect)과 문서 기준(pageX) 좌표, elementFromPoint를 정리한다.
Frontend › JavaScript
폼 컨트롤과 포커스 이벤트JavaScript로 폼을 다루는 DOM API. document.forms와 form.elements로 컨트롤 찾기(라디오 묶음, fieldset, form.name 단축 표기의 함정), value·checked·select의 옵션 다루기, focus·blur와 버블링하는 focusin·focusout, change·input·beforeinput·클립보드 이벤트의 차이, 폼 submit 이벤트를 듣는 이유를 정리한다. 제출 동작 자체는 폼 제출 노트에 있다.
Frontend › JavaScript
DOM 이벤트: 전파, 위임, 커스텀 이벤트DOM 이벤트는 캡처 → 타깃 → 버블 순서로 트리를 오간다. 핸들러를 붙이는 세 방법(HTML 속성·on 속성·addEventListener)과 handleEvent 객체, target과 currentTarget의 차이, 전파·기본 동작 제어와 stopPropagation 대신 defaultPrevented로 알리기, 부모 하나로 자식 이벤트를 받는 이벤트 위임과 data 속성 행동 패턴, once·passive·signal 옵션, Event·CustomEvent 생성과 dispatchEvent의 동기 실행, 바깥 클릭 감지 패턴을 정리한다.
Frontend › JavaScript
DOM 조작JavaScript로 DOM 요소를 선택·탐색하고(live·static 컬렉션, 표 탐색 속성), 노드의 내용(innerHTML+=의 함정, outerHTML 대입, textContent)을 다루고, 속성(property)과 어트리뷰트(attribute)의 동기화 규칙, 클래스와 인라인 스타일·계산된 스타일을 읽고 쓰고, 요소를 만들어 원하는 위치에 넣고 지우는 방법. 문자열 HTML을 넣는 법과 위험, 리플로우를 줄이는 일괄 삽입까지 다룬다.
Frontend › JavaScript
MutationObserverDOM 트리의 변화(자식 추가·삭제, 속성, 텍스트)를 지켜보다 모아서 알려 주는 MutationObserver. observe 옵션(childList·subtree·attributes·characterData·attributeFilter·oldValue), MutationRecord의 내용, 서드파티 스크립트가 넣는 DOM에 반응하기와 동적으로 들어온 콘텐츠를 한곳에서 처리하는 쓰임, takeRecords·disconnect, 마이크로태스크로 전달되는 특성과 무한 루프 주의, 폐기된 뮤테이션 이벤트를 정리한다.
Frontend › JavaScript
Selection과 Range문서의 일부를 가리키는 Range(시작·끝 경계점)와 사용자의 현재 선택을 나타내는 Selection(anchor·focus). Range를 만들고 내용 지우기·복제·감싸기, 선택 읽기와 바꾸기, selectionchange 이벤트, input·textarea 전용 선택 API(selectionStart·setSelectionRange·setRangeText)로 커서 위치 다루기, 선택 막기, DOM을 바꾸지 않고 칠하는 CSS Custom Highlight API를 정리한다.
Frontend › React
포털: createPortal로 다른 DOM에 그리기createPortal(children, domNode)은 컴포넌트 트리의 위치는 그대로 두고 DOM만 다른 곳(보통 document.body)에 그린다. 모달·툴팁·토스트가 부모의 overflow·z-index에 갇히지 않게 할 때 쓰며, 이벤트 버블링과 Context는 DOM이 아니라 React 트리를 따른다.
Frontend
Web브라우저가 문서를 해석하고 서버와 상태를 주고받는 웹의 기본 구조.
Frontend › Web
브라우저 렌더링 과정브라우저의 구성 요소와, HTML을 DOM으로·CSS를 CSSOM으로 파싱해 렌더 트리로 레이아웃(리플로우)·페인팅·합성을 거쳐 화면을 그리는 과정. HTML 파서의 특성, 스크립트·스타일 시트의 차단, 더티 비트와 강제 동기 레이아웃, 변경마다 다시 도는 단계까지.
Frontend › Web
웹 컴포넌트: template·slot·Shadow DOM라이브러리 없이 재사용 가능한 요소를 만드는 웹 표준. <template>은 렌더링되지 않는 HTML 조각, 커스텀 요소는 HTMLElement를 상속한 클래스와 라이프사이클 콜백, Shadow DOM은 마크업과 스타일을 캡슐화하는 별도 트리, <slot>은 바깥 내용을 끼울 자리다. :host·::slotted()·::part()·커스텀 속성으로 경계를 넘어 꾸미고, 이벤트는 리타게팅되며 composed 이벤트만 밖으로 나간다. 선언적 Shadow DOM으로 서버에서 그린다.
Frontend › Web
포커스 속성과 details·dialogHTML만으로 포커스를 다루는 속성(tabindex·contenteditable·autofocus·disabled·inert)과 JavaScript 없이 동작하는 두 인터랙티브 요소를 요소 사전처럼 정리한다. 포커스를 빼는 세 방법의 차이, <details>/<summary>의 open·name·마커·오류 처리, <dialog>의 show·showModal·close, method="dialog"와 returnValue, ::backdrop, 열고 닫을 때의 포커스, commandfor로 스크립트 없이 여는 법까지 다룬다.
Frontend › Web
DOM과 BOM브라우저가 HTML 문서를 파싱해 메모리에 올린 객체 트리와, 이를 다루는 API. window의 두 역할과 DOM·CSSOM·HTML 명세의 구분, 공백·주석까지 노드가 되는 규칙과 파서의 자동 교정, 노드 클래스 계층과 확인 방법, 문자열 HTML 대신 DOM이 필요해진 이유와 프레임워크 시대에 DOM API를 익히는 법도 다룬다.
Frontend › Web
Intersection Observer와 관찰자 API스크롤 이벤트로 위치를 계산하는 대신, 요소가 화면(또는 스크롤 영역)에 얼마나 보이는지 브라우저가 알려 주는 IntersectionObserver. root·rootMargin·threshold 옵션, 무한 스크롤·지연 로딩·끝까지 읽음 감지 패턴, 크기 변화를 보는 ResizeObserver와 DOM 변화를 보는 MutationObserver를 정리한다.