[부스트캠프 웹모바일 9기] 챌린지 Day11 학습정리

비동기 처리 및 이벤트 기반 프로그래밍

비동기 처리 : 요청한 작업이 완료될 때까지 기다리지 않고, 다른 작업을 계속 진행할 수 있도록 하는 프로그래밍 기법

JavaScript에서는 callback, Promise, async/await 등을 통해 비동기 작업을 처리할 수 있다.

이러한 비동기 작업은 주로 이벤트 기반 시스템에서 활용된다.

이벤트 큐와 이벤트 핸들러는 이벤트를 관리하고 처리하는 핵심 요소이다.

 

 

 

 

Promise

비동기 작업의 성공 또는 실패를 나타내는 객체

Promise는 "then", "catch", "finally" 메소드를 통해 비동기 작업의 결과를 처리할 수 있다.

function divide(a, b) {
	return new Promise((resolve, reject) => {
    	if(b === 0) reject("0으로 나눌 수 없습니다.")
        else resolve(a / b)
    }
)

divide.then(data => {
    console.log(data)
}).catch(error => {
    console.error(error)
}).finally(() => {
    console.log("나눗셈을 완료하였습니다.")
})

 

 

 

 

 

이벤트 큐

비동기 작업의 콜백 함수를 대기열에 넣어두고, 메인 쓰레드가 빈 상태일 때 차례대로 실행하는 구조이다.

JavaScript의 이벤트 루프가 이를 관리한다.

(실행 순서를 한번 맞춰 봅시다.)

console.log('A')

setTimeout(() => {
    console.log('B')
}, 0)

console.log('C')

 

 

 

 

 

이벤트 핸들러

특정 이벤트가 발생할 때 호출되는 함수

document.getElementById('myButton')
    .addEventListener('click', function() {
    	alert('Button clicked')
})

 

 

 

 

 

 

Event Emitter

이벤트와 관련된 작업을 처리하는 객체

Node.js에서 많이 사용된다.

const EventEmitter = require('events')
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter()

myEmitter.on('event', () => {
    console.log('An event occurred!')
})

myEmitter.emit('event')