[모던 리액트 딥다이브] 1.5장 이벤트 루프와 비동기 통신의 이해

2024. 6. 27. 18:55· FE/리뷰

 

동기
  • 직렬 방식으로 작업을 처리하는 것
  • 하나의 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리할 수 있음
  • 그동안 다른 모든 작업은 대기함

 

싱글 스레드 자바스크립트
  • 자바스크립트는 싱글 스레드로 작동하기 때문에 기본적으로 한 번에 하나의 작업만 동기 방식으로 처리할 수 있음
  • 자바스크립트는 초기에 HTML을 그리는데 보조하는 역할로 탄생했기 때문에 멀티 스레드 복잡한 내부 처리와 동시성 문제가 발생할 수 있는 멀티 스레드가 아닌 싱글 스레드로 설계됨
  • 자바스크립트에서 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는 특징을 갖음 = "Run-to-completion"

 

 

비동기
  • 동시에 일어나지 않는 것
  • 병렬 방식으로 작업을 처리할 수 있음
  • 동기식과 다르게 요청한 즉시 결과가 주어지지 않을 수 있고, 따라서 응답이 언제 올지도 알 수 없음
  • 하지만 여러 작업을 동시에 수행할 수 있다는 장점이 있음
console.log(1);

setTimeout(() => {
	console.log(2);
}, 0)

setTimeout(() => {
	console.log(3);
}, 1000)

console.log(4);

// 실행 결과는 1 4 2 3

 

 

 

이벤트 루프란
  • 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치
  • 콜 스택이 비어 있는지 여부를 확인함
  • 단순히 이벤트 루프만의 단일 스레드 내부에서 호출 스택에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있다면 자바스크립트 엔진을 이용해 실행함
  • 비동기로 실행할 작업을 태스크 큐에 넣음
  • 만약 호출 스택이 비어있다면 태스크 큐를 확인하고 작업이 있으면 해당 작업을 수행함
  • 이벤트 루프는 태스크 큐를 한 개 이상 가지고 있음
  • 비동기 함수의 콜백 함수나 이벤트 핸들러는 자바스크립트가 코드가 동기적으로 실행되는 메인 스레드가 아닌 태스크 큐가 할당되는 별도의 스레드에서 수행됨
  • 별도의 스레드에서 태스크 큐에 작업을 할당해 처리하는 것은 브라우저나 Node.js의 역할

 

호출 스택(call stack) : 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택

 

 

 

태스크 큐
  • 실행해야 할 태스크(비동기 함수의 콜백 함수나 이벤트 핸들러 등)의 집합
  • 태스크 큐는 큐가 아닌 set 형태를 띠고 있음
  • 그 이유는 선택된 큐 중에서 실행 가능한 가장 오래된 태스크를 가져와야 하기 때문
  • 대표적인 작업 : setTimeout, setInterval, setImmediate

 

 

 

마이크로 태스크 큐
  • 이벤트 루프는 하나의 마이크로 태스크 큐를 가짐
  • 기존의 태스크 큐와는 다른 태스크를 처리
  • 대표적인 작업 : process.nextTick, Promises, queueMicroTask, MutationObserver
  • 기존 태스크 큐보다 우선권을 갖음
  • 마이크로 태스크 큐가 빌 때까지 기존 태스크 큐의 실행은 뒤로 미뤄짐

 

 

렌더링은 마이크로 태스크 큐 작업이 끝날 때 실행되는 기회를 얻음
즉, 마이크로 태스크 큐와 태스크 큐 사이에 일어남

 

 

'FE > 리뷰' 카테고리의 다른 글

[모던 리액트 딥다이브] 1.7장 타입스크립트  (0) 2024.06.29
[모던 리액트 딥다이브] 1.6장 리액트에서 자주 사용하는 자바스크립트 문법  (0) 2024.06.27
[모던 리액트 딥다이브] 1.4장 클로저  (0) 2024.06.23
[모던 리액트 딥다이브] 1.3장 클래스  (0) 2024.06.23
[모던 리액트 딥다이브] 1.2장 함수  (0) 2024.06.21
'FE/리뷰' 카테고리의 다른 글
  • [모던 리액트 딥다이브] 1.7장 타입스크립트
  • [모던 리액트 딥다이브] 1.6장 리액트에서 자주 사용하는 자바스크립트 문법
  • [모던 리액트 딥다이브] 1.4장 클로저
  • [모던 리액트 딥다이브] 1.3장 클래스
따봉치치
따봉치치
따봉치치
김치치의개발블로그
따봉치치
전체
오늘
어제
  • 분류 전체보기 (359)
    • 면접질문 (4)
    • CS (50)
    • FE (116)
      • Javascipt (16)
      • Typescipt (6)
      • React (16)
      • CSS (5)
      • Nextjs (1)
      • 리뷰 (70)
    • Algorithm (181)
    • ETC (3)
      • Bootcamp (4)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • typescript
  • 누적합
  • 자료구조
  • 스택
  • 탐욕 알고리즘
  • 데이터베이스
  • 그리디
  • 투 포인터
  • Fe
  • 모던 리액트 딥다이브
  • BFS
  • TOPCIT
  • CS
  • 백트래킹
  • 그래프 탐색
  • 모던 자바스크립트 딥다이브
  • 리액트
  • BOJ
  • 문자열
  • Stack
  • 알고리즘
  • C++
  • react
  • 백준
  • dp
  • javascript
  • Greedy
  • 우선순위 큐
  • 완전탐색
  • 자바스크립트

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
따봉치치
[모던 리액트 딥다이브] 1.5장 이벤트 루프와 비동기 통신의 이해
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.