이벤트 버블링과 캡처링에 대해 설명해주세요
(Deep Dive 779p)
DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파 된다.
이벤트 버블링
버블링은 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다
- 아래 이벤트를 제외한 모든 이벤트
이벤트 캡처링
캡처링은 한 요소에 이벤트가 발생되면, 그 요소의 자손 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다.
addEventListener() 함수의 3번째 매개변수로 true 값을 주면 이 이벤트 타겟은 캡처링을 통해 이벤트를 전파받아 호출되게 된다.
ancestor.addEventListener("click", (e) => {
console.log('ancestor clicked');
}, true)- 포커스 이벤트: focus/blur
- 리소스 이벤트: load/unload/abort/error
- 마우스 이벤트: mouseenter/mouseleave
이벤트 위임
위임 전
// 개별 요소를 접근해야함
const divNode = document.getElementById("div-content");
const spanNode = document.getElementById("span-content");
const btnNode = document.getElementById("btn");
// 개별 요소마다 이벤트 리스너를 등록해야함
divNode.addEventListener("click", function () {
console.log("divNode Click");
});
spanNode.addEventListener("click", function () {
console.log("spanNode Click");
});
btnNode.addEventListener("click", function () {
console.log("btnNode Click");
});위임 이후
// 상위 요소인 id가 "div-content"인 div 노드만 접근함
const divNode = document.getElementById("div-content");
// div 노드에만 이벤트 리스너를 설정
divNode.addEventListener("click", function (e) {
const id = e.target.id;
// 이벤트 객체의 target.id로 조건문을 설정
if (id === "div-content") {
console.log("div-content id Click");
} else if (id === "span-content") {
console.log("span-content id Click");
} else if (id === "btn") {
console.log("btn id Click");
}
});이벤트 위임은 이벤트 버블링을 활용하여 상위 요소에만 이벤트 리스너를 등록하는 기법입니다.
이벤트 위임을 적용하면 메모리 사용량이 감소하며 코드를 더 간결하게 구현할 수 있습니다.
https://developer-talk.tistory.com/886
클로저(Closure)에 대해 설명하세요
(Deep Dive 389p)
1 검색
함수가 선언 시 환경을 기억하여 외부함수의 실행이 종료 되어도 내부함수에서 외부함수의 변수를 참조
전역변수 사용을 억제하고, 정보를 은닉할 수 있다는 점
https://hanamon.kr/javascript-%ED%81%B4%EB%A1%9C%EC%A0%80/
2 Deep Dive
자바스크립트의 고유의 개념이 아니다
클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.
상태를 안전하게 은닉하고 특정 함수에게만 상태변경을 허용한다.
2.1) 자바스크립트 엔진 함수를 어디에 정의했는지에 따라 상위 스코프를 정한다.
스코프 체인이란 상위 스코프를 참조하는 것
렉시컬 환경(Lexical environment)에 대해 설명하세요
(DeepDive 366p)
1 검색
2 DeepDive
상위 스코프에 대해 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트다.
실행 컨텍스트 스택이 코드의 실행순서를 관리한다면, 렉시컬 환경은 스코프와 식별자를 관리한다.
스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할이다.
실행 컨텍스트에 대해 설명하세요
(DeepDive 359p)
1 검색
실행 컨텍스트는 자바스크립트 코드가 실행되는 환경이다. 모든 JavaScript 코드는 실행 컨텍스트 내부에서 실행된다고 생각하면 된다.
즉 함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 자바스크립트 엔진에 있는 콜 스택에 차곡차곡 쌓인다.
그리고 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 실행하면서(LIFO), 전체 코드의 환경과 순서를 보장하게 된다.
실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 실행 컨텍스트는 곧 자바스크립트의 핵심 원리다.
https://velog.io/@edie_ko/js-execution-context
2 DeepDive
소스코드를 실행하는데 필요한 환경을 제공하고 실행 결과를 관리한다.
식별자를 등록하고, 관리하는 스코프와 코드의 실행순서 관리를 구현한 메커니즘으로 모든 코드는 실행 컨텍스트를 통해 관리 된다.
식별자와 스코프는 렉시컬환경으로, 실행순서는 실행 컨텍스트 스택으로 관리한다.
식별자
변수 이름을 식별자라 한다.
바인딩
바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미합니다
데이터 타입
(60P)
1 검색
2 DeepDive
원시타입
number : 하나의 숫자 타입만 존재
string : 문자열
boolean : 논리적 참과 거짓
undefined : var 키워드로 선언된 변수에 암묵적으로 할당
null : 값이 없다는 것을 명시함
symbol :
일반적으로 심볼 타입은 객체의 프로퍼티 키를 고유하게 설정함으로써 프로퍼티 키의 충돌을 방지하기 위해 사용된다
(https://it-eldorado.tistory.com/149)
객체 타입 : 객체, 함수 , 배열 등
자바스크립트는 객체 기반의 언어이며, 모든 것이 객체이다.
데이터 타입은 메모리 공간의 확보와 참조를 위해 필요하다.3
프로토 타입
(260P)
1 검색
프로토타입(prototype)
자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다.
모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다.
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.
http://www.tcpschool.com/javascript/js_object_prototype
2 DeepDive
객체지향 프로그래밍은 여러 개의 독립적 단위 , 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임
실체는 특징이나 성질을 나타내는 프로퍼티(property)를 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다.
이처럼 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하며, 객체지향 프로그래밍은 독립적인 객체의 집합으로 표현하려는 프로그래밍 패러다임이다.
원이 있으면 원의 상태(state)를 나타내는 것은 데이터이며, 이를 구하는 것은 동작(be-havior)이라 한다.
객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.
상속은 객체지향의 핵심 개념이며, 어떤 객체의 프로퍼티 혹은 메서드를 상속받아 사용하는 것을 말한다.
이를 통해 불필요한 중복을 제거하며, 기존의 코드를 재사용 하는 것이다
자바스크립트는 프로토 타입 기반으로 상속을 구현한다.
프로토 타입에 프로퍼티나 메서드를 미리 구현해두면 모든 인스턴스가 별도의 구현없이 값을 갖는다.
프로토 타입은 기존의 객체를 복사하여 새로운 객체를 생성하는 장치이다.
