하얀 코딩

[JavaScript - 19] 동기 / 비동기 본문

JavaScript

[JavaScript - 19] 동기 / 비동기

whitecoding 2023. 1. 11. 21:35

동기(synchronous)

자바스크립트의 동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것’을 의미합니다. 

주문 즉시 붕어빵을 만들어 주는 노점상이 있다고 생각해봅시다.

 동기적으로 운영되는 노점상의 경우 붕어빵을 주문받은 후 주문받은 붕어빵이 다 만들어지고 난 후에야 

다음 손님의 주문을 받고 붕어빵을 제작하게 됩니다. 이 경우 여러 손님의 주문을 소화하기에는 무리가 있습니다.

[ 그림 ] 동기의 개념 이해하기


비동기(asynchronous)

자바스크립트의 비동기 처리는 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것’을 의미합니다. 앞선 예시로 든 노점상이 비동기적으로 운영되는 경우 여러 손님의 주문을 받으면서 붕어빵을 제작하게 되고 완성되는 대로 손님에게 붕어빵을 제공하게 됩니다. 동기적으로 운영하는 경우보다 훨씬 효율적입니다.

[ 그림 ] 비동기의 개념 이해하기


JavaScript는 싱글 스레드 기반으로 동작하는 언어입니다. 따라서 동기적으로 작동하게 됩니다.

그러나 방금까지 JavaScript에서도 비동기 처리가 가능하다고 했는데, 어떻게 된 걸까요?

 

JavaScript가 작동하는 환경(런타임)에서 비동기 처리를 도와주기 때문에 특별한 작업 없이 비동기 처리를 할 수 있는 것입니다.

자세한 내용은 나중에 집중적으로 다룰 예정입니다! 지금은 동기 / 비동기 자체 개념만 이해 해주세요!