이벤트 (3) 썸네일형 리스트형 <이벤트루프> 태스크 큐 : 마이크로태스크 큐 & 매크로태스크 큐 1. 소개 * 소개 - 지난 장에서 봤듯이 비동기 작업은 태스크큐에서 대기하다가 콜스택으로 넘어가서 실행된다. - 그렇다면 여러개의 비동기 작업이 들어가면 어떻게 될지 알아보자. - 아래에서 사용되는 이미지와 코드는 이전 포스트의 연장선이므로 이전 포스트를 보지 않았다면 보는 것을 권장한다. 2. 실행 * 태스크 큐 - 먼저 동일한 비동기 동작이 여러 개가 있을 경우를 살펴보자. function myFunc1() { Promise.resolve().then(() => { console.log("promise1"); }); myFunc2(); Promise.resolve().then(() => { console.log("promise3"); }); console.log("bye"); } function m.. <이벤트루프> JS와 이벤트루프 1. 소개 * JS 와 이벤트루프 - 이벤트 루프(event loop)는 태스크가 들어오면 이를 처리하고, 잠들고, 처리하는 일련의 과정을 반복하는 자바스크립트의 루프를 의미한다. 그렇다면 이것이 무슨 의미가 있을까. - 자바스크립트는 '단일 스레드' 기반의 언어이다. 하지만 자바스크립트를 써본 사람들은 이미 알겠지만 여러 작업이 동시에 처리되고 있음을 알 수 있다. 이러한 작업에 필요한 것이 '이벤트 루프'이다. - 정리하면 자바스크립트는 태스크를 처리하는 이벤트 루프를 통해 비동기 방식으로 동시 작업을 지원한다. - 이 때 알아둬야 할 것은 이벤트 루프는 ECMAScript 스펙에 등재된 것이 아닌 브라우저나 노드JS에서 지원하는 것이라는 점이다. 자바스크립트 엔진은 단일 호출 스택(Call Stac.. <자바스크립트 기초> 12. 이벤트 (1) * 이벤트란 - 이벤트란 정적인 상태의 웹에서 특정한 동작을 시행하는 것을 의미한다. - 예를 들어 웹문서가 로드가 다 되었을 때, 창 크기가 바뀔 때, 마우스가 클릭되었을 때, 마우스 휠이 움직일 때, 화면에 터치가 이루어 졌을 때 등등이 있다. - 우리는 이러한 이벤트에 반응하여 동작을 시행하는 함수를 만들 것이다. * 이벤트 함수 // 클릭 // - 먼저 간단하게 버튼을 만들었다. 우리의 목표는 버튼을 클릭하였을 때 main-title이라는 id를 가진 h1태그의 배경색을 바꾸는 것이다. - btn이라는 변수에 클래스명을 이용하여 버튼을 담아주었다. - 다음으로 변경이 이루어지는 h1태그도 id를 이용하여 mainTitle 변수에 담아주었다. - 이제 클릭되었을 때 시행될 함수를 만들어야한다. 이 .. 이전 1 다음
