DOM, Event 관련 기초 지식
이번 포스팅에서는 Javascript에서 웹 개발을 할 때 필수적으로 알아야 할 기초 지식을 질답 방식으로 간단하게 정리해 보았습니다.
1. 버블링이란? / 캡처링이란? / 둘의 차이 및 사용법
버블링은 특정 요소에서 이벤트가 발생했을 때 상위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다.
캡처링은 버블링과 반대 방향인 상위 요소에서 하위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다.
버블링은 하위 요소에서 이벤트를 등록하면 상위까지 이벤트가 전파되는 기본 속성을 통해 사용할 수 있고,
캡처링은 addEventListener에서 capture: true라는 옵션을 부여해 사용할 수 있습니다.
stopPropogation: 위와 같은 이벤트 전파를 막는 web API(주의: stopPropogation을 사용하면 해당 영역이 dead zone이 되므로 확실한 상황이 아니면 사용하지 않는 것이 좋습니다)
버블링일 때, 클릭한 요소 외에 상위 요소에 전파 방지
캡처링일 때, 클릭한 요소 외에 하위 요소에 전파 방지
preventDefault: 태그의 고유 동작을 중단시키는 API (ex. a 태그의 페이지 이동)
2. 이벤트 루프의 정의 / 동작 방식
이벤트 루프는 자바스크립트에서 비동기 방식으로 동시성을 지원하는 이벤트의 동작 방식이라고 할 수 있습니다.
콜스택 → Web API → 콜백 큐 → 이벤트 루프
① JS 엔진의 콜스택에 코드로 실행한 함수가 담기고 실행 후 삭제됩니다.
② 비동기 함수가 콜스택에서 실행되면 Web API에 넣어져 타이머가 실행됩니다.
③ 타이머가 완료되면 콜백 큐로 넣어집니다.
④ 이벤트 루프가 콜백 큐의 값을 콜스택에 넣고, 콜스택이 이를 실행시킵니다.
3. 브라우저의 렌더링 방식
① DOM 트리 구축을 위해 HTML 파서가 코드를 파싱합니다.
② script 태그를 만나면 JS 엔진이 DOM 트리를 구축합니다.
③ DOM 트리와 스타일 규칙이 만나 어테치먼트되고, 랜더 트리를 구축합니다.
③ 구축한 랜더 트리를 화면의 정확한 위치에 배치하고 그립니다.
4. 브라우저의 호환성 이슈 + 해결 경험
브라우저마다 레이아웃 엔진과 JS 엔진이 달라서 지원하는 기능과 범위가 차이가 있어 발생하게 됩니다.
프로젝트를 진행하면서 Infinity Scroll 기능을 구현하기 위해 Intersection Observer를 사용한 경험이 있는데, IE에서는 해당 API를 지원하지 않았습니다. 이를 해결하기 위해 IE를 지원하는 라이브러리를 설치해 모듈을 따로 불러와 사용한 경험이 있습니다.
5. 이벤트 위임 구현 방법 / 장단점
Event Delegation이란 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식을 말합니다.
이벤트 위임은 다수의 하위 요소에 이벤트를 등록해야 할 때 이벤트를 상위에 등록하여 이벤트를 위임시킬 수 있습니다.
예로, 리스트 각각에 이벤트를 걸어 주려고 할 때 상위 태그인 ul 태그에 이벤트를 등록하면 하위 태그인 li 태그에도 이벤트가 등록되는 것입니다.
장점은, 하위 요소의 개수가 변한다고 하더라도 이벤트가 등록된 것이 유지된다는 것입니다.
단점은, 이벤트가 focus와 같이 버블링되지 않는 이벤트라면 이벤트 위임을 사용할 수 없습니다.
6. 무한 슬라이딩 UI 구현방법
슬라이드의 인덱스가 최소값/최대값일 때 인덱스를 최대값/최소값으로 변경시킵니다.
또, 슬라이드 이동 이벤트가 반복적으로 일어났을 때의 에러를 방지하기 위해 move 애니메이션이 끝나기 전까지 이동하지 못하도록 boolean 값을 사용해 관리합니다. transitionend를 사용하면 애니메이션이 끝나는 것을 감지할 수 있습니다.
7. Virtual DOM이란?
Virtual DOM은 UI의 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는 프로그래밍 개념입니다.
Virtual DOM을 사용하면 실제 DOM은 렌더링되지 않기 때문에 연산 비용이 적어집니다. Virtual DOM이 모든 변화를 한 번에 연산해 실제 DOM으로 주기 때문입니다.
Virtual DOM을 쓰는 이유는 빠르기가 특출나기 때문이 아니라 DOM fragment 관리를 자동화하고 추상화할 수 있는 장점이 있기 때문입니다.
8. DOCTYPE이 하는 일
document type을 얘기하며, document type definition인 DTD와 연관되어 있습니다.
XHTML 문서 상단에 doctype을 선언하지 않으면 자동으로 브라우저마다 다르게 해석하는 호환 모드로 바뀌게 되므로 꼭 선언을 해야 합니다.
HTML5에서는 <!DOCTYPE html>라고 선언합니다.