[JS] 비동기 깊이 알아보기 :블로킹 vs 논 블로킹, async/await과 Promise

개요

자바스크립트는 싱글스레드 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 이로 인해 블로킹(blocking)이 발생하면 다른 작업이 차단되어 웹 애플리케이션의 성능과 사용성이 저하될 수 있습니다. 이러한 문제를 해결하기 위해 자바스크립트는 비동기 처리를 통한 논 블로킹(non-blocking) 방식을 지원하고 있습니다. 이를 위해 async/await과 Promise가 도입되었습니다.

블로킹 vs 논블로킹

블로킹은 작업이 완료될 때까지 다음 작업이 진행되지 않는 상태를 말합니다. 예를 들어, 네트워크 요청이 끝날 때까지 다음 코드가 실행되지 않는 경우 블로킹이 발생합니다. 이로 인해 웹 애플리케이션의 응답성이 떨어질 수 있습니다.

 

반면, 논 블로킹은 작업이 진행 중일 때도 다음 작업이 계속해서 진행되는 상태를 말합니다. 예를 들어, 비동기로 처리되는 네트워크 요청이 완료되기를 기다리는 동안에도 다른 코드가 실행되면 논 블로킹이 발생합니다. 이로 인해 웹 애플리케이션의 응답성이 향상될 수 있습니다.

 

async/await vs Promise

async/await은 ES2015에서 도입된 비동기 처리를 위한 문법으로, 동기적인 코드 작성을 위해 사용됩니다. async 함수는 비동기 처리를 위한 함수로, 내부에서 await 키워드를 사용하여 Promise 객체가 처리될 때까지 해당 함수의 실행을 일시 중지하고, Promise의 결과를 반환합니다. 이로써 코드를 보다 직관적이고 동기적인 형태로 작성할 수 있습니다. 그러나, async/await은 내부적으로는 논 블로킹 방식으로 동작하며, 다른 코드의 실행을 차단하지 않습니다.

 

Promise는 자바스크립트에서 비동기 처리를 위한 객체로, 비동기 작업의 결과를 나타냅니다. Promise는 비동기 작업을 시작하고, 작업이 완료되면 결과를 반환하는데, 이를 통해 논 블로킹 방식으로 동작할 수 있습니다.

 

Javascript가 싱글스레드임에도 비동기 처리가 가능한 이유

또한, 자바스크립트가 싱글스레드 언어인데도 비동기 처리가 가능한 이유는 자바스크립트의 이벤트 루프(Event Loop) 메커니즘에 있습니다. 자바스크립트는 단일 호출 스택(Call Stack)을 가지고 있지만, 비동기 작업을 위해 Web API (예: setTimeout, XMLHttpRequest, fetch 등)를 통해 백그라운드에서 작업을 처리하고, 작업이 완료되면 콜백 함수를 호출하거나 Promise 객체를 resolve하고 이벤트 큐(Event Queue)에 등록합니다. 이벤트 루프는 계속해서 이벤트 큐를 확인하며, 콜 스택이 비어있을 때 이벤트 큐에 있는 작업을 콜 스택으로 옮겨 실행함으로써 비동기 작업을 처리합니다.

 

따라서, 자바스크립트에서는 비동기 처리를 위해 async/await과 Promise를 사용하여 블로킹을 피하고 논 블로킹 방식으로 동작할 수 있습니다. 이를 통해 웹 애플리케이션의 성능과 사용성을 향상시킬 수 있습니다.