비동기식 처리 및 이벤트 루프

비동기식 처리 및 이벤트 루프

@2024.04.03

동기식 처리 방식 vs 비동기식 처리 방식

동기식 처리 방식

💡

요청과 동시에 결과가 일어나는 방식으로, 하나의 작업이 완료될 때까지 다음 작업은대기

• 장점 : 설계가 간단하고, 직관적

• 단점 : 결과를 기다리는 동안 다른 작업을 수행할 수 없다.

비동기식 처리 방식

💡

요청을 보낸 후 응답을 기다리지 않고, 바로 다음 작업을 수행할 수 있다.

• 장점 : 여러 작업을 동시에 처리할 수 있어 효율적이다

• 단점 : 설계가 복잡하고, 콜백 함수를 사용할 때 콜백 지옥이 발생할 수 있다

• 주로 비동기적으로 처리하는 작업
  • Ajax web API 요청 : 서버 쪽에서 데이터를 받아와야할 때, 요청을 하고 서버에서 응답하기까지 대기해야 하므로 비동기적으로 처리
  • 파일 읽기 : 서버 쪽에서 파일을 읽어야 하는 상황에서 비동기적으로 처리
  • 암호화/복호화 : 암호화 복호화 할 때도 처리하는데 시간이 걸리므로, 비동기적으로 처리
  • 작업 예약 : 단순히 어떤 작업을 몇 초 후에 스케줄링 해야 하는 상황에는 setTimeout을 사용하여 비동기적으로 처리

• 비동기 작업을 다룰 때는 callback 함수 외에도 Promise 그리고 async/await라는 문법을 사용하여 처리 가능

자바스크립트와 이벤트 루프

• 자바스크립트는 싱글 스레드로 돌아가는 언어이다.
  • 한 번에 한 작업만. 하나의 메인 스레드에서 처리
  • 다른 작업은 앞선 작업이 끝나야 수행된다 = 동기식 언어

• 자바스크립트는 비동기 처리를 지원한다
  • 자바스크립트가 동작하는 환경이 멀티 스레드
    • 작업을 웹브라우저나 NodeJs에 위임함으로써 여러 작업 수행

자바스크립트 엔진

💡

웹 브라우저는 자바스크립트를 읽고 실행하기 위해 자바스크립트 엔진을 탑재하고 있다.

• 자바스크립트 엔진은 크게 메모리 힙 , 콜스택으로 구성되어 있다.

[ 메모리 힙 ]

💡

변수, 함수가 선언될 때 메모리가 할당되는 공간

[콜 스택]

💡

코드를 한 줄씩 읽어 내려가면서 수행할 작업들을 쌓는 공간

• push : 함수가 호출될 때, 해당 함수의 실행 컨텍스트를 맨 위에 추가

• pop : 함수가 반환될 때, 해당 함수의 실행 컨텍스트를 제거

Web API

💡

자바스크립트에서 사용할 수 있도록 웹 브라우저가 제공하는 API

• DOM, ajex, setTimeout 등 존재

Callback Queue

💡

비동기 처리 후 실행되어야 할 함수가 대기하는 공간

Event Loop

💡

콜 스택과 콜백 큐의 상태를 감시하고 있다가, 콜 스택이 비었을 때 콜백 큐에서 대기하고 있는 작업을 꺼내 콜 스택에 넣어주는 역할

• 예시

  

console.log("작업 시작합니다!!");
setTimeout(() => {
  console.log("작업 완료!!!!!");
}, 2000);
console.log("안녕하세요");
console.log("택배 배달 왔어요");
console.log("감사합니다");

• 위의 예시 코드가 순차적으로 동작하지 않는 이유
  1. 스택에 console.log("작업 시작합니다!!"); 담긴다.
  2. console.log("작업 시작합니다!!"); 실행하고 스택에서 제거한다.
  3. setTimeout()이 호출되면, Timer Web API에 함수를 전달하고 다음 코드를 실행한다.
  4. Timer Web API에서는 2초가 지났다면 console.log("작업완료!!!!!");를 콜백 큐로 내려보낸다.
  5. 스택에 console.log("안녕하세요");이 담긴다.
  6. console.log("안녕하세요");을 실행하고 스택에서 제거한다.
  7. 스택에 console.log("택배 배달 왔어요");이 담긴다
  8. console.log("택배 배달 왔어요");을 실행하고 스택에서 제거한다.
  9. 스택에 console.log("감사합니다");이 담긴다.
  10. console.log("감사합니다");을 실행하고 스택에서 제거한다.
  11. 스택이 빈 상태임을 감지하면 이벤트 루프가 콜백 큐에서 대기하고 있던
      
      console.log("작업완료!!!!!");를 스택으로 옮긴다
  12. console.log("작업완료!!!!!");을 실행하고 스택에서 제거한다.