본문 바로가기
728x90
반응형

자바스크립트25

[JS] 타이머 - 호출 스케줄링, 타이머 함수, 디바운스와 스로틀 🎶 자바스크립트에서 타이머의 개념에 대해 살펴보도록 하겠다.1. 호출 스케줄링함수를 명시적으로 호출하면 함수가 즉시 실행되는데, 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용해야 한다. 이를 바로 '호출 스케줄링'이라고 한다.참고로, 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에, 두 가지 이상의 태스크를 동시에 실행할 수 없다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하기 때문에 타이머 함수는 비동기 처리 방식으로 동작한다. 2. 타이머 함수(1) setTimeout / clearTimeoutsetTimeout 함수는 두 번째 인수로 전달받은 시간(1/1000초)으로 단 한 번 동작하는 타이머를 생성한다. 이후.. 2025. 2. 25.
[JS] 이벤트 - 이벤트 핸들러 제거 방법과 이벤트 객체 🎶 자바스크립트에서 사용하는 이벤트 핸들러를 제거하는 방법과, 이벤트 객체에 대해서 알아보자.1. 이벤트 핸들러 제거addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener 메서드를 사용한다. Click 주의할 점은, addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다는 점이다.$button.addEventListener('click', ()=>console.log('button click'));따라서, 위와 같이 무명 함수를 이벤트 핸들러로 등록한 경우 removeEventListener 메서.. 2025. 2. 19.
[JS] 어트리뷰트 - HTML 어트리뷰트와 DOM 프로퍼티 🎶 자바스크립트에서 어트리뷰트의 개념과 HTML 어트리뷰트, DOM 프로퍼티, 그리고 어트리뷰트를 조작하는 방법에 대해 알아보자. 1. 어트리뷰트HTML 문서의 구성 요소인 HTML 요소는 여러 개의 어트리뷰트(attribute)를 가질 수 있다. HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름 = "어트리뷰트 값" 형식으로 정의한다. HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결된다. 이때 HTML 어트리뷰트당 하나의 어트리뷰트 노드가 생성된다.  2. 어트리뷰트 조작모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소.. 2025. 2. 17.
[JS] 이벤트 - 이벤트 타입과 이벤트 핸들러 등록 🎶 자바스크립트에서 이벤트에 대해 알아보자.브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트(event)를 발생(trigger)시킨다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.const $button = document.querySelector('button');$button.onclick = () => {alert('button click');};이벤트와 그에 대응하는 함수를 통해 사용자와 애플리케이션은 상호작용을 할 수 있다. 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍 이라고 한.. 2025. 2. 15.
[JS] 노드 생성, 추가, 삽입, 복사, 교체, 삭제 🎶 이번 포스트에서는 자바스크립트에서 DOM에 노드를 직접 생성, 추가, 삽입, 복사, 교체, 삭제하는 방법에 대해 알아보도록 하겠다. 1. 노드 생성 및 추가 b  DOM은 노드를 직접 생성/삽입/삭제/치환하는 메서드를 제공하는데, 그 종류로는 다음과 같은 것들이 있다.Document.prototype.createElement(tageName) : 요소 노드를 생성하여 반환Document.prototype.createTextNode(text) : 텍스트 노드를 생성하여 반환Node.prototype.appendChild(childNode) : childNode에게 인수로 전달한 노드를 appendChild 메서드를 호출한 노드의 마지.. 2025. 2. 13.
[JS] DOM 조작 - innerHTML과 insertAdjacentHTML 메서드 🎶 DOM 조작은 새로운 노드를 생성해 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다. DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하는 원인이 되므로 성능에 영향을 준다. (🎃리플로우와 리페인트란, DOM 요소가 변경됐을 때 이 변화를 적용시켜 다시 리렌더링 하는 작업을 뜻한다.) (1) innerHTML Hello guy  Element.prototype.getElementById 프로퍼티는 setter과 getter 모두 존재하는 접근자 프로퍼티로서, 요소 노드의 HTML 마크업을 취득하거나 변경한다. innerHTML 프로퍼티는 HTML 마크업이 포함된 문자열을 그대로 반환한다. H.. 2025. 2. 11.
728x90
반응형

티스토리툴바