반응형 DOM4 [JS] 가비지 컬렉션 & 메모리 누수 메모리 누수란 무엇인가? 메모리 누수는 어떤 이유에서든 지간에, 운영체제 또는 사용가능한 메모리 풀에서 반환되지 않으면서 동시에 애플리케이션에서 더 이상 필요로 하지 않는 메모리로 정의 될 수 있다. 흔한 자바스크립트 메모리 누수 3가지 1. 의도치 않은 전역 변수 2. 잊혀진 타이머 또는 콜백 3. DOM 외부에서의 참조 메모리 관리는 왜 필요한가? 대부분의 언어에서 메모리 라이프 사이클은 메모리 할당 → 메모리 사용 → 메모리 해제의 단계를 거친다. C같은 low-level 언어의 경우 이 라이프 사이클을 개발자가 malloc()이나 free()를 사용하여 직접 관리를 해주어야 하지만 자바스크립트와 같은 high-level 언어는 대부분 Garbage Collection이라는 자동 메모리 관리를 사용.. 2023. 11. 6. [js] 버블링과 캡처링 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 캡처링 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다. 1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 event.stopPropagation() : 버블링 및 캡처링 중단할 때 사용하는 함수 Ex) 클릭해 주세요. 2023. 10. 28. [JS] DOM : 크기와 좌표 window.innerWidth / innerHeight Viewport(현재 화면)의 크기를 얻음 window.scrollX / scrollY Viewport의 현재 스크롤 위치를 얻음 (페이지 좌상단 기준) E.scrollLeft / E.scrollTop 스크롤 요소의 현재 스크롤 위치를 얻음 (요소의 좌상단 기준) window.el = document.querySelector('.scrollElement') el.scrollLeft // 수평 스크롤 위치 el.scrollTop // 수직 스크롤 위치 window.scrollTo() / 스크롤요소.scrollTo() 지정된 위치로 스크롤 하기 대상.scrollTo(X, Y) // 또는 대상.scrollTo({ left: x좌표, top: y좌표, b.. 2023. 10. 28. [JS] dom DOM이란 무엇인가? DOM은 Document Object Model의 약자입니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다. DOM은 어떻게 생겼을까? DOM을 제대로 이해하기 위해서는 tree라는 자료구조를 이해할 필요가 있습니다. DOM이 tree 형식의 자료구조를 가지고 있기 때문입니다. Javascript에서 DOM의 특정 요소(element)를 찾는 방법 1. getElementById() [HTML] Div1입니다. Div2입니다. [JS] function getDiv1() { const div1 = document.getElementById('div_1'); .. 2023. 10. 28. 이전 1 다음 반응형
