동기/비동기

 

1. 동기 (Synchronous) 란 무엇일까?

 

- 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉, A작업이 모두 진행 될때까지 B작업은 대기해야한다.

 

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.

실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다.

대기 중인 태스크들은 현재 실행 중인 실행 컨텍스트가 팝되어 실행 컨텍스트 스택에서 제거되면, 다시 말해 현재 실행 중인 함수가 종료하면 비로소 실행되기 시작한다.

 

자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 (single thread) 방식으로 동작한다.

싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹 blocking (작업 중단) 이 발생한다.

 

//sleep 함수는 일정 시간 (delay) 이 경과한 이후에 콜백 함수 (func) 를 호출함.

function sleep(func, delay) {
    // Date.now() 는 현재 시간을 숫자 (ms) 로 반환한다.
    const delayUntil = Date.now() + delay;

    // 현재 시간 (Date.now()) 에 delay 를 더한 delayUntil 이 현재 시간보다 작으면 계속 반복함
    while (Date.now() < delayUntil);
    // 일정 시간 (delay) 이 경과한 이후에 콜백 함수 (func) 를 호출함
    func();
}

function foo () {
    console.log('foo');
}

function bar () {
    console.log('bar');
}

// sleep 함수는 3초 이상 실행됨
sleep(foo, 3 * 1000);
// bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 3초 이상 블로킹됨
bar();
// (3초 경과 후) foo 호출 -> bar 호출

 

위 코드의 sleep 함수는 3초 후에 foo 함수를 호출함.

이때 bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 3초 이상 (foo 함수의 실행 시간 + 3초) 호출되지 못하고 블로킹 (작업 중단) 됨!!!

 

현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식을 동기(Synchronous) 처리라고 한다.

동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹된다는 단점이 있음.

 

 

2. 비동기(asynchronous) 란 무엇일까?

 

- 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉, A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다.

 

function foo () {
    console.log ('foo');
}

function bar() {
    console.log('bar');
}

// 타이머 함수 setTimeout 은 일정 시간이 경과한 이후에 콜백 함수 foo 를 호출함
// 타이머 함수 setTimeout 은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3 * 1000);
bar();
// bar 호출 -> (3초 경과 후) foo 호출

 

위 코드의 setTimeout 함수는 앞서 살펴본 sleep 함수와 유사하게 일정 시간이 경과한 이후에 콜백 함수를 호출하지만,

setTimeout 함수 이후의 태스크를 블로킹하지 않고 곧바로 실행한다.

현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 (asynchronous) 처리 라고 함.

 

비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는 단점이 있다.

 

타이머 함수인 setTimeout 과 setInterval, HTTP  요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.

비동기 처리는 이벤트 루프와 태스크 큐와 깊은 관계가 있다.