2달 전
최적화 하기
3달 전
Date, JSON 객체의 이모저모
3달 전
Generation 함수 사용하기
3달 전
iteration과 활용
4달 전
왜 Symbol이 필요할까?
4달 전
코드를 더 간결하게
5달 전
콜백 지옥을 벗어나자
5달 전
Plugin으로 더 강력한 Webpack
5달 전
화살표 함수에 대해 깊게 이해하기
5달 전
이벤트 루프
6달 전
대체가능성, 내적동질성
6달 전
Loader로 다양한 파일 다루기
6달 전
JavaScript에서 비동기 처리
6달 전
JavaScript에서 클로저란?
6달 전
JavaScript에서 실행컨텍스트
6달 전
JavaScript에서 this
7달 전
Webpack 대한 기본 이해
7달 전
더 많은 브라우저 지원하기
8달 전
설정하는 다양한 방법
8달 전
실습을 통한 더 깊은 이해
9달 전
babel에 대한 기본 이해
자바스크립트는 DOM 객체에 다양한 이벤트를 포함시킬 수 있다. 이벤트가 발생하면 핸들러가 이벤트에 대한 처리를 맡게 된다. 이벤트 핸들러는 일반적인 함수와 동일하지만 등록된 이벤트가 발생했을 때 실행된다. 이벤트를 등록하고 이벤트가 발생하면 이벤트 핸들러가 동작 하는 것은 브라우저가 알아서 해준다.
<!DOCTYPE html> <html> <body> <button class="myButton">Click me!</button> <script> document.querySelector('.myButton').addEventListener('click', function () { alert('Clicked!'); }); </script> </body> </html>
이벤트 루프란 자바스크립트가 동시성을 제공하는 방식이다.
https://poiemaweb.com/js-event
Heap: 자바스크립트에서 사용하는 객체 인스턴스가 할당되는 영역 → 원시값?
Call Stack: 자바스크립트 엔진이 코드를 실행하는 Stack 공간
Event Queue: 비동기 함수의 콜백 함수, 이벤트 핸들러, Timer 함수의 콜백 함수 등이 실행할 수 있는 조건이 되었을 때 보관되는 영역.
Event Loop: Call Stack이 비어있다면, Event Queue에서 하나씩 꺼내 Call Stack으로 옮겨서 자바스크립트 엔진이 실행할 수 있게 한다. 이벤트 루프는 이 과정을 무한이 반복한다.
자바스크립트가 단일 스레드이며 하나의 Call Stack을 사용한다. ajax get을 호출 한다고 했을 때를 생각해보자. ajax로 get 메서드를 호출하고 비동기적으로 응답을 받아 처리해야 한다. 이 때, 응답을 줄 때까지 기다리지 않고 call stack에 있는 일을 처리 한다. 그리곤 아까 get으로 호출한 것에 대한 응답이 올 때, 이벤트 루프는 Event Queue에서 Call Stack으로 옮겨서 응답을 처리하도록 한다.
function func1() { console.log("func1"); func2(); } function func2() { setTimeout(function() { console.log("func2"); }, 0); func3(); } function func3() { console.log("func3"); } func1();
이벤트의 종류는 겁나 많다.. Event reference
아래는 window 객체에 넣으면 이벤트를 발생시킬 수 있다.
load : 웹 페이지 로드가 완료되었을 때.
unload: 웹페이지를 새로 고침 할 때, 그 외의 호출 되는 경우가 있을까?
error: 어떤 스크립트 오류가 발생했을 때
resize: 리사이즈 이벤트
scroll: 사용자가 스크롤 할 때
select: 텍스트를 선택했을 때인데, 이 이벤트는 몇가지 태그에 대해서만 동작 한다.
, , , and