들어가며 이벤트 등록 방법 이벤트 전달 방식 (이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임) event.stopPropagation() 이벤트 등록 이벤트 등록이란 웹 어플리케이션에서 사용자의 입력을 받기 위해 필요한 기능입니다. 1) 간단한 버튼을 만듭니다. add one item 2) 버튼 클릭 시 addItem 함수를 실행되고, 이 때 event 인자가 넘어옵니다. let button = document.querySelector('button'); button.addEventListener('click', addItem); function addItem(event) { console.log(event); } 이처럼 addEventListener 같은 웹 API는 이벤트 등록을 가능하게 해줍니다. 이..

들어가기전 이벤트루프에 대해 글을 처음쓴건 20년도인데, 21년도에 이 글을 보니 다시 정리할 필요가 있다는 생각이들었습니다. MDN 공식문서를 보면서 새롭게 보였던 부분이 있었습니다. 이벤트루프와 자바스크립트의 동시성 모델을 연관지어 설명한 부분입니다. 처음 이 개념을 공부할때는 이벤트루프만 이해하기 바빴는데 동시성 모델과 같이 이해하니, 이벤트루프가 자바스크립트의 언어적 특성과 깊은 연관이 있다는 점을 발견했습니다. 동시성을 지원하는 이벤트루프 자바스크립트의 동시성 모델과 이벤트루프의 연관성은 근본적으로 자바스크립트의 싱글스레드인 언어적 특성에서 비롯됩니다. 이는 한명의 일꾼으로 한번에 하나의 작업을 처리할 수 있다는걸 의미합니다. 하지만 프로그램이 복잡해지고 커지다보면 한명의 일꾼으로는 턱없이 부족..

비동기를 처리하는 3가지 방법 1. Callback 함수 showFirst(function(result) { showSecond(result, function(nextResult) { showThird(nextResult, function(finalResult) { console.log('the final result: ' + finalResult); }, failureCallback); }, failureCallback); }, failureCallback); 문제점 1) 가독성이 매우 떨어진다. (콜백지옥) 2) 복잡해지는 에러처리. - 각 콜백함수에서 에러 핸들링을 해주어야한다. 에러처리를 하지 않으면 콜백함수 호출시, 어디서 에러가 발생한지 알기 어렵다. 2. Promise 객체 Promise를 ..

1. 자바스크립트는 어떤 언어 인가? -> 자바스크립트는 인터프리터 언어이며 단일 스레드이다. 2. 실제 사용시 멀티스레드처럼 사용하는 방법은? -> Web Worker (멀티스레드) Web Worker란? 멀티스레드의 기능. Web Worker가 생성될 때 마다 고유 스레드를 같이 생성한다. HTML 페이지에서 스크립트가 실행되면 해당 페이지는 스크립트가 끝날 때 까지 작업을 멈춘다. 이를 해결하기 녀석이 Web Worker이다. 이 녀석의 핵심 특징 2가지는 아래와 같다. 특징 1) Web Worker는 HTML페이지의 퍼포먼스에 영향을 주지 않는다. 2) 다른 스크립트와는 독립적으로 백그라운드에서 실행되는 JS(멀티스레드)이다. 효과 멀티스레드 작업이 가능해짐으로 속도 성능 크게 향상. 기존의 웹은..