[JavaScript] 자바스크립트 비동기 - 이벤트 루프

자바스크립트 비동기

• 자바스크립트 엔진은 비동기 처리를 제공하지 않는다.
• 대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있다.
• 이 함수들을 API라고 한다.
• 비동기 API의 예시로, setTimeout, XMLHttpRequest, fetch 등의 Web API가 있다.
• node.js의 경우 파일 처리 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("유저 입력")