[TIL🔥] Day2(8/3)

Introduction

아침 11시부터 팀원들과 어제 배운 내용을 이야기했는데,,,
난 아직 가야할 길이 먼 것 같다..😢
나도 도움이 되는 팀원이 될 수 있도록 열심히 노력해야겠다.
오늘은 계속 헷갈렸던 이벤트 루프의 동작 과정에 대해 확실히 짚고 넘어가고자 한다.

오늘 새롭게 배운 것

첫째날보다 더 어려운 것들이 우수수 쏟아져나왔다.
근데 강사님 강의력 최고시다. 궁금증이 생기는 흐름대로 강의를 해주셔서 너무 좋다.

1. 함수형 프로그래밍
2. 객체지향과 프로토타입 - 🌟 프로토타입 포스팅 필수
3. 이벤트 루프
4. 유니코드
5. 정규 표현식 - 😓 복습 필요!!!
6. 쿠키와 세션, 웹 스토리지
7. 자료구조
8. 시간 복잡도

복습해야할 것들이 너무 많지만,,,
오늘의 다룰 주제는 이벤트 루프의 동작 과정이다

💫 이벤트 루프

자바스크립트는 Single Thread로 동작한다는 사실은 모두 알고 있을 것이다.

그렇다면 과연 어떤 원리로 애니메이션과 클릭 이벤트 등을 동시에 실행할 수 있는 것일까?

바로 바로 이벤트 루프라는 기능이 있기 때문이다.
이벤트 루프는 자바스크립트 엔진에 포함되어있지 않고, 브라우저, Node.js 에서 자체적으로 관리한다.

결국, 자바스크립트의 엔진은 Single Thread지만 브라우저는 Multi Thread로 동작하기 때문에 동시 실행이 가능하다!

이벤트 루프의 동작 과정

실습 코드

1. 스크립트가 실행되면 전역 스코프 내에서 실행

2. setTimeout이 실행되어 call stack에 쌓이면,
   웹 내부적으로 Web API 실행
   call stack에서 종료

3. foo 함수 실행
   call stack에 foo 함수 쌓임
   console.log 실행
   call stack에서 종료

4. 결과적으로 스크립트가 끝났기 때문에 call stack은 비어 있는 상태

5. 0.1초가 지난 후,
   Web API에서 callback 함수를 Task Queue로 밀어넣기

6. call stack이 비어있다면,
   callback 함수는 Task Queue에서 call stack으로 이동
   => 이러한 과정을 '틱(Tick)'이라 함

7. Task Queue는 FIFO(선입선출) 방식으로 동작

결과적으로, foo -> bar의 순서로 출력 됨을 확인할 수 있다.

Comment

아 이러 이러한 과정이겠지하고 공부를 게을리했던 나의 과거를 반성한다...
확실히 강의듣고, 직접 찾아보며 어떤 로직인지 깨우치고, 마지막으로 글을 작성하니 이벤트 루프에 대해 확실히 이해했다...
자바스크립트 재밌는데 어려운 너란 녀석...
꼭 5개월 안에 정복할꺼다!!!

참고 사이트

자바스크립트와 이벤트 루프
https://kyounghwan01.github.io/blog/JS/JSbasic/eventLoop/
자바스크립트와 이벤트 루프
https://meetup.toast.com/posts/89