자바스크립트 비동기 처리에 대하여 - 1

 

 

자바스크립트하면 항상 따라다니는 개념 비동기 처리에 대해서 알아보려고 한다. 필자도 여러 블로그들을 참고하면서 공부를 하였는데, 자바스크립트의 동기, 비동기에 대해서 잘못 설명하고 있는 블로그들이 너무 많아서 새롭게 공부를 하고 있는 분들이 혼동을 가질 거 같다. 그런 분들을 위해 실제 코드를 중심으로 글을 작성해서 비동기 처리에 대해 개념을 정리해보려고 한다.

 

동기(synchronous), 비동기(asynchronous)란 ?

동기(synchronous)

요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행하는 것을 동기라고 한다. 쉽게 말해서, 코드가 동작한다고 할 때 코드 한 줄이 완료가 된 후 그 뒤에 코드가 실행되고, 그 뒤에 코드가 완료가 된 후, 그다음 코드가 실행되는 것이 동기적으로 작동하는 코드라고 한다.

비동기(asynchronous)

요청을 보낸 후 응답에 관계없이 다음 동작을 실행하는 것을 비동기라고 한다. 쉽게 말해서, 코드가 동작할 때 시간이 오래 걸리는 코드가 있으면 그 코드와 상관없이 다음 코드가 실행되는 것이 비동기적으로 작동하는 코드라고 한다.

 

 

자바스크립트는 동기적으로 동작? 비동기적으로 동작?

그렇다면 자바스크립트는 코드가 동기적으로 동작할까? 비동기적으로 동작할까?? 이 부분이 공부할 때 많이 헷갈렸다. 아래 이미지를 보면 구글에서 자바스크립트 비동기를 검색해서 나오는 블로그들이다. 어떤 블로그는 자바스크립트가 동기적으로 작동한다고 하고 어떤 블로그는 비동기적으로 작동한다고 한다.

 

구글에 검색하면 나오는 블로그 중 1

구글에 검색하면 나오는 블로그 2

 

 

과연 뭐가 진실일까?? 계속 검색을 하는 것보다 내가 직접 자바스크립트 코드를 실행시켜보기로 했다. 아래 코드를 한번 보자

function testFuc() {
	for (let i = 0; i <= 1000000000; i++) {
   		if(i === 1000000000) console.log("끝")
	}  
	console.log("첫 번째")
}

function init() {
      testFuc()
      console.log("두 번째")
}

init()

 

이 코드가 실행되면 어떤 console.log가 먼저 찍힐까?? 동기적일 때, 비동기적일 때 어떻게 될지 한번 예측해보자 

 

만약 자바스크립트 코드가 동기적으로 동작하게 된다면

init() 함수 실행 -> testFuc() 함수 실행 -> for문 동작 -> for문 완료 후 console.log("끝") -> console.log("첫 번째") -> console.log("두 번째") 이렇게 작동될 것이다. 그러면 아래와 같이 console.log가 찍힐 것이다.

// 끝
// 첫 번째
// 두 번째

 

만약 자바스크립트 코드가 비동기적으로 동작하게 된다면

init() 함수 실행 -> testFuc() 함수 실행 -> for문 동작 -> for문 동작 중  console.log("첫 번째") -> for문 완료 후 console.log("끝") -> console.log("두 번째") 이렇게 작동 될 것이다. 출력되는 것을 보면 아래와 같을 것이다.

// 첫 번째
// 끝
// 두 번째

 

 

실제 결과는?

실제 결과를 보면 동기적으로 동작했을 때와 같은 결과가 나온다. 따라서 결론은 자바스크립트는 기본적으로 동기적으로 동작한다

 

 

 

그렇다면 비동기는 어떤 상황에서 사용되나?

자바스크립트가 기본적으로 동기적으로 작동한다는 것은 위의 내용으로 파악을 하였다. 그렇다면 왜 비동기는 어떤 상황에서 사용되는 것인가?? 다음 예시를 한번 보자.

클라이언트에서 서버로 데이터를 요청하였는데, 해당 데이터 용량이 너무 커서 응답 시간까지 오래 걸린다. 근데 동기적으로 작동하게 되면 그 데이터가 도착할 때까지 다른 코드를 실행하지 못한 채로 기다려야 한다. 

여러분이라면 어떤 웹에 접속했는데, (과장해서) 10초 이상 화면에 아무것도 표시가 되지 않는다면 그 웹을 이용할 것인가?? 이러한 문제점을 해결하기 위해서 해당 데이터를 받아오는 동안 다른 코드를 실행할 수 있게 비동기 작업으로 바꿔줘야 한다.

 

자바스크립트의 비동기 작업

자바스크립트 비동기 작업의 가장 흔한 사례는 webAPI의 ajax, setTimeout(), Event handler, DOM이다. 그 중 다음은 setTimeout()의 예시이다.

function init() {
    console.log("시작")
    setTimeout(() => {
        console.log("끝")
    }, 5000)
    
    console.log("하하")
}

init()

해당 코드를 실행하게 되면 setTimeout은 비동기로 작업이 되기 때문에 setTimeout이 실행되는 동안 다음 코드인 console.log("하하")가 먼저 실행돼서 아래와 같이 출력될 것이다.

// 시작
// 하하 
// 끝

우리가 흔히 자바스크립트를 웹에서 사용하는데 webAPI 덕분에 웹브라우저에서 자바스크립트가 비동기적으로 작동하는 것이다. 

 

하지만 이러한 비동기 작업에도 문제가 있다.

 

 

 

비동기의 문제점?, 비동기 처리??

코드를 비동기로 바꿨는데 또 무슨 문제??라고 생각하실 수 도있다. 다시 한번 비동기의 특성을 살펴보면, 특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 수행하는 것이다. 그런데 그렇게 되면 클라이언트가 서버에 데이터를 요청했을 때, 그 데이터가 다 도착도 하기 전에 화면에 출력하는 코드가 실행되어서 화면에 데이터가 나타나지 않게 된다. 

 

이러한 비동기의 문제를 처리하는 작업이 비동기 처리이다.

자바스크립트의 대표적인 비동기 처리 방법은 콜백 함수, Promise, async await이 있는데 해당 문법은 다음 포스팅에서 자세히 다뤄보도록 하겠다.