이벤트 캡처링 (Event Capturing) 이벤트가 부모 요소에서 자식 요소로 전파되는 방식이다.한 요소에서 이벤트가 발생하면, 이벤트는 최상위 부모 요소에서 시작하여 이벤트가 발생한 요소로 전파되는 방식이다. See the Pen 이벤트 캡처링 by 이준구 (@vbtyldjh-the-selector) on CodePen.    이벤트 버블링 (Event Bubbling):이벤트가 자식 요소에서 부모 요소로 전파되는 방식이다.한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. See the Pen 이벤트 버블링 by 이준구 (@vbty..

1️⃣ DOM이란?DOM은 "Document Object Model"의 약어로 HTML 문서를 파싱 하여, 객체 형태의 트리 구조를 말한다.API 종류: `document`, `addEventListener` 등 존재 여기서 왜..? HTML 문서를 객체로 표현했는지? 그 이유는 자바스크립트와의 원활한 상호작용을 위해서다. 자바스크립트는 정적인 웹 애플리케이션을 동적으로 조작하는 역할을 담당하며, 객체 지향 프로그래밍을 지원하는 언어이다. 따라서 자바스크립트와의 상호작용을 위해서는 HTML을 객체 형태로 구성하는 것이 필요하다.    요약: DOM은 HTML 문서의 구조를 객체로 표현해 자바스크립트와 상호작용하여 동적인 웹 페이지를 구성하는 것을 말한다.    2️⃣ BOM이란?BOM은 "Browser ..

모듈(module)이란?애플리케이션 내에서 특정 기능이나 역할을 담당하는 독립적인 코드 단위모듈화 방법: `CommonJS`, `AMD`, `UMD`, `ES6 방식` 모듈화 (Modularization)란전체 애플리케이션을 모듈 단위로 분리하여 각 모듈이 독립적으로 동작할 수 있게 만드는 과정   모듈의 특징 캡슐화:모듈은 특정 기능을 독립적으로 구현할 수 있도록 하여, 해당 모듈 내에서만 사용되는 데이터나 함수들을 외부에서 접근할 수 없도록 캡슐화합니다.재사용성:각 모듈은 하나의 독립적인 기능을 제공하므로, 해당 모듈을 여러 곳에서 재사용할 수 있습니다.유지보수성:코드의 크기가 커질 경우, 기능별로 모듈을 나누어 코드의 관리와 유지보수를 용이하게 할 수 있습니다.의존성 관리:모듈 간의 의존성을 명확하..

클래스란?객체를 생성하기 위한 일종의 틀 또는 설계도로써, 객체의 상태를 나타내는 속성(필드)과 함수를 나타내는 메소드로 구성되어 있다. 이 구조를 기반으로 여러 인스턴스(객체)를 생성할 수 있다.   🖥️  자바스크립트에서 클래스는 함수의 한 종류이며, 아래의 코드를 통해 자세히 확인해 볼 수 있다.class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// 클래스는 함수입니다.alert(typeof User); // function// 정확히는 생성자 메서드와 동일합니다.alert(User === User.prototype.constructor); // true// 클래스 내부에서 정의한 메서드는 Use..

즉시 실행 함수 표현식(IIFE, Immediately Invoked Function Expression) 이란?자바스크립트에서 함수를 정의하자마자 즉시 실행하도록 만든  함수 표현식을 말한다. 일반적인 함수 선언 방식에서는 함수를 선언하고, 나중에 ( )를 호출하여 실행한다.  Ⓒ 기본 구조// 즉시 실행 함수는 일반적으로 익명함수로 작성한다.(function() { console.log("This is an IIFE!");})();    📚 즉시실행 함수 표현식 문법 종류 1️⃣ 괄호 안에서 괄호 문법(function() { console.log('IIFE syntax 1');})(); 2️⃣ Douglas 표기법(function() { console.log('IIFE syntax 2');..

자바스크립트의 객체는 아래와 같이 크게 3개의 객체로 분류할 수 있다.    1️⃣ 네이티브 객체(Native objects or Built-in objects or Global Objects) 정의: 자바스크립트 언어 규약(ECMAScript)으로 정의된 내부 객체종류: String, Number, Boolean, Object, Function, Array, Date, Math 등 존재 주의 사항‼️네이티브 객체를 Global Objects라고 부르기도 하는데 이것은 전역 객체(Global Object)와 다른 의미로 사용되므로 혼동에 주의하여야 한다.   2️⃣ 호스트 객체(Host Object)정의: 실행 환경(브라우저, Node.js)에서 제공하는 객체종류: window 객체: document, ..