Asynchronous, Higher Order Function, Event Loop

Asynchronous 비동기 프로그래밍 

자바스크립트 => 싱글 스레드 
싱글스레드 => 1 콜스택  
한번에 한가지 일만 수행함 => 비동기가 중요

비동기 ex) 카페에서 커피 주문 => 진동벨 울리면 받기 

 

 

- 동기적 동작시 문제 발생
값 처리를 완료 후 다음 값을 실행하는데,
값 처리 시간이 오래 걸린다면 다음 값은 기다려야 한다.

극복 방법 ?
Higher Order Function
Event Loop

---

고차원 함수 Higher Order Function

함수를 인자로 받거나, 리턴함
//하나만 충족되어도 됨
ex) map은 함수를 인자로 받으니 고차원 함수

일차원 함수
함수를 인자로 받거나, 리턴 X



고차원 함수가 가능한 이유?
자바스트립트 에서 함수 => 일급 객체 
//모든 언어가 지원x



일급객체 (first-class Object) 란?
함수에서 인자를 받을 수 있고 , 리턴 가능 
// Num, String, Array 모두 일급 객체

자료구조에 저장할 수 있다.
// 배열의 요소로 함수를 넣을 수 있다.

실행문 중간에 생성 가능
// 함수의 실행문에 새 함수 생성 가능



Callback
인자로 함수를 받는것 => Callback 
// 이전에는 나중에 실행되는 함수란 개념 이었다,

---

 

Event Loop
함수 실행시 언제 실행될껀지 순서를 조율 해주는것

//관제탑

//브라우저에 있는 존재이다

 

 

- V8 Engine
크롬 브라우저에 자바스크립트 사용시에 사용되는 엔진 

Heap : 자료 만들면 저장되는 공간
Stack :  실행문들이 차곡차곡 쌓이는곳

 

- Web API
자바스크립트 (언어) 에서 제공되는 기능이 아니라
브라우저에서 제공 되는 기능

// 브라우저 => 멀티 스레드

Ajax :  (ex 서버에 요청, 응답) 
Events :   (ex addEventListener)
Timing :  (ex SetTimeOut)

 

- Call Stack
현재 실행되는 함수가 Call Stack에 쌓인다.
함수가 종료되면  Call Stack은 제거됨
현함수 종료전에 새로운 함수 실행시, 현함수 위에 콜스택에 쌓인다.
 

 

- Callback Queue
Web API를 사용한 식들은 Callback Queue에 저장되고
Call Stack 비어있는 상태일때 차례대로 Callback Queue 값을 넣어서 실행한다.

Run To Completion
코드를 실행시키면 모든 실행문들을 실행하고 종료된다.
//중간에 멈출 수 없음 

q) 버튼 눌럿을시 색깔을 검정으로 바꾸기, 파랑으로 바꾸기 10번 실행
=> 10번 모두 실행이 아니라 마지막 파랑으로 바꾸는것만 실행
// 코드 한줄한줄 들어가는게 아니라  묶음으로 들어가서 마지막줄 실행  ?
// 같은 요소를 수정할때 하나로 보고, 마지막 값을 실행 ?

 

- Event Loop가 하는일
이벤트 함수가 들어왔을시 언제 실행될지 조율
화면의 요소들 바꿀시 (색상 등등) 그 결과를 화면에 언제 반영할지 조율
네트워크 : ajax로 정보 요청, 받아올때 조율

- call Stack과 Callback queue가 비었는지 수시로 확인
call Stack이 비었으면 이벤트루프 이용해서 
callback queue가 call Stack에 들어가서 실행된다.

 

other

 - 

Render Queue : 화면에 보여져야할 결과물도 줄을 세운다 

Render Tree : DOM, CSSOM으로 화면에 어떻게 그릴지 설계

//html ,css이용하여 어떻게 화면에 그려질지 설계

Layout : Render Tree를 가지고 설계도를 그린다.

Painting : 실제 화면에 출력됨

 

순서

Render Queue => Render Tree => Layout => Painting

 

 - 

webAPIs 사용시 모두 Render Queue에 저장되는게 아님
분류에 따라서 다양한곳에 저장됨
//화면 ,자바스크립트, 이벤트 등등 관련한곳에 실행순서 줄을 세움
//분리수거 개념