Javascript18 [Javascript] EventTarget, Node, Element, HTMLElement 간단 정리 📢 들어가며웹 개발을 하다 보면 브라우저가 제공하는 다양한 DOM 관련 클래스를 보게 된다. 그중에서도 EventTarget, Node, Element, HTMLElement는 가장 기본이자 자주 등장하는 네 가지로, DOM 구조와 이벤트 동작을 이해하는 데 핵심적인 역할을 한다. 🎈 EventTarget이름에서도 알 수 있듯이, 모든 이벤트 발생 대상이 구현하는 기본 인터페이스이다.이벤트를 등록하는 데 자주 쓰이는 Element뿐 아니라 AudioContext 같은 비 DOM 객체도 EventTarget을 상속한다. 주요 메서드addEventListener()removeEventListener()dispatchEvent()Element가 EventTarget을 상속하고 있기 때문에 아래와 같이 이.. 2025. 8. 8. [Javascript] setInterval과 requestAnimationFrame 📢 들어가며requestAnimationFrame(이하 rAF)이 등장하기 전에는 setInterval을 활용해 애니메이션을 구현했다.하지만 rAF이 등장고나서부터는 부드러운 애니메이션을 구현하기 위해 rAF를 주로 사용하게 되었다. 어떤 차이가 존재하는지 알아보자. 🎤 호출 타이밍두 함수 모두 특정 트리거에 따라 호출될 함수를 예약한다. setInterval은 지정된 시간 간격마다 타이머 이벤트가 트리거되어 반복적으로 콜백을 호출한다. rAF는 브라우저의 VSync 신호를 트리거로 하여 다음 리페인트 시점에 맞춰 콜백을 한 번 실행한다. 예를 들어, 아래와 같이 간격을 설정하면 1초에 약 60번 호출되어 60프레임의 애니메이션을 표현할 수 있다.setInterval(() => {}, 1000 / .. 2025. 8. 3. [Javascript] 값이란 무엇인가? 값에 대해 더 알아보기 📢 들어가며값은 자바스크립트에서 가장 많이 사용되는 요소 중 하나이다. 그렇기 때문에 값의 정의와 사용방법을 분명히 이해해야만 올바르게 활용할 수 있다.기본 문법에 대한 설명은 포함되어 있지 않습니다. 🖥 값과 표현식 값은 표현식이 평가된 결과로 자바스크립트에서 지원하는 8가 타입 중 하나에 속하는 데이터라고 할 수 있다. 그렇다면 표현식은 무엇일까? 표현식은 자바스크립트 소스에서 문법적으로 완결된 코드 단위로, 평가되면 단 하나의 값을 산출한다.쉽게 말해 표현식으로 작성 된 코드를 실행했을 때 오류 없이 동작하고, 실행의 결과가 값을 만드는 코드라고 할 수 있다.즉, 값을 만들지 못하는 코드는 표현식이 아니다. 표현식에는 무엇이 있는가?대표적으로 다음과 같은 표현식이 존재한다. 이외에도 다양.. 2025. 8. 2. [Javascript - 성능] 리플로우 줄이기 - 3 (requestAnimationFrame - 2) 🔗 이전 내용DOM 렌더링 방식에 따른 성능 비교해보기 - 1DOM 렌더링 방식에 따른 성능 비교해보기 - 2리플로우 줄이기 - 1리플로우 줄이기 - 2 (requestAnimationFrame - 1) 📢 들어가며requestAnimationFrame(이하 rAF)을 활용해서 리플로우를 줄이는 방법에 대해서 알아보자. 본래 목적은 애니메이션을 부드럽게 만드는 것에 있다. 하지만 이 타이밍을 활용하면 불필요한 레이아웃 계산을 줄이고, 백그라운드 탭에서 자동으로 멈추는 등 결과적으로 성능을 높일 수 있다. DOM 읽기/쓰기 작업 분리이전 포스트에서 확인했듯, 쓰기 직후 곧바로 레이아웃 값을 읽으면 강제 리플로우 가 일어난다.그래서 이를 방지하기 위해 쓰기 작업과 읽기 작업은 분리해서 강제 리플로우를.. 2025. 7. 27. [Javascript - 성능] 리플로우 줄이기 - 2 (requestAnimationFrame - 1) 🔗 이전 내용DOM 렌더링 방식에 따른 성능 비교해보기 - 1DOM 렌더링 방식에 따른 성능 비교해보기 - 2리플로우 줄이기 - 1 📢 들어가며이전 포스트에서는 offsetWidth 등과 같은 Dom의 레이아웃 정보를 조회를 효율적으로 함으로써 리플로우를 줄이는 방법에 대해서 알아보았다. 이번 포스트에서는 requestAnimationFrame을 사용해서 리플로우를 줄이는 방법에 대해서 알아보자. 🛒 requestAnimationFramerequestAnimationFrame(이하 rAF)은 리플로우 바로 전에 콜백 함수를 호출하도록 예약하는 API다. 아래 이미지 처럼 새로운 프레임을 만들기 위한 렌더 사이클이 시작되면, rAF의 콜백 함수가 호출된 후 리플로우가 발생하고 최종적으로 화면에 출.. 2025. 7. 26. [Javascript - 성능] 리플로우 줄이기 - 1 🔗 이전 내용DOM 렌더링 방식에 따른 성능 비교해보기 - 1DOM 렌더링 방식에 따른 성능 비교해보기 - 2 📢 들어가며지난 포스트에서의 내용은 다음과 같다.DOM 트리에 새로운 요소를 추가하는 것은 강제 리플로우가 되지 않는다.일반적으로 요소의 좌표 또는 사이즈에 대한 READ 작업 시 강제 리플로우가 발생한다. 🎨 수정 / 삭제 시 강제 리플로우가 발생하는가?기존 요소를 수정하거나 삭제 시에는 강제 리플로우가 발생하는지를 알아보자. 아래는 간단하게 div 요소 하나만 존재한다. 해당 div의 사이즈와 위치를 변경하는 코드를 추가하였다.이때, 브라우저가 HTML을 처음 파싱할 때 div 수정 코드까지 한 번에 처리하여 레이아웃을 계산하므로, 실행을 1초 후로 지연시켰다. 노란 부분의 .. 2025. 7. 20. 이전 1 2 3 다음
