[JavaScript] 비동기 처리 개념

1. 자바스크립트는 싱글 스레드?

자바스크립트에서 비동기 처리는 웹 개발에서 중요한 개념이다.

비동기 처리를 이해하면 자바스크립트의 실행 환경과 이벤트 루프, 콜백, 큐의 작동 방식을 이해할 수 있다.

자바스크립트는 싱글 스레드(Single Thread) 기반의 프로그래밍 언어이다.

하나의 스레드에서 모든 작업이 처리하도록 되어있기 때문에, 한번에 하나의 작업만 처리할 수 있다.

이렇게 한번에 하나의 작업만 처리하는 것을 동기적 처리 방식이라고 한다.

스레드(Thread)는 동시에 여러작업을 진행하는 기능이라고 생각하면 편하다.
( 예를 들어, 유튜브를 보며 게임을 하는,, )

** 왜 자바스크립트는 싱글 스레드를 선택했는가?
: 자바스크립트의 본래 기능이 웹페이지의 보조적인 기능을 수행하기 위해 만들었던 것이기 때문이다. 
프로그래밍 난이도가 쉽고 cpu와 메모리를 적게 사용하며, 다른 페이지에서 동시성 문제를 일으키지 않는 싱글 스레드를 선택했다.

- 자바스크립트는 싱글 스레드인가?(링크)

 

2. 동기적 처리 방식 / 비동기적 처리 방식

이렇게 동기적 처리 방식을 사용하면 여러가지 작업완료 시간에 영향을 주거나 혹은 앞선 코드에 발생한 오류를 처리하지 못할 경우 이후의 모든 작업들이 중단될 수 있다. (에러 처리를 못해서 마주하게되는 하얀 화면)

하지만 비동기 처리 과정을 통한다면 코드의 실행을 차단하지 않고, 백그라운드에서 작업을 수행한 후 작업의 결과에 따라 특정 코드를 실행할 수 있다.

동기(synchronous) : 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식.
→ 작업이 완료되기 전까지 다음 코드의 실행을 멈추고 기다린다.
이러한 방식은 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다.

비동기(asynchronous) : 어떤 작업이 실행할 때 그 작업이 완료되지 않더라도 다음 코드를 실행하는 방식.
→ 작업이 완료되지 않았더라도 결과를 기다리지 않고 다음 코드를 실행한다.
이러한 방식은 작업이 오래 걸리는 경우 시간을 절약하고, 병렬적인 작업 처리가 가능하다.

< 비동기 처리의 장점 >

1. 웹 페이지 반응성 향상 : 병렬처리로 향상된 속도를 통해 사용자의 요청에 빠르게 반응할 수 있다.

2. 네트워크 통신 : 동기처리를 할 경우, 응답을 기다리는 동안 다른 작업을 수 행할 수 없다. 비동기적으로 데이터를 받아오는 것이 웹 페이지의 성능을 향상시키는데 도움이 된다.

3. 병렬처리 : 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다. 이를 통해 시간이 오래 걸리는 작업을 병렬적으로 처리할 수 있으며, 결과적으로 전체 작업 시간을 단축시킨다.

4. 에러처리 : 비동기적으로 처리할 때 에러가 발생하면 해당 에러를 쉽게 처리할 수 있다. 에러 발생 시, 에러를 처리할 수 있는 콜백 함수를 실행하거나, 에러를 캐치하여 처리할 수 있어 프로그램의 안정성을 높힐 수 있다.

 

3. Promise / Async / Await 의 등장

ES6 이전의 자바스크립트에서는 콜백함수를 사용하여 비동기 처리를 구현했다.

하지만 콜백함수를 사용한 비동기 처리는 콜백지옥과 같은 다양한 문제를 발생시켰고, 이러한 문제를 해결하기 위해 ES6부터 Promise 가 도입된 것이다.

ex) 콜백지옥 :
이벤트 처리나 서버통신 같은 작업을 구현할 경우 변수로 넘겨지는 콜백 함수가 감당하기 어려울 정도로 많아지는 현상. 콜백지옥이 발생할 경우 코드의 가독성과 유지보수성이 저하된다.

콜백 함수란?

 

Promise는 비동기 작업의 성공 또는 실패한 결과를 나타내는 객체로, 체이닝(chain)을 지원한다.

함수로 처리과정을 진행할 경우 끝없이 안으로 들어가는 콜백지옥을 마주하지만 Promise의 경우 체이닝을 통해 보다 직관적으로 실행 코드를 작성할 수 있다.

따라서 Promise를 사용하여 비동기 처리를 할 경우, 보다 쉽고 가독성이 높다.

이러한 이유로 현대의 자바스크립트의 비동기 처리는 주로 Promise를 기반으로 구현된다.

이후 ES2017에서는 비동기 처리를 더욱 간결하게 구현 할 수 있는 async와 await가 등장하여 많이 사용되는 추세이다.

Promise와 async, await는 다음 포스팅에 이어 자세히 설명하도록 하겠다.