이벤트 위임(Event Delegation)과 성능 최적화
이벤트 위임(Event Delegation)과 성능 최적화 이벤트 위임 (Event Delegation)하위 요소에 개별적으로 이벤트 리스너를 추가하는 대신에 상위 요소에서 하나의 이벤트 리스너를 통해 이벤트를 감지하여 하위요소들의 이벤트를 처리하는 기법이다.자바스크립트의 이벤트 버블링(Event Bubbling)을 이용하여 이벤트가 부모 요소까지 전파하는 특성을 활용했으며, 이벤트가 발생한 하위요소에서 직접 핸들러를 실행하는 것이 아니라 부모요소에서 이벤트를 감지하여 실행하는 방식이다. 예제// 개별 이벤트 리스너document.querySelectorAll('.btn').forEach((button) => { button.addEventListener('click', () => { cons..
프로토타입과 프로토타입 체인
프로토타입과 프로토타입 체인 프로토타입 (Prototype)자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반의 객체 지향 언어이다.여기서 객체 지향 언어라는건 === 객체지향 프로그래밍(OOP, Object-Oriented Programming)으로 데이터(속성)과 행동(메서드)을 하나의 객체(Object)로 묶어 프로그래밍하는 방법이다. 객체속성 (Property) - 객체의 상태를 나타냄 (ex: 이름, 나이, 색상등..)메서드 (Method) - 객체가 수행할 수 있는 동작 (ex: 걷다, 뛰다, 날다등..) 모든 객체는 자신의 부모 역할을 하는 객체인 프로토타입(Prototype)을 참조한다.모든 객체는 프로토타입 링크 [[Prototype]] (또는 __proto__)라는 숨겨진 링크를..
자바스크립트에서 함수가 선언된 렉시컬 스코프를 기억하고, 그 스코프 밖에서도 해당 스코프에 접근할 수 있는 함수(개념)를 말한다. 함수와 그 함수가 선언된 환경을 함께 묶은 개념으로 내부 함수가 외부 함수의 변수에 접근하거나 저장된 값을 유지할 수 있는 특성을 제공한다. 주요 특징 간단히 요약1. 변수 접근: 내부 함수가 외부 함수의 변수에 접근할 수 있다.2. 변수 유지: 외부 함수 실행이 종료되어도 내부 함수는 외부 함수의 변수를 참조한다.3. 데이터 은닉: 클로저를 사용하여 데이터를 외부에서 직접 접근할 수 없도록 보호할 수 있다. 예시function 외부함수(외부매개변수) { return function 내부함수(내부매개변수) { console.log(`외부함수: ${외부매개..
변수(Variable)와 식별자(Identifier)
변수(Variable)와 식별자(Identifier) 들어가기 전에... 사람들은 변수(Variable)와 식별자(Identifier)를 혼용하는 경우가 많습니다. "내가 혼용했었나?"라고 의문이 들면서 이해가가지 않을 수도 있습니다. 혼용을 하면서도 인지하지 못하는 경우가 많기 때문인데, 첫번째로는, 대화의 문맥에 따라 혼용하더라도 상대방이 어떠한 말을 하는지 유추할 수 있기 때문이고 두번째로는, 애초에 혼용해서 사용해왔기때문에 그 차이를 이해하지 못하고 같은 의미로 사용하기때문입니다. "변수 name을 선언 안 한 것 같은데" 가 아닌, "식별자 name을 선언 안 한 것 같은데" 가 정확한 문장이라면 읭? 이러실 수도 있습니다. 제가 읭? 이랬거든요. 변수(Variable) 변수라는 이름은 '변할 ..