[ JavaScript ] 자바스크립트 응용 ②

[ 동기 & 비동기 ]

 

 < 자바 스크립트의 싱글 쓰레드 작업 수행 방식 >

 

자바 스크립트는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행 중 일 경우 다음 작업을 수행하지 않고
기다린다. 즉, 먼저 작성된 코드를 먼저 다 실행한 후에 뒤에 작성된 코드를 실행하는 방식을 동기적 방식이라 한다.

또한 이전 작업이 수행 중일 때 다른 작업을 동시에 할 수 없는 것을 블로킹 방식이라 한다. 

 

* 쓰레드 : 연산 과정을 수행하는 것

 

동기 처리 방식의 단점은 하나의 작업이 너무 오래 걸릴 경우 모든 작업이 오래 걸리게 되고, 하나의 작업이 종료되기
전까지 다른 작업들이 올 스탑되기 때문에 전반적인 흐름이 느려진다. 

 

< 멀티 쓰레드 >

 

코드를 실행하는 쓰레드를 여러 개 사용하는 방식인 MultiThread 방식으로 작동시키면 작업 분할이 가능하다.
오래 걸리는 작업이 있더라도 다른 쓰레드에게 해당 작업을 지시하면 된다. 

 

하지만 자바스크립트는 싱글 쓰레드로만 작업한다. 즉, 멀티 쓰레드를 사용하는 방식이 불가능하다. 

 

싱글 쓰레드 방식을 이용하면서 동기적 작업의 단점을 극복하기 위해서는 여러 개의 작업을 동시에 실행시킨다.

즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행하는 방식을 비동기적 방식이라 한다.

 

또한 하나의 작업이 쓰레드를 점유하지 않는, 하나의 작업을 수행할 때 쓰레드가 다른 작업을 수행하지 못하도록
블로킹을 하지 않는 방식을 논 블로킹 방식이라 한다. 

 

자바 스크립트에서 비 동기 처리를 할 때는 함수 호출시 콜백 함수를 붙여서 비동기 처리의 결과 값을 확인할 수 있다.

 

---

비동기 방식 : 먼저 지시된 작업이 종료될 때 까지 기다리지 않고 다음 작업을 바로 실행하는 방식

 

function taskA(){
    console.log("A 끝");
}

taskA();

console.log("코드 끝");

// A 끝
// 코드 끝

 

setTimeout( 콜백함수, 딜레이타임 ) : 타이머를 만들 수 있는 내장 비동기 함수

* 딜레이타임 : 밀리세컨즈 단위로 전달 ( 1000ms = 1s )

 

function taskA(){

    setTimeout(()=>{
        console.log("A 끝");
    }, 2000);
    
}

taskA();

console.log("코드 끝");


// 코드 끝
// A 끝

 

비동기 처리의 결과 값을 이용하거나 지역 상수를 함수 밖에서 사용하기 위해서는 콜백 함수를 전달해서 사용하면 된다. 

 

function taskA(a,b,cb){

    setTimeout(()=>{
        const result = a + b; // 지역 상수
        cb(result);
    }, 3000);
    
}

taskA(7,8,(result)=>{
    console.log("A task 결과 :", result);
});

console.log("코드 끝");


// 코드 끝
// A task 결과 : 15

 

3개의 비동기적 처리를 수행하는 함수를 생성하고 각각에 콜백 함수를 전달해서 함수들의 비동기 처리의 결과 값을
확인하기

 

function taskA(a,b,cb){
    setTimeout(()=>{
        const result = a + b; // 지역 상수
        cb(result);
    }, 3000);
}

function taskB(a, cb){
    setTimeout(()=>{
        const result = a ** 2 ;
        cb(result);
    }, 1000);
}

function taskC(a, cb){
    setTimeout(()=>{
        const result = a * 10;
        cb(result);
    }, 2000)
}

taskA(7,8,(result)=>{
    console.log("A task 결과 :", result);
});

taskB(9,(result)=>{
    console.log("B task 결과 :", result);
})

taskC(3,(result)=>{
    console.log("C task 결과 :", result);
})

console.log("코드 끝");


// 코드 끝
// B task 결과 : 81
// C task 결과 : 30
// A task 결과 : 15

 

---

< 자바스크립트 엔진 >

 

자바스크립트의 엔진은 Heap과 Call Stack으로 이루어져 있다. Heap은 변수나 상수들이 사용되는 메모리를 저장하는
영역이고 Call Stack은 작성한 코드의 실행에 따라 호출 스택을 쌓는 영역이다.

 

< Call Stack >

 

자바스크립트 코드가 실행이 되면 자바 스크립트 코드들 중 가장 최상위 문맥인 Main Context가 Call stack에 가장
먼저 들어오게 된다. 즉, Main Context가 Call stack에 들어오는 순간이 프로그램 실행 순간이고, 나가는 순간이
프로그램 종료 순간이다. 

 

그 다음 실행되는 코드 부분이 Call stack에 추가되게 된다. 또한 종료되는 코드 부분은 바로바로 스택에서 빠지게 된다.

 

* 스택 : 가장 마지막에 들어온 것부터 가장 먼저 종료되는 구조

 

쓰레드는 Call stack 하나만을 담당하고 Call stack의 작동 방식대로 명령을 처리한다. 자바스크립트 엔진은
Call stack이 딱 하나만 존재하기 때문에 싱글 쓰레드로 동작하게 된다.

 

< Callback Queue, Web APIs, Event Loop >

 

function taskA(a,b,cb){

    setTimeout(()=>{
        const result = a + b; 
        cb(result);
    }, 3000);
    
}

taskA(7,8,(result)=>{
    console.log("A task 결과 :", result);
});


console.log("코드 끝");

 

자바스크립트 엔진과 웹 브라우저의 상호작용인 비동기 처리를 하기 위해 Callback Queue, Web APIs, Event Loop
가 존재한다.  setTimeout() 같은 비동기 함수가 Call stack에 존재한다면 딜레이 타임만큼 지연됐다가 다음 코드가
수행이 된다. 그래서 자바 스크립트 엔진은 비동기로 수행되는 setTimeout() 같은 함수를 Web APIs로 넘겨버린다. 

 

딜레이 타임이 지나면 setTimeout() 함수는 Web APIs에서 사라지게 되고 같이 존재하던 콜백 함수는 Callback
Queue로 옮겨지게 된다. Callback Queue로 옮겨지게 되면 Event Loop에 의해서 Call stack으로 옮겨질 수 있다.

콜백 함수가 Web APIs에 존재하다가 Callback Queue로 이동하고 Call stack으로 들어간다는 의미는 콜백 함수가
실제로 수행이 된다는 의미이다. 

 

Event Loop는 Call stack의 Main context를 제외한 다른 함수가 존재하는지 아닌지 계속 확인해준다.
만약 아무 함수도 존재하지 않는다면 콜백 함수를 수행할 수 있으므로 콜백 함수는 Call stack으로 옮겨서 실행시키고
제거된다. 

 

---

콜백 함수를 이용해서 비동기 처리의 결과를 또 다른 비동기 처리의 값으로 전달할 수 있다. 

 

function taskA(a,b,cb){
    setTimeout(()=>{
        const result = a + b; // 지역 상수
        cb(result);
    }, 3000);
}

function taskB(a, cb){
    setTimeout(()=>{
        const result = a ** 2 ;
        cb(result);
    }, 1000);
}

function taskC(a, cb){
    setTimeout(()=>{
        const result = a * 10;
        cb(result);
    }, 2000)
}

taskA(6,7,(a_result)=>{
    console.log("A result :",a_result);
    taskB(a_result, (b_result)=>{
        console.log("B result :", b_result);
        taskC(b_result,(c_result)=>{
            console.log("C result :", c_result);
        });
    });
});

console.log("코드 끝");

// 코드 끝
// A result : 13
// B result : 169
// C result : 1690