동기와 비동기에 대하여(About Synchronous and Asynchronous)

개발을 하다보면 "동기"라던가 "비동기"라던가 하는 소리를 엄청 많이 들어봤을 것이다.

동기가 무엇이고 비동기가 무엇이길래 그토록 많이 이야기 하는 것일까.

 

사실 요약해서 설명하면 한없이 간단한 이 두개념은 그저 하나의 코드 블럭에서 처리된 데이터 결과를 확인할 수 있느냐 아니면 "콜백 메서드" 또는 "이벤트 핸들러"와 같은 다른 코드 블록을 통해 데이터를 확인하느냐의 차이다.

침착맨님 감사합니다. 저작권 문제시 바로 삭제하겠습니다.

코드를 보면서 간략하게 설명해보겠다.

 

일단 동기 방식의 코드다.

 

Synchronus(동기방식)

var num = 0;

function sum( n ) {
    num = num + n;
}

sum(3);
console.log( num ); // 3

이렇게 코드를 작성하면 우리는 바로 num에 3이 들어간다는 사실을 알 수 있다. 모르는 사람은 동기와 비동기가 중요한게 아니다. 함수부터 다시 배우고 오길 바란다. 요즘 교육과정이 어떻게 되는지 모르겠지만 내가 학생이었을 때는 중학교 2학년 수학시간에서 함수를 배웠다.(지금 조사해보니 중학교 1학년때 배웠다가 다시 2학년 1학기로 옮겨갔단다.)

 

암튼 위의 코드를 한줄 한줄 해석해보면

1. num 이라는 변수를 만들고 거기에 숫자 0을 넣어준다.
2. 그리고 함수 sum을 만드는데 이 함수는 n 이라는 매개변수(Parameter: 파라미터)를 전달 받는다.
3. 그리고 sum 함수를 실행하는데 이때 3을 매개변수로 전달한다.
4. 그러면 num이라는 변수는 num(현재 0)과 매개변수 n(현재 3)을 더한 값을 넣는다.
5. 그리고 console.log를 통해 값을 콘솔 창에 보여준다.

이렇게 하나의 블록에서 데이터를 처리하는 방식을 동기방식이라고 한다.

 

그러면 비동기 방식의 코드는 어떻게 처리되는지 확인해보자.

 

Asynchronus(비동기 방식)

var num = 0;

function sum( n, callBack ){
    setTimout( function() {
        num = num + n;
        callBack();
    }, 100 );
}

function onSumNumber() {
    console.log( num ); // 3
}

sum(3, onSumNumber );
console.log( num ); // 0

이렇게 코드를 작성하면 sum함수를 실행하고 바로 변수 num을 확인해보면 아직 sum 함수내에서는 setTimeout을 통해 데이터 처리를 고의적으로 100ms 만큼 지연시켜 처리하기때문에 0으로 확인된다.

하지만 sum 함수를 실행하면서 같이 넘겨준 콜백 함수 onSumNumber 함수를 통해 데이터가 처리된 이후에 확인되는 num에서는 3이라는 값을 확인할 있다.

 

그래서 앞서서 동기화 비동기의 차이는 바로 데이터를 처리하고 확인하는 시점의 차이라고 이야기 했던거다.

아주 대표적인 예로 우리가 흔히 이야기하는 Ajax통신(이라고 잘 알려져있는 HTTP 통신)을 통해 비동기방식으로 처리하는 것을 생각하면 된다.

 

일반적으로 비동기방식의 데이터 처리방식은 보통 "언제 데이터 처리가 완료"되는지 알 수 없을 때 사용하게 된다.

비동기 방식의 경우엔 코드가 매우 복잡하고 함수의 실행 주체를 파악하기 힘들다는 단점이 있는 대신 여러 동작을 동시에 동작하여 이벤트에서 처리 할 수 있다는 장점이 있다.

그리고 동기방식은 코드가 매우 간소하여 이해하기 편한 코드를 짤 수 있는 반면 하나의 스레드 안에서 처리가 늦어지는경우 프로그램이 전반적으로 멈추는 현상이 나타나기도 하고 Restful API 를 호출하는 HTTP 통신같은 경우 데이터를 동기적으로 처리할 수 없다는 한계점이 있다는 문제가 있다.

(Blocking / Non Blocking 방식의 차이와 유사하지만 이것은 동기 / 비동기와는 다른 개념으로 같은 의미로 이해하지 말자)

 

그래서 이벤트의 향연이 펼쳐지는 Javascript같은 경우 처음 배우긴 쉬워도 "잘 짜기는 어렵다"는 이야기를 하게 된다.  그래서인지 Javascript ES5 에서는 Promise ~ then 방식의 이벤트 처리방식이나 Async ~ Await 방식의 처리방식을 통해 최대한 비동기 코드인 것 같은 문법을 만드는 이유가 되는 것 같다.

 

오늘은 여기까지 하고 다음번엔 Javascript 카테고리에서  Promise ~ then을 활용한 코딩 방법을 소개해보도록 하겠다.

 

안녕!