[용어 정리] 비동기처리

이론 위주로 배울 땐 무슨 소린지 하나도 몰랐는데 이렇게 직접 다루다보니 이론의 뜻을 하나씩 알게 돼서 좋다.

 

1. 동기와 비동기

 

동기 : Synchronous - 순차적으로 task를 수행

비동기 : Asynchronous - 병렬적으로 task를 수행 -> 연산이 끝날 때까지 기다리지 않고 다음 연산을 진행할 수도 있다는 의미!

 

동기와 비동기라는 단어만 봤을 때 바로 이해하지 못해서...

사전을 찾아보고 나서야 이해할 수 있었다.

 

 

데이터를 받아오고 처리해야 하는데 이 과정을 순차적으로 실행하는 동기적인 방법으론 실행시간이 오래걸릴 것이다. 그래서 JS에서는 비동기적으로 데이터를 받아와 처리한다. 

 

그런데 이곳저곳 찾아보다 보니 JS는 싱글스레드이면서 비동기적으로 동작을 한다고 한다.

싱글스레드? 비동기적 동작? 이게 무슨 말일까?

 

 

1.1 싱글 스레드

싱글스레드는 OS(운영체제)의 개념이다. OS가 처리할 작업의 단위를 프로세스라고 하고, 싱글 스레드는 이 프로세스를 순차적으로 하나씩 처리하는 것을 의미한다.

 

그렇다면 싱글 스레드인 JS는 어떻게 비동기처리가 가능한 걸까?

 

1.2 JS 런타임

런타임이란 프로그램이 실행되고 있는 동안의 동작이나 프로그래밍 언어가 구동되는 환경을 말한다.

JS는웹 브라우저와 Node.js에서 실행되고, 이 두개가 JS의 런타임이라고 말할 수 있다.

 

이 웹 브라우저와 Node.js, 즉 JS의 런타임은 멀티 스레드의 환경이다.

 

 

1.3 JS 비동기처리가 가능한 이유

이것도... 블로그를 참고했다. 내가 찾는 용어들이 뭔지까지도 여기 정리돼 있었다.

참고한 블로그1

[JavaScript] 런타임 작동 방식, 비동기와 이벤트 루프 - 하나몬

 

참고한 블로그2

JavaScript | 자바스크립트 작동 원리(Event Loop와 Call Stack, Web API, Callback Queue)

 

 

 

JS자체가 비동기 처리를 하는 게 아니라 JS런타임이 Web API를 지원하고, 이 API를 통해 비동기적 처리가 가능하다.

JS는 싱글 스레드로 동작하지만 JS의 런타임인 웹 브라우저, Node.js가 Stack, Event loop, Task Queue, Web API등을 지원하기 때문에 비동기처리가 가능한 것! 

 

 

 

 

1.4 JS 비동기처리 과정

 

JS 엔진

 

 

JS 엔진은 Memory Heap과 Call Stack으로 나눌 수 있다.

힙은 객체와 변수를 할당하는 역할을 맡고, 스택은 JS에서 실행할 함수(코드)들이 차례대로 쌓인다.

 

 

 

 

Call Stack - Web API - Callback Queue - Event Loop

 

 

 

JS의 Call Stack에 있는 함수가 비동기 함수라면 이를 Web API에서 처리한다.

Web API에서 처리가 끝난 비동기 함수는 Callback Queue에 쌓이게 된다.

 

Event loop는 Call Stack이 비어있는지 확인하고 비어있으면 Callback Queue에 있는 결과들을 Call Stack으로 하나씩 내보낸다.

 

이런 실행과정 덕분에 JS는 싱글 스레드지만 비동기처리가 가능한 것이다. 

 

 

 

 

 

 

2. Callback함수

특정 함수에 매개변수로 전달된 함수.

 

이 콜백함수는 전달받은 함수 내에서 호출되게 된다. 예상할 수 없는 비동기처리 연산을 해결하기 위해 콜백함수를 쓴다. 예시로 든 코드는 아래 블로그를 참조했다.

 

참조한 블로그!

자바스크립트 비동기 처리와 콜백 함수

//콜백함수 -> getData함수의 매개변수로 들어감 
function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // getData내에서 콜백함수를 실행  
	});
}

//getData를 호출하며 Callback함수의 내용도 함께 지정 
getData(function(tableData) {
	console.log(tableData); 
});

 

나는 콜백함수를 쓸 때 익명함수의 형태로 쓰기보단 기명함수의 형태로 썼기 때문에 이렇게 익명함수로 쓰는 게 신기해서 가져왔다!

 

이 형태라면 확실히 콜백지옥이 만들어질 수 있겠거니...라는 생각이 들었다.

 

콜백 지옥이란, 콜백함수를 익명함수로 전달할 때 들여쓰기가 많아지며 가독성이 떨어지는 코드를 일컫는 단어다.

이를 해결하기 위해 ES7에서 promise, ES8에서 async & await가 나왔다.

 

(다들 ES6만 엄청 얘기해서... promise와 async도 ES6문법인 줄 알았는데 그게 아닌가보다.)