늘 겸손하게

이벤트 버블링 한 요소에서 이벤트가 발생하면 해당 요소에서부터 해당 요소의 최상단 부모 요소까지 이벤트가 전달되면서 만나는 이벤트 핸들러들이 작동하는것을 버블링(bubbling)이라고 합니다. 거품(버블)이 수면 맨 아래에서 위로 올라가는 것처럼 이벤트가 위로 올라가는 것에 빗대어 버블링이라 부릅니다. One Two Three const divs = document.querySelectorAll('div') divs.forEach(ele => { ele.addEventListener('click', handler); }) function handler(event) { console.log(event.currentTarget.className); } 위와 같은 html에서 맨 아래 div인 th..

1. 불변성 (Immutability)? 말 그대로 한번 설정되면 변하지 않는다는 의미이다. 자바스크립트에서 원시값은 불변값이므로 한 번 생성되면 변경되지 않는다. 그래서 재할당시 변수가 가리키고 있는 메모리 위치에 새로운 값을 저장하는 것이 아닌, 새로운 메모리 위치에 값을 할당하고 새로운 메모리 위치의 주소값을 변수에 저장시킨다. 왜 중요한가요? 불변성을 지키지 않으면 데이터가 어디서 어떻게 바뀌는지 파악하기가 어려워집니다. (값이 예측불가능해진다) 불변성을 지키지 않으면 예기치못한 side effect를 발생시켜 버그를 유발할 수 있습니다. 객체의 불변성을 지키지 않고 참조 값을 여러 객체가 공유할 경우 어떤 객체에서 값이 변경되었을때 의도치 않게 객체를 참조중인 객체에서도 값이 변경되어 변경된 곳..

이벤트 루프 자바스크립트의 특징 중 하나는 싱글 스레드로 동작하는 것입니다. 하지만 브라우저가 동작하는 것을 보면 많은 태스크가 동시에 처리되는 것처럼 보입니다. 이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프입니다. 이벤트 루프는 콜 스택(실행 컨텍스트 스택)에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인합니다. 만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킵니다. 매크로태스크와 마이크로태스크 마이크로태스크가 무엇인가요? 매크로태스크들 사이에서 먼저 실행되는 테스크들입니다. 자바스크립트 엔진은 매크..

Promise와 async, await 구문 모두 자바스크립트에서 비동기 처리를 위해 사용됩니다. Promise와 async, await을 비교해 봅시다. Promise 프로미스는 3가지 상태(state)가 존재합니다. Pending : 이벤트 발생 전 초기 상태 Resolved : 비동기 처리가 정상적으로 완료된 상태 Rejected : 비동기 처리 중 오류 발생 혹은 실패 각각의 상태에 따라 필요한 작업을 코딩할 수 있습니다. Promise의 에러 처리 (핸들링 ) 성공적으로 처리된 비동기 작업은 resolved promise라 부를 수 있고. then() 메서드로 처리 실패하거나 오류가 발생한 비동기 작업은 rejected promise이고. catch() 처리 비동기 처리 이후에 실행할 코드는. ..