[JS] 이벤트 루프란..

choi seung-i·2024년 8월 29일

공부로그

목록 보기

24/25

원티드 프론트엔드 프리온보딩 9월이 이벤트루프라 신청하였고,
사전 과제인 영상을 보며 내가 생각하던 이벤트 루프에 대해 정리를 해보기로 했다.

싱글 스레드 런타임 = 한번에 하나만 실행 = 싱글 콜 스택

스택

함수를 쌓아서 저장해둔다.
가장 위쪽에 있는 함수부터 꺼내면서 실행된다.

function foo() {
  console.log("here!");
};

function bar() {
  foo();
}

function baz() {
  bar();
}

baz();

스택의 아래부터 위로 쌓이는 순서
main() -> baz() -> bar() -> foo()
스택이 빠지는(실행) 순서는 그 반대로 위에부터
foo() -> bar() -> baz() -> main()

function bar() {
  bar();
}

이렇게 잘못 쓰는 순간 에러 뿜!
스택에 미친듯이 쌓이면서 브라우저에서 maximum call stack 에러를 보내주고 실행을 끊어준다.

블로킹 (blocking)

느리게 동작하는 코드(네트워크요청, 이미지 프로세싱 등)가 스택에 남아있는 것을 의미

동기로 실행되는 코드가 3개라면 해당 코드 3개가 순서대로완료 될 때 까지 그 이후의 코드는 기다려야한다. 브라우저는 해당 코드가 완료될 때 까지(콜스택이 비워질때까지) 멈춰있게 되면서, 유저 입장에서 사이트가 멈췄다 볼 수 있는것!
즉, 전체 완료까지 시간이 소요되어 전체 프로세스의 성능이 저하될 수 있습니다.

동기와 비동기에 대한 나의 오해
사전적으로
동기: 동시에 일어난다
비동기: 동시에 일어나지 않는다

나는 처음 개발을 공부할 때 이 사전적 의미만 보고 헷갈렸었다.
비동기라는 네트워크요청이 3개가 있다고 치면, 실제로 네트워크창을 확인해보면 결과를 기다리지않고 순서대로 실행이 되는것을 확인했었었다. 왜? 동시에 시작하는거 아닌가? 라는 생각이었다.

내가 잘못 알고있던건 전체 작업에 대해서만 생각한것...

그렇다면 동기/비동기란?
한 작업에 대해 요청과 결과를 처리하고 넘어가느냐(동기),
요청만하고 결과가 나오기 전에 다른 작업으로 넘어갈 수 있다(비동기) 였다.

(비동기란, 작업을 독립적으로 백그라운드에서 수행하고 작업이 완료되면 콜백, 프로미스, async/await 등을 사용하여 결과를 처리할 수 있다.
그렇기때문에 "비동기 처리" = "동기처럼 결과까지 처리하고 다음 작업으로 넘어간다"로 이해했다)