Sync(동기) vs Async(비동기)

동기(Synchronous): thread에 작업을 맡긴 후 그 작업이 끝날때까지 기다렸다가 다음 작업을 시작하는 것을 말한다.

비동기(Asynchronous): thread에 작업을 맡긴 후 기다리지 않고 다음 작업을 하는 것을 말한다.

• thread는 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위.

동기/비동기 개념은 컴퓨터가 작업을 처리하는 작업 방식과도 연관이 있다. 작업 방식으로는 Serial(직렬)처리, Cocurrent(동시)처리가 있다.

Serial(직렬) 처리: 다른 하나의 thread에 분산처리를 맡기는 경우.

Cocurrent(동시) 처리: 다른 여러개의 thread에 분산처리를맡기는 경우.

무조건 동시처리 하는 것이 좋은게 아닌가요?

보통은 우리가 동시 처리를 하게되면 여러개의 작업을 빠르게 처리할 수 있으니까 이게 좋다고 생각하지만, 프로그래밍을 할떄 순서대로 처리해야하는 경우가 필수적으로 존재하기 떄문에 Serial처리(직렬처리)도 필요하다.

JavaScript의 실행 순서(콜스택)

JavaScript가 동작할 수 있는 런타임 환경이라면은 JavaScript Engine이 탑재되어 있습니다. 이 Engine이 Source Code를 하나하나씩 이해하고 번역해서 실행합니다.

우리는 SourceCode에서 동적으로 객체를 생성하는 경우에 위와 같이 메모리 힙에 정보가 생성이 됩니다. 또한 콜스택 또한 존재하는데, 전역에서 C => B => A 순으로 들어온다 하면 나올떄는 A => B => C 순서로 나가게 됩니다.
자바스크립트 엔진은 단 하나의 Single Context Stack을 가지고 있습니다. 한번에 하나의 일만 처리할 수 있다는 뜻입니다. 즉, 하나의 스트림으로만 한가지 일을 처리할 수 있다는 것을 말합니다.

Memory Heap: 변수와 객체의 메모리 할당을 담당.
Call Stack: 함수가 호출되면 쌓이는 곳, LIFO(후입선출)을 따른다.

function a() {
  return 1;
}

function b() {
    return a() + 1;
}

function c() {
    return b() + 1;
}

console.log('시작했다!');
const result = c();
console.log(result);

위의 함수가 어떻게 작동될지 생각해봅시다.

1. C 함수 호출
2. B 함수 호출
3. A 함수 호출
4. 1 return
5. return a() + 1 = 1 + 1 = 2
6. return b() + 1 = 2 + 1 = 3

이렇게 작동할 것 입니다.

비동기는 왜 필요할까?

자바스크립트는 위에 설명했듯이 기본적으로 Synchronous Single Threaded 프로그래밍 언어이다. 웹 프로그래밍에서 굳이 왜 비동기 처리가 필요할까? 자바스크립트가 모든 작업을 동기 방식으로만 처리한다면 생각만 해도 답답해진다. 예를, 웹 페이지가 로딩되거나, 어떠한 동작(Event) 하나가 30초 이상이 걸린다고 상상해보자.

그렇게 되면, 웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다.

또, 요즘 사용자들은 느리고 응답이 없는 웹 사이트를 원하지 않는다.

그렇기 때문에 자바스크립트가 웹 사이트에서 동작할 때,비동기 방식이 필요합니다.

비동기 사용 방법

자바스크립트는 WEB APIs를 활용하여 single thread가 아닌, multi thread 환경에서 동작시키기 떄문에 다양한 일들을 동시에 처리할 수 있습니다.

1. WebApi setTimeout 이용
   
   위 이미지는 execute라는 함수를 호출하고 그 함수 내부에서 WebApi setTimeout(3초)을 호출한다면 위의 그림과 같이 작동할 것입니다.
   즉, WebApi를 호출할 때 timeout이 된 후에 3초뒤에 호출할 callback을 함께 전달합니다.
   

[작동과정]
1. Browser에게 3초뒤 콜백함수를 호출해달라고 미리 전달.
2. 타이머가 가동되는 동안 우리 코드 execute를 실행.
3. 함수 종료 후, 3초가 지나서 타이머가 끝날시 callback함수를 TaskQueue라는 곳으로 전달.
4. JavaScript 환경에 있는 EventLoop가 CallStack과 TaskQueue를 감시.
5. CallStack이 비어 있을시 이 callback 함수를 call stack으로 가져와서 call stack에서 callback 함수 실행

아래 코드를 실행한다고 가정해보자.

function execute() {
    console.log('1');
    setTimeout(()=>{
        console.log('2');
    }, 3000)
    console.log('3');
}
// 이렇게 했을떄 1, 3, 2가 출력됬다. 함수를 호출하면 바로 console.log 1이 먼저 출력
// 그다음 setTimeout이라는 node api를 활용해서 콜백함수가 있는데 이걸 3초뒤에 나에게 던져줘 이러고 넘어가고
// 3을 출력한 후 우리가 전달한 콜백함수는 node에 의해서 타이머가 진행되면서 3초가 끝나면 taskQueue에 들어오고 
// 우리의 콜스택이 비어있으니까 콜백함수를 스택에 가지고와서 다시 하나씩 실행해주면서 2가 출력된다.

execute();

JavaScript를 비동기식으로 동작할 수 있는 방법은 여러가지 있습니다.
1. 비동기적 Callback (Callback Hell 발생)
2. Promise 객체
3. Async & Await
차근 차근 포스팅하면서 알아보겠습니다.