[node.js] 동기와 비동기 (1) 기본 이해

프로그램 언어들이 보통은 비동기 언어, 동기 언어라고 하지는 않지만 내가 느꼈던 대부분의 언어들은 동기 처리가 디폴트 값이고 비동기는 따로 선언해야 했었다. 그러나 자바스크립트는 비동기가 디폴트고 동기를 할 경우 다른 방식을 이용해야 한다.

 

일단 node js는 비동기 IO를 지원하며 Single-Thread 기반으로 동작한다.

 

우선 코드로 보자

var A = function (){
    console.log("A");
}
var B = function (){
    console.log("B");
}
var C = function (){
    console.log("C");
}

var st1 = setTimeout(function (){
        console.log("st1");
    },100
);
var st2 = setTimeout(function (){
        console.log("st2");
    },300
);
var st3 = setTimeout(function (){
        console.log("st3");
    },200
);

C();
st1;
st2;
st3;
A();
B();

해당 함수를 실행시키면 결과값은

C
A
B
st1
st3
st2

이다.

 

보통은

C

st1

st2

st3

A

B

로 끝나는데 자바스크립트는 왜 그런 걸까?

이게 바로 비동기 처리와 동기 처리의 차이다.

 

보기 쉽게 설명된 이미지가 여기 있다.

동기 처리

 

동기 처리방식은 이어달리기와 같다

순서대로 A의 함수가 끝나면 B의 함수가 실행되고 B가 끝나면 C가 실행된다.

 

그러나 자바스크립트는 비동기 처리이다.

 

비동기 처리

 

물론 위에부터 시작되기 때문에 "시작"속도는 다를 수 있지만 결과는 어떤 것이 빨리 끝나느냐에 따라 다르다.

위에 그림에서는 B의 함수가 오래 걸리기 때문에 B의 함수가 마지막에 실행된다.

 

가장 중요한 건 단순히 결과가 나오는 속도만 다른 게 아니라 중간에 실행도 "동시"에 된다는 것이다.

다음 코드를 보자

var A = function (){
    console.log("A");
};
var B = function (){
    console.log("B");
};
var C = function (){
    console.log("C");
};

var playA = function() {
    setTimeout(A,3000);
    setTimeout(A,6000);
    setTimeout(A,9000);
}
var playB = function() {
    setTimeout(B,2000);
    setTimeout(B,5000);
    setTimeout(B,8000);
}
var playC = function() {
    setTimeout(C,1000);
    setTimeout(C,4000);
    setTimeout(C,7000);
}
playA();
playB();
playC();

해당 함수의 값은 어떻게 될까?

정답은

C
B
A
C
B
A
C
B
A

이다

 

이게 앞으로 자바스크립트를 사용할 때 기본적으로 다른 언어들과 다른 생각을 하며 개발해야 하고 이거로 인해서 좋은 경우와 불편한 경우가 생길 것이다.

 

이게 왜 문제냐면 여러 함수를 실행할 경우 그 안에 코드가 누가 먼저 시작하고 누가 먼저 끝나는지 매번 디버그를 찍는 게 아닌 이상 알 수 없다.

  

다음 함수를 보자

var result = false;

var playA = function() {
    setTimeout(function () {
        result=true;
    },1000);
}

var playB = function () {
    if(result){
        console.log("성공");
    }
    else{
        console.log("실패");
    }
}

playA();
playB();

해당 함수의 결과는 어떻게 될까?

정답은 "실패"이다

 

왜 그런 것일까?

 

자바 스크립트는 비동기 처리이기 때문에 A가 끝나기 전에 B가 실행된다.

그렇기 때문에 "실패" 한 것이다.

 

실제로 이런 비슷한 코드가 있을 때 A의 함수가 돌아가는데 1초가 걸릴 정도로 정말 길었다고 생각해보자.

그렇다면 A가 끝나기 전까지는 B를 실행시킬 수 없다.

 

이 문제에 대한 해결방법은 여러 세대를 거치며 변화해왔다.

다음 글부터는 앞 서배운 callback과 async의 waterfall방식을 알아보자.

 

 

이미지 출처  : https://codingbroker.tistory.com/28

참고 : http://www.nextree.co.kr/p7292/