Javascript

Javascript 이벤트루프 ( event loop )

muyeon 2023. 5. 16. 20:27

이벤트 루프를 이해하기 넘나 좋은 사이트

링크 : http://latentflip.com/loupe/

 

http://latentflip.com/loupe/

 

latentflip.com

 

동기와 비동기의 차이

 

동기는 먼저 이전의 것이 끝나야 다음 것을 할 수 있다.  줄서는느낌

비동기는 여러가지를 할 수 있다. 운전하면서 노래를 듣고 네비게이션도 확인하며 대화도 가능

 

- 자바스크립트는 동기 언어이다. 비동기 코드가 있을뿐

 

console.log() 의 경우 동기이고 setTimeout() 은 비동기이다.

 


 

- 힙 : 메모리 할당이 일어남

- 호출 스택 : 실행될 코드를 한 줄 단위로 할당해 동작된다.

- Web APIs : 비동기 처리

- 콜백 큐 : 비동기 처리 후 실행되야할 콜백 함수가 순서대로 할당

- 이벤트 루프 : 큐에 할당된 함수를 순서에 맞춰 호출 스택에 저장


링크로 들어가서 해보는게 이해가 훨씬잘되는듯

 

추가적으로 아래 연습해본 링크!!
https://muyeon95.tistory.com/181

 

호출 스택 이벤트 루프(1) [ TIL ] [ Javascript ]

Problem 호출 스택의 간단한 동작원리를 알아보장 Try 말 그대로 스택(LIFO)은 자료구조인데 호출 스택(call stack) 은 함수 호출의 실행 순서를 기록하는 스택 자료구조 이다. 함수가 호출되면 해당 함

muyeon95.tistory.com

https://muyeon95.tistory.com/182

 

Web API 이벤트루프(2) [ TIL ] [ Javascript ]

Problem Web API 에 대해서 알아보장 Try Web API 는 브라우저에서 제공하는 API 로 DOM, Ajax, TimeOut 등이 있다. CallStack 에서 실행된 비동기 함수는 Web API 를 호출하고, Web API 는 콜백 함수를 테스크 큐에 넣

muyeon95.tistory.com

https://muyeon95.tistory.com/183

 

태스크 큐 이벤트루프(3) [ TIL ] [ Javascript ]

Problem 태스크 큐에 대해서 알아보장 Try 태스크 큐는 두가지 종류라고 한다. 첫번째는 마이크로 태스크 큐, 두번째는 태스크 큐 이렇게 두개의 태스크 큐가 존재한다. 마이크로 태스크는 자신을

muyeon95.tistory.com