[Javascript] 이벤트루프, 동시성, 이벤트 종류 (1/30)

이벤트 루프(Event loop)와 동시성 (Concurrency)

브라우저는 단일 쓰레드(single-thread)에서 이벤트 드리븐(event-driven) 방식으로 동작한다

 

단일 쓰레드란 ? 쓰레드가 하나뿐이라는 의미이다. 즉, 곧 하나의 테스크(작업)만을 처리할 수 있다는 뜻이다.

 

쓰레드란 ? 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다.

 

브라우저는 실제로 동작하는 많은 웹 애플리케이션은 많은 테스크가 동시에 처리되는 것처럼 느껴진다.

 

이 처럼, 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프 이다.

 

구글의 V8을 비롯한 대부분의 자바스크립트 엔진은 크게 두가지로 나뉜다.

• Call Stack (호출 스택)
  • 작업이 요청되면 (함수가 호출되면) 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행된다. 자바스크립트는 단 하나의 Call Stack을 사용하기 때문에, 해당 태스크가 종료하기 전까지는 다른 어떤 태스크도 수행할 수 없다.
• Heap
  • 동적으로 생성된 객체 인스턴스가 할당되는 영역이다.

 

 

이와 같이 자바스크립트 엔진은 단순히 작업이 요청되면 Call Stack을 사용하여 요청된 작업을 순차적으로 실행할 뿐이다.

 

동시성을 지원하기 위해 필요한 비동기 요청 처리는 자바스크립트 엔진을 구동하는 환경 즉, 브라우저(OR Nods.js)가 담당한다.

 

 

• Event Queue (Task Queue)
  • 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, timer 함수의 콜백 함수가 보관되는 영역으로 __이벤트 루프에 의해 특정 시점(Call Stack이 비어 졌을 떄)에 순차적으로 Call Stack으로 이동되어 실행된다.
• 이벤트 루프 (Event Loop)
  • Call Stack 내에서 현재 실행중인 테스크가 있는지 그리고, Event queue에 테스크가 있는지 반복하여 확인한다. 만약, Call Stack이 비어 있다면, Event Queue내의 태스크가 Call Stack으로 이동하고 실행한다.

 

이벤트의 종류

 

UI Event

 

Event	Description
load	웹페이지의 로드가 완료되었을 때
unload	웹페이지가 언로드 될 떄(새로운 페이지를 요청한경우)
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize	브라우저 창의 크기를 조절했을 때
scroll	사용자가 페이지를 위아래로 스크롤 할 때
select	텍스트를 선택했을 때

 

Keyboard Event

 

Event	Description
keydown	키를 누르고 있을 떄
keyup	누르고 있던 키를 땔 떄
keypress	키를 누르고 땠을 때

 

Mouse Event

 

Event	Description
click	마우스 버튼을 클릭했을 때
dbclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	누르고 있던 마우스 버튼을 뗄 때
mousemove	마우스를 움직일 때(터치스크린에서는 안된다.)
mouseover	마우스를 요소 위로 움직였을 때(터치스크린에서는 안된다.)
mouseout	마우스를 요소 밖으로 움직였을 떄(터치스크린에서는 안된다.)

 

Focus Event

 

Event	Description
focus/focusin	요소가 포커스를 얻었을 때
blur/focusout	요소가 포커스를 잃었을 때

 

Form Event

 

Event	Description
input	input 또는 textarea 요소의 값이 변경되었을 때
input	contenteditable 어트리뷰트를 가진 요소의 값이 변경되었을 때
change	select box, checkbox, radio button의 상태가 변경되었을 때
submit	form submit할 때(버튼 또는 키)
reset	reset 버튼을 클릭할 때 (최근에는 사용안함)

 

Clipboard Event

 

Event	Description
cut	콘텐츠를 잘라내기 할 때
copy	콘텐츠를 복사할 때
paste	콘텐츠를 붙여넣기 할 때