[JavaScript] 자바스크립트의 비동기 처리

학습목표

평소에 api를 호출할 때, async await 구문을 통해 비동기 처리를 하고 있었습니다.

하지만, 매번 비동기 처리에 대해 설명하고자 할 때 명확하고 쉽게 정의하지 못하였습니다.😂

그래서 이번 기회에 자바스크립트의 비동기 처리란 무엇인지 정리하고자 하였습니다.

 

 

---

 

동기와 비동기

먼저, 동기와 비동기의 뜻을 먼저 정의해보도록 하겠습니다.

 

 

• 동기 : 순차적으로 동작하는 방식 (직렬식 수행)
• 비동기 :  비순차적으로 동작하는 방식 (병렬식 수행)

이렇게 단어로 구분한다면 이해하기 쉽게 정의할 수 있습니다.

하지만, 자바스크립트는 동기식 언어에 해당하는데 어떤 상황에서 비동기의 개념이 등장하게 되는지 알아보도록 하겠습니다.

 

간단히 두 개의 예를 들어보도록 하겠습니다.

 

setTimeout() 메소드

console.log("안녕하세요~");

setTimeout(() => {
	console.log("안녕히가세요!");

}, 1000);

console.log("감사합니다~");

순차적으로 실행이 되어야 한다면 기대하는 결과값은 위에서부터 차례대로 출력되어야 합니다.

하지만, setTimeout() 메소드로 인해 실제 결과값은 다음과 같습니다.

안녕하세요~
감사합니다~
안녕히가세요!

 

 

Ajax의 get() 메소드

 

console.log("시작!");

$.get('https://hyundolog.tistory.com/1', function(response) {
	console.log("결과 : ", response);
});

console.log("끝!");

(해당 예시의 get() 메소드 사용 부분은 웹과 통신하는 부분으로만 이해하시면 됩니다.👍)

이또한 순차적으로 실행이 되어야 한다면 기대하는 결과값은 위에서부터 차례대로 출력되어야 합니다.

하지만, setTimeout() 메소드로 인해 실제 결과값은 다음과 같습니다.

시작!
끝!
결과 : {...} // response 내용

 

 

 

---

 

 

비동기 처리

앞선 두 개의 예시를 통해 자바스크립트 코드는 항상 순차적으로 실행될 것이라는 예상에서 벗어난 결과를 얻을 수 있었습니다.

그렇다면, 왜 순차적으로 실행되지 않았으며 순차적으로 실행이 되면 안되는 이유에 대해 알아보도록 하겠습니다.

 

생활속에서 찾을 수 있는 하나의 예를 들어보도록 하겠습니다.

우리는 빨래를 할때, 세탁기를 돌리고 가동이 종료되기 전까지 세탁기 앞에서 계속 기다리지 않습니다.

세탁기 가동이 되는 동안 밥을 먹기도 하고, 게임을 하기도 합니다.

 

이와 비슷하게, 우리는 특정 웹 페이지에 접속하면 상단의 배너와 중간 위치에 이미지 및 영상이 나오고 수 많은 텍스트들이 채워지는 모습을 쉽게 볼 수 있습니다.

텍스트는 비교적 용량이 낮아 금방 로딩되겠지만, 이미지 및 영상은 로딩이 완료되기까지 다소 시간이 오래 걸릴 수 있습니다.

 

그렇다면, 다음과 같이 코드를 작성하였을 때를 가정하여 설명해보도록 하겠습니다. 

(이하 4개의 메소드가 사전에 정의되어있다고 가정)

this.getBanner();
this.getImages();
this.getVideos();
this.getText();

동기식 처리 컨셉대로라면 배너와 이미지 및 영상이 로딩이 완료되기 전에는 텍스트가 하나도 출력되지 않게 될 것입니다.

사용자에게 이러한 UI/UX를 제공하는것은 많은 불편함을 느끼게 할 것입니다.

 

 

그래서, 이렇게 다양하고 방대한 데이터들을 웹 페이지에 불러오기 위해서는 비동기 처리가 사용됩니다.

이전에 선언된 코드의 종료를 기다리지 않고 동시에 실행하는 로직이 필요한 것입니다.

 

이러한 비동기적 특성으로 인해 원하는 결과를 얻지 못하는 경우가 발생할 수 있습니다.

그래서 비동기 코드를 구현할 시, 특정 코드를 먼저 실행하거나 나중에 실행하는 순서를 정할 필요가 있을 수 있습니다.

쉽게 말해서, 비동기 코드를 동기식으로 사용해야하는 경우를 뜻합니다.

 

자바스크립트는 싱글스레드 기반 언어 및 동기적 언어에 해당되나, 실행되면서 비동기적 특성이 발현됩니다.

한 번에 하나씩이 아닌 여러개씩 처리를 가능하도록 하는 특성을 비동기 처리라고 지칭합니다.

 

다음에는 대표적인 비동기 처리 기법에 대해 자세히 다뤄보도록 하겠습니다.🖐

 

 

---

리뷰

• 자바스크립트는 동기식언어이나, 비동기적 특성을 가지고 있음
• Ajax, Web API 등에 대한 학습 필요