이벤트위임, 버블링/캡처링, React17에서의 변경점
DOM DOM(Document Object Model)은 HTML, XML등의 문서를 트리 구조로 표현한 것입니다. 이 트리 구조는 요소(element), 속성(attribute), 텍스트(text) 등의 노드(node)로 구성되어 있습니다. DOM에서의 이벤트 처리는 이벤트 위임, 이벤트 버블링, 이벤트 캡처링 등의 개념을 이용해 구현됩니다. 표준 DOM이벤트에서 정의한 3가지 이벤트 흐름은 다음과 같습니다. 첫번째, 캡처링 단계는 이벤트가 하위 요소로 전파되는 단계 이며, 두번째 타깃 단계는 이벤트가 실제 타깃 요소에 전달되는 단계이고, 세번째는 버블링 단계로 이벤트가 상위 요소로 전파되는 단계 입니다. 이벤트 캡처링부터 알아보겠습니다. 이벤트 캡처링 이벤트 캡처링은 최상위 요소에서 하위 요소로 이벤..
2023. 7. 20.
[Javascript] 콜스택(Call Stack), 메모리힙(Memory Heap), 가비지컬렉션, 메모리릭 그림으로 이해하기
Call Stack과 Heap 시작하기에 앞서 하나의 스레드 당 하나의 스택메모리를 사용하는데, 자바스크립트는 싱글스레드 언어이기 때문에 콜스택이라는 스택메모리 하나만 사용합니다. const a = 'Hello World!'; const b = [1, 2, 3]; const c = { id:'yoy', password:1234 }; const d = function(){ console.log() }; 이런 코드가 있다고 했을때, 자바스크립트 엔진에서 Call Stack 영역과 Heap 영역에서 어떻게 동작하는지 알아보도록 하겠습니다. 우선 각 변수 a, b, c, d는 call stack의 실행컨텍스트 렉시컬환경이라는 곳에 { name : value } 형태로 저장됩니다. 비록 초기화 단계에서는 { 변수..
2022. 3. 16.
원시값과 참조값, 얕은복사와 깊은복사, Object 깊은복사 방법
얕은복사와 깊은복사의 차이점을 이해하려면 우선 원시값과 참조값의 차이에 대한 이해가 필요하다. 원시값 원시값이란 모든 연산이 "실제값 자체"를 갖고 이루어진다. 자바스크립트의 원시값으로는 String, Number, Boolean, Null, Undefined가 있다. let num1 = 1, const num2 = num1; console.log(num2); // 1 num1 = 20; console.log(num2); // 1 다음과 같이 num1의 값만을 선언해주고, num2가 num1이 갖고 있는 "값 자체인" 1을 할당받았으므로 num2에 할당한 뒤 num1의 값을 바꿔주더라도 num2에서는 아무런 영향을 받지 않는다. 참조값 참조값이란 대표적으로 객체, 배열, 함수가 있으며, 모든 연산이 해당..
2021. 11. 20.
[ES6+] Promise와 then, catch, finally, all, race
const obj = new Promise((resolve, reject)=>{//obj라는 변수에 Promise라는 인스턴스를 생성하여 할당 // resolve와 reject 라는 이름의 함수를 만들어서 해당 인스턴스에 설정 // 처리가 성공하면 resolve가, 실패하면 reject가 호출됨 console.log("Promise 읽는 중") resolve("성공"); reject("실패"); }) obj.then( (value)=>{ console.log("결과는", value) }, (reason)=>{ console.log("결과는", reason)} ); console.log("끝까지 읽음") // 끝까지 읽음 // Promise 읽는 중 // 결과는 성공 해당 코드를 위에서부터 하나하나 보면,..
2021. 10. 23.
