안녕하세요🤗

이번시간에는 Javascript 의 비동기 처리에 대한 내용과 함께 동기적 처리, 비동기적 처리란 무엇인지, 그리고 작업을 비동기적으로 처리하려면 어떻게 해야하는지에 대한 내용을 배워보도록 하겠습니다.

동기적? 비동기적?

자바스크립트의 비동기 처리 에 대해 배우려면, 먼저 동기적 처리란 무엇이고 비동기 처리란 무엇인지에 대해 알고있어야 합니다.

먼저 자바스크립트의 동기적 처리에 대해 알아보도록 하겠습니다.

동기적 처리

동기적 처리란, 하나의 작업이 실행되는 동안은 다른 작업을 동시에 하지 않는 방식으로, 다시 말해 하나의 작업이 끝날 때 까지는 다른 작업을 실행하지 못하고, 앞선 작업이 끝나야 다음 작업을 할 수 있는 방식을 말합니다.

지금까지 우리가 예시로 들었던 코드들은 모두 동기적으로 작동했는데요,

console.log("a");
console.log("b");
console.log("c");

위의 코드 또한 작성된 코드의 순서대로, 다음과 같이 출력됩니다.

a
b
c

위와 같이 출력이 되는 이유가 바로 자바스크립트 코드가 동기적으로 처리 되었기 때문입니다.

비동기적 처리

그렇다면 비동기적 처리란 무엇일까요?

비동기적 처리는 동기적 처리와는 반대로, 어떠한 작업이 끝나길 기다리지 않고, 그 다음 작업도 동시에 진행하는 방식을 뜻합니다.

위의 그림처럼 어떠한 일을 동기적으로 처리하게 되면, 비동기적으로 처리했을 때 보다 훨씬 더 많은 시간이 걸리게 되는 것을 알 수 있습니다.

자바스크립트의 비동기

자바스크립트는 기본적으로 동기적으로 작동합니다.

위에서도 언급했듯이 지금까지 우리가 예시 코드로 학습했던 모든 코드들은 작성된 순서대로, 즉 동기적으로 작동했습니다.

그렇다면, 자바스크립트 코드를 비동기적으로 처리하려면 어떻게 작성해야할까요?

자바스크립트에서는 가장 쉽게 비동기적 처리를 연습해 볼 수 있는 대표적인 내장함수가 있습니다.

바로 setTimeout 이라는 내장함수 인데요, 한 번 사용해보겠습니다.

setTimeout(() => {
    console.log("5초만 기다리세요");
}, 5000);

위의 코드를 실행시켜보겠습니다.

실행 결과 5초가 지난 후에 "5초만 기다리세요" 문장이 콘솔창에 출력되는 것을 확인할 수 있습니다.

setTimeout 함수는 콜백함수, ms단위의 시간 이렇게 2개의 파라미터를 입력받는 함수입니다.

위에 작성한 코드를 살펴보면, "5초만 기다리세요" 라는 문장을 출력하는 콜백함수 1개와 5000ms, 즉 5초를 파라미터로 받은 것을 볼 수 있습니다.

결론적으로, setTimeout 함수는 파라미터로 입력받은 시간만큼 기다렸다가, 파라미터로 입력받은 콜백함수를 실행시키는 함수입니다.

그럼, 이번에는 setTimeout 함수를 호출하고, 바로 아래 다른 문장을 출력하는 코드를 작성해보겠습니다.

setTimeout(() => {
    console.log("5초만 기다리세요");
}, 5000);

console.log("끝!");

끝!
5초만 기다리세요

위의 코드를 실행해보면, 먼저 호출한 setTimeout 함수의 console보다 맨 아래 작성한 console이 먼저 출력된것을 볼 수 있는데요,

그 이유는 바로 setTimeout함수에 있는 콜백함수가 실행 될 때 까지, 즉 5초를 기다리지 않고 바로 아래의 console.log()가 실행되었기 때문입니다.

이렇게 이전 작업이 끝날 때 까지 기다리지 않고 다음 작업이 동시에 진행되는 방식을 비동기적 처리라고 하고, 우리는 setTimeout 함수를 이용해 비동기적으로 처리를 할 수 있습니다.

그럼 우리는 주로 어떤 경우에 작업을 비동기적으로 처리하게 될까요?

가장 대표적인 경우로는 API호출 즉, 서버와의 통신을 떠올릴 수 있습니다.

서버쪽에서 데이터를 받을 경우, API호출을 통해 서버에 요청을하고 서버에서 응답을 할 때까지 기다려야합니다. 그렇기 때문에 우리는 이 작업을 비동기적으로 처리하게 됩니다.

next

이번 시간에는 동기와 비동기의 개념과 차이에 대해 배우면서, 자바스크립트의 내장함수인 setTimeout과 콜백함수를 통한 비동기적 처리 방법을 배워보았습니다.

자바스크립트에서 작업을 비동기적으로 처리하는 방법에는 콜백함수 외에도 다른 여러 방법들이 있는데요, 다음 시간에는 다른 방법들 중 하나인 Promise 객체에 대해 배워보도록 하겠습니다.