[JavaScript] - 동기와 비동기

이 글은 JavaScript의 동기와 비동기에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요!

---

이미지 출처: www.google.com

JavaScript를 공부하며 동기와 비동기에 들은적이 있었는데, 정말 이해하기 어려웠던 개념 중 하나였다. 게다가 누군가에게 프로그래밍과 관련된 언어의 정의는 사전적인 의미와 비슷하다는 말에 제대로 낚여 한참을 헤맸던 이 두녀석에 대해 파헤쳐 보려고 한다.

동기란?

동기(Synchronous)는 요청과 결과로 이루어지는 실행의 흐름이 순차적으로 딱 맞아 떨어진다고 생각하면 쉽다. 더 쉽게 예를 들면, 슈퍼마리오와 같이 어떤 게임을 할 때 순차적으로 첫 번째, 스테이지부터 마지막 스테이지까지 순서대로 진행한다고 생각해보자.

 

Stage 1 Start! > Stage 1 Clear! > Stage 2 Start! > Stage 2 Clear! > Stage 3 Start! > Stage 3 Clear!

 

이런 도장깨기도 동기가 될 수 있다. 이미지 출처: www.google.com

이렇듯, 동기는 순차적으로 실행한다는 의미를 기억해두자!

비동기란?

비동기(Asynchronous)는 동기와 반대 개념으로 실행흐름이 순차적이지 않으므로 프로그램이 실행될 때, 불규칙적으로 일이 처리되는 것을 알 수 있다. 사실 이런 정의만 들었을 때, 한 번에 이해되지 않았다. 그래서 내 나름대로 동기와 비교해가며 이해하려고 노력한 끝에 굉장히 단순한 예를 찾게 되었다.

신호가 울리면 동시에 출발하는 육상경기, 이미지 출처: www.google.com

육상경기는 선수들기 대기하다가 신호가 울리면 동시에 출발하며 가장 빠른 사람들 가리는 것이 특징이다. 비동기가 육상경기와 비슷하다. 비동기식 프로그래밍은 요청이 시작되면, 이전에 요청한 작업의 결과여부에 상관없이 나열된 순서대로 요청을 날리는 방식이다. 물론 동시에 출발하는 육상경기와 나열순서대로 요청이 시작되는 비동기식 프로그래밍이 비슷하다고 주장하기엔 애매모호한 부분이 있지만, 큰 틀을 놓고 봤을 땐 비슷한 면이 있다.(개인적으로 이런식으로 대입하여 이해하려고 노력했는데 효과가 좋았다.)

 

이렇듯 실행흐름이 하나의 작업결과에 의존하지 않고, 동시에 여러 작업을 수행하다 보니 효율면에선 굉장히 합리적이다.

JavaScript와 비동기적 실행

이미지 출처: 내가 쓴 코드

위의 코드를 처음 봤을 때, 난 10이 10번 출력되고 done이 출력될 줄 알았다. 하지만 예상 밖으로 10이 나중에 출력되었는데, 그 이유는 현재 코드가 비동기적으로 처리되고 있기 때문이다. 코드 내부의 반복문안에 있는 코드를 살펴보자.

 

setTimeout(function() {
    console.log(i);
}, 10);

 

setTimeout함수는 JavaScript의 내장 함수로 일정시간 후에 작업을 한 번 실행하는 기능을 가졌다. 바로 저 함수때문에 반목문에서 시간지연이 생긴셈인데, 이렇게 비동기적으로 작업을 하게 되면 순차적으로 실행되지 않고 반복문 밖의 console.log('done')이 먼저 출력된 것이다.