[CS/Javascript] 비동기 처리 및 이벤트 핸들러

 

동기 & 비동기 처리

동기(Synchronous)

•  모든 일을 순차적으로 처리하는 것 (이전 작업이 끝나면 → 다음 작업 시작)
•  어떤 요청을 보내면 그 요청이 끝날 때까지 기다림

console.log('시작')
console.log('중간')
console.log('끝')

/*
시작
중간
끝
*/

비동기(ASynchronous)

- 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (병렬 수행)
- 비동기로 처리 시 먼저 처리되는 부분부터 보여주므로 사용자 경험에 긍정적인 효과
- 비동기 동작은 Call stack, Web API, Task Queue, Event Loop 등으로 구성

Call Stack
- 요청이 들어올 때마다 순차적으로 처리하는 Stack
Web API
- JavaSecript 엔진이 아닌 브라우저에서 제공하는 환경으로 시간이 소요되는 작업을 처리
Task Queue
- 비동기 처리된 Callback 함수가 대기하는 Queue
Event Loop
- Call stack이 비어있는지 확인 후 빈다면 Task Queue에 대기 중인 오래된 작업을 Call stack으로 보냄

처리방식
1. 모든 작업은 Call Stack으로 들어간 후 처리 (LIFO 구조)
2. 오래 걸리는 작업이 Call stack으로 들어오면 Web API로 보내 별도 처리
3. Web API에서 처리가 끝난 작업은 Task Queue에 순서대로 들어감 (FIFO)
4. Event Loop가 call stack이 비어있는 것을 체크하고, 비어있다면 Task Queue의 가장 앞에 있는 작업을 Call stack으로 보냄. 

반응형

📌그림으로 보는 비동기 작동 방식

console.log('Hi')

setTimeout(function wait(){
    console.log('waiting')
}, 3000)

console.log('Bye')

/*
Hi
Bye
Waiting
*/

 

콜백 함수 (Callback)

•  콜백함수는 다른 함수에 매개변수로 넘겨준 함수
• 연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 하는 역할
• 비동기 처리를 위한 콜백을 작성할 때 콜백 지옥을 마주할 수 있음.

tep1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        step7(function (value7) {
                        // 내용 작성
                        })
                    })
                })
            })
        })
    })
})​

// 가독성이 매우 떨어지고 코드 수정 하기 어려움

 

Promise

• 콜백 지옥을 해결하기 위한 비동기 처리 객체
• 비동기 작업의 완료 또는 실패를 나타내는 객체
• 콜백 함수는 Event Loop가 현재 실행 중인 Call stack을 완료하기 이전에 호출되지 않음을 보장함
• then 메서드를 이용하여 추가한 경우에도 위 내용을 보장
• then을 여러 번 사용하여 여러 개의 콜백 함수를 추가할 수 있음(Chaining)

then // 요청한 작업이 성공하면 콜백 실행
catch // then이 하나라도 실패하면 콜백 실행

work1()
  .then((result1) => {
  // work2
  return result2
  })
  .then((result2) => {
  // work3
  return result3
  })
  .catch((error) => {
  // error
  })​

 

 

이벤트(Event)

이벤트 큐(Event Queue)

• 자바스크립트의 비동기 처리를 관리하는 매커니즘
• 자바스크립트는 단일 스레드에서 동작하지만, 여러 작업을 동시 처리하기 위한 이벤트루프를 사용할 수 있음.
• 아래 예시에서 setTimeout 콜백은 이벤트 큐에 넣어지고, 콜 스택이 비어진 시점에서 실행

console.log("Start");

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

console.log("End");

// Output:
// Start
// End
// Timeout

이벤트 핸들러(Event Handler)

• 특정 이벤트가 실행했을 때 실행되는 함수
• 주로 클릭, 입력같은 이벤트 처리에 사용되는 경우가 많음

document.getElementById("myButton").addEventListener("click", function() {
    console.log("Button clicked!");
});

 

이벤트 이미터(Event Emitter)

• 특정 이벤트를 발생시키고, 이벤트 리스너를 등록할 수 있게 해주는 객체
• Node.js에서 많이 사용되며, EventEmitter 클래스는 events 모듈에서 기본 제공

const EventEmitter = require('events');

class Emitter extends EventEmitter {}

const emitter = new Emitter();

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

eyEmitter.emit('event');

// emitter 객체는 event를 리스닝
// event를 emit 메서드를 통해 이벤트를 발생해 등록된 핸들러 호출

 

스레드 풀(Thread pool)

스레드풀

• Node.js에서 비동기 작업을 처리하기 위해 내부적으로 사용하는 것
• 여러 개의 작업 스레드로 구성되어 있고, I/O 작업이나 타이머, 파일 시스템 작업 등을 병렬 처리 가능
• libuv와 같은 라이브러리를 사용하여 이벤트 루프와 스레드 풀을 관리

동작 방식

• 자바스크립트에서 비동기 작업이 요청되면, 해당 작업은 libuv에 의해 스레드 풀로 전달
• 스레드 풀에서 사용 가능한 스레드가 작업을 할당받아 처리
• 만약 모드 스레드가 사용 중인 경우 큐에서 대기
• 스레드가 작업 완료시 해당 작업의 콜백 함수가 이벤트 루프의 콜백 큐에 추가
• 이벤트 루프가 콜 스택이 비어 있을 경우 콜백 큐에서 콜백 함수를 꺼내어 실행