Synchronous (동기)

동기는 하나의 요청이 오면 완료가 되어야 다음 요청을 실행하는 방식
Javascript는 한 번에 하나의 작업을 수행한다.
한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.
이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다.

동기 동작 원리

1. 코드가 실행되면 순서대로 Call Stack에 실행할 함수가 쌓인다.(push)
2. 쌓인 반대 순서로 함수가 실행된다.(LIFO)
3. 실행이 된 함수는 Call Stack에서 제거된다(pop)

Asynchronous (비동기)

어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.
화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 할지도 모르는 상태에서 다른 코드를 실행 안하고 기다릴 수는 없기 때문에 비동기 함수가 필요하다.

비동기 동작 원리

1. Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API(혹은 백그라운드라고도 한다)로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.
2. Web API(백그라운드)에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에 push(이동) 된다.
3. 이제 Call Stack이 비어있는지 이벤트 루프(Event Loop)가 확인을 하는데 만약 비어있으면, Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.(push)
4. Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다.

비동기 처리

Javascript에서 비동기 처리를 다루는 방법에는 여러가지가 있다. 주로 Callback, Promise, Async/Await, Generator/Yield를 활용한다.

• Callback
• Promise
• Async/Await
• Generator/Yield

Callback

실행 순서가 중요한 상황도 있다. 이런 상황에서 코드를 실행 순서에 따라 실행하려고 할때 주로 콜백함수를 중첩하는 방법을 사용한다.
예를 들어 setTimeout을 사용하거나, api요청을 보낸 후 응답을 받아오는 경우 등 바로 실행될 수 없는 조건이 담긴 함수가 있는 상황이 있다. 이런 문제를 해결하기 위한 방법 중 하나가 콜백함수다. 다른 함수의 실행이 끝날 때까지 특정 코드가 실행되지 않게 기다려 주므로 비동기 작업을 순차적으로 실행할 수 있는 것이다.

function first(callback){
    setTimeout(function(){
        console.log("첫번째");
        callback();
    }, 3000);
}

function second(){
    console.log("두번째");
}

first(function(){
    second(); // 콜백 함수
});

// 첫번째
// 두번째

first 함수가 실행되고 3초후에 “첫번째”를 콘솔에 찍고, 인수로 받은 콜백함수를 실행하면서 second 함수가 실행되어 “두번째”가 콘솔에 찍힌다.

콜백지옥 (Callack Hell..)

콜백함수를 여러 개 중첩하면 작업내용을 이해하기 어려워진다. 이것을 콜백 지옥(Callback Hell)이라고도 한다.

function say(callback){
    setTimeout(function(){
        callback();
    }, 3000);
}
say(function(){
    console.log("A");
    say(function(){
        console.log("B");
        say(function(){
            console.log("C");
        });
    });
});

// A
// B
// C
// 3초후에 "A"를 표시하고, 3초후에 "B"를 표시하고, 마지막으로 3초후에 "C"를 표시한다