[JavaScript] 동기/비동기

동기(Synchronous)

동기는 순차적, 직렬적으로 태스크를 수행하는 것을 의미합니다.

마치 큐(Queue)의 수행과정처럼, 선입선출의 코드 실행 처리 순서를 동기방식이라고 부릅니다.

function func1(){
	console.log('first');
    func2();
}

function func2(){
	console.log('second');
    func3();
}

function func3(){
	console.log('third');
}

func1();

//출력값
// first -> second -> third
   

비동기(Asynchronous)

비동기 처리는 왜 필요한 것일까요?

대부분의 웹서비스는 사용자의 요청을 받아 DB에 접근하여 데이터를 가져와서 보여주는 형태를 가지는데, 이를 동기적으로 구성한다면 데이터를 모두 받아오기까지 기다린 다음에야 다음 실행이 이루어지고, 데이터의 양이 많아질 수록 이 웹서비스의 실행속도는 느려지게 됩니다.

이런 웹서비스는 아무도 사용하지 않겠죠.

 

이것이 바로 비동기 프로그래밍이 필요한 이유입니다.

하지만, 자바스크립트는 싱글스레드로 프로그램이 동작합니다.

이런 자바스크립트가 어떻게 비동기처리 방식을 지원할까요??

 

자바스크립트는 웹 브라우저나 Node.js의 자바스크립트 엔진에서 실행되는데, 이 엔진에는 자바스크립트를 돌리는 하나의 스레드가 존재합니다.

또한, 이 엔진 뿐만 아니라 비동기식 처리 모델인 Web API라는 것이 함께 동작하면서 setTimeout이나 Ajax로 데이터를 가져오는 등 시간이 소요되는 일을 처리합니다.

이 Web API들이 자바스크립트 엔진 스레드와는 따로 비동기 처리를 하게 됩니다.

콜백함수를 가지고 이벤트 루프에 들어가서 처리되는 대로 콜백함수를 다시 자바스크립트 엔진으로 돌려주는 방식으로 비동기식 처리를 합니다.

 

function func1(){
	console.log('first');
    func2();
}

function func2(){
	setTimeout(function(){
    	console.log('second');
    }, 0);
    func3();
}

function func3(){
	console.log('third');
}

func1();

//출력값
// first -> third -> second

 

함수 호출 순서로만 보면, first -> second -> third가 출력되어야 하지만

실제로 실행시키면 first -> third -> second 순으로 출력됩니다. 

하지만 func2가 먼저 실행되고 func3이 실행되어야 하는 경우에는 어떻게 해야할까요?

 

function getData() {
	var Data;
 	$.get('url', function (response) {
  		Data = response;
 	})
 	// $.get()로 데이터를 요청하고 받아올 때까지 기다리지 않고 return 해버림
 	return Data; 
}
console.log(Data) // undefined가 출력됨

데이터를 가져오는 코드에서는 더 큰 문제가 생기겠죠.

이러한 방식은 비동기흐름을 제어하기가 힘듭니다.

 

따라서 자바스크립트는 비동기 흐름을 제어할 수 있는 여러 함수들을 제공합니다.

다음 시간에는 자바스크립트의 비동기 처리에 사용하는 Callback, Promise, Async/Await의 개념, 사용법, 차이점을 알아보도록 하겠습니다 !!