탄탄한 기본기!

0. 개요 DOM 요소에 이벤트를 바인딩해주고 이를 해제해주는 과정에서, 문득 이벤트 리스너들이(메모리가) 잘 해제되는지 궁금해 개발자 도구를 열어 performance 탭의 memory 부분에 있는 리스너 개수를 확인해보았다. 그런데 removeEventListener를 호출할 때, 리스너 개수가 줄어드는 것이 아닌 오히려 증가했다가, 나중에 GC에 의해 리스너가 사라지는 것을 확인하고 이 부분을 조금 더 확인해보며 그 내용을 정리했다. 1. HTMLElement.prototype.removeEventListener 개념 보통 DOM요소에 이벤트 핸들러를 바인딩해서 다양한 이벤트를 캐치한다. 하지만 메모리 누수 방지를 위해서 불필요할 경우 (컴포넌트가 unMount 되는 등) 이를 해제해주어야 한다. ..

DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 1. 노드 Hello 위와 같은 HTML요소는 div 요소 노드를 생성하는데, 이때 어트리뷰트는(class, id 등) 어트리뷰트 노드로, 텍스트 콘텐츠의 경우에는 텍스트 노드로 따로 구분된다. 참고로 HTML의 태그들 사이의 개행이나 공백들은 텍스트 노드가 된다. HTML 문서는 이러한 요소들의 집합으로 이루어지며, 중첩 관계를 통해 트리 구조로 구성된다. 1.1 노드의 종류 노드의 타입은 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드로 나눌 수 있다. 문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로서 doc..