자바스크립트 제어 흐름

자바스크립트 비동기 이해하기

 

- 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다.

- 처음 자바스크립트를 접하는 경우, 동작에 대한 정확한 이해가 없으면 코드의 흐름을 따라가기가 어렵다.

- 자바스크립트 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프등의 개념을 알아야만 한다.

 

자바스크립트는 비동기 동작을 이해하는게 흐름을 파악하는데 매우 중요하다 

 

자바스크립트 비동기

자바스크립트 엔진은 비동기처리를 제공하지 않는다.

대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있다. → 이 함수들을 API라고 한다

비동기 API의 예시 :

1. WEB API - setTimeout, XMLHttpRequest, fetch등

2. NodeJS - 파일처리 API, 암호화 API

 

//타이머 비동기처리
setTimeout(() => {console.log("타이머 끝")}, 1000);
setInterval(() => {console.log("인터벌 타이머")}, 1000);

//네트워크 처리
fetch('https://google.com')
    .then(() => {console.log('네트워크 요청 성공')})
    .catch(() => {console.log('네트워크 요청 실패')});

 

비동기 처리 모델

 

비동기코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있다.

이벤트루프(Event loop), 태스트 큐(Task Queue), 잡 큐(Job Queue)등으로 구성된다.

API모듈은 비동기 요청을 처리 후 태스크 큐에 콜백함수를 넣는다.

자바스크립트 엔진은 콜 스택이 비워지면, 태스크 큐의 콜백함수를 실행한다.

 

//비동기처리 예시
request('user-data', (userData) => {
    console.log('userData 로드');
    saveUsers(userData);
})

console.log('DOM 변경');
console.log('유저 입력');

실행 순서

1. Call stack에 쌓여있는 console.log('DOM 변경'). console.log('유저 입력') 먼저 실행

2. request코드를 만나면 request 호출 (Task Queue에 저장되고 실행됨)

3. request 호출이 끝나면 Call stack에 request의 callback함수가 들어가게 된다. ((userData) => {~} 이부분)

4. request의 callback함수가 실행되면서 console.log('userData 로드')와 saveUsers를 실행하게 된다.