비동기 통신이란?

1. 비동기(Asynchronous)

• 프로세스의 완료를 기다리지 않고, 동시에 다른 작업을 처리하는 방식
• 엄밀히 말하면 '동시'라기 보다는 비(非)동기적으로 처리하는 것. 한 작업이 완료될 때까지 다른 작업을 기다리지 않고 다음 작업을 실행하는 것을 의미한다.
• 예를 들어, gmail에서 메일 전송을 누르면 목록 화면으로 전환되지만 실제로 메일을 보내는 작업은 병렬적으로 뒤에서 처리된다.

 

■ 동기(synchronous)적 처리란?
- 모든 일을 순서대로 하나씩 처리하는 것.
- 즉, 이전 작업이 끝나면 다음 작업을 시작한다는 의미.
- 예를 들어, 요청과 응답을 동기식으로 처리한다면 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리할 것이다.

 

• 특히 자바스크립트는 싱글스레드로 작동하기 때문에, 작업의 효율을 높이기 위해 비동기 처리를 적절하게 사용하는 것이 중요하다.

 

■  싱글스레드?
- '스레드'란 작업을 처리할 때 실제로 작업을 수행하는 주체.
- 멀티 스레드라면 업무를 수행할 수 있는 주체가 여러 개, 싱글 스레드라면 업무를 수행할 수 있는 주체가 하나라는 의미.
- 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 일만 수행할 수 있다.

 

2. 비동기 처리를 사용하면 좋은 점

"사용자 경험"

• 동기식 처리는 특정 로직이 실행되는 동안 다른 로직 실행을 차단하기 때문에 마치 프로그램이 응답하지 않는 듯한 사용자 경험을 만들게 된다.
• 비동기로 처리한다면 먼저 처리되는 부분부터 보여줄 수 있으므로 사용자 경험에 긍정적인 효과를 볼 수 있다.

 

3. 브라우저에서 비동기 처리는 어떤 과정으로 이루어질까?

■ 브라우저랑 자바스크립트 관계?

브라우저는 자바스크립트 엔진을 내장하고 있고, 이 엔진을 통해 자바스크립트 코드를 실행할 수 있다.
일반적으로 브라우저는 웹페이지의 스크립트 태그 내에 포함된 자바스크립트 코드를 인식하고, 해당 코드를 자바스크립트 엔진으로 전달하여 실행한다.

※ 브라우저는 각각 다른 자바스크립트 엔진을 사용할 수 있다. 예를 들어 google chrome은 V8엔진을 사용하고, Mozilla Firefox는 SpiderMonkey 엔진을 사용한다. 이러한 엔진들은 자바스크립트 코드를 기계어로 변환하고 실행하는 역할을 담당한다.

자바스크립트 엔진은 브라우저의 다른 구성 요소와 상호작용하며, 웹페이지의 DOM 요소를 조작하고 이벤트를 처리하는 등의 작업을 수행한다.

 

1. 기본적으로 모든 작업은 브라우저의 Call Stack으로 들어가서 처리된다.
2. 오래 걸리는 작업(비동기 작업)은 Call Stack에서 처리되지 않고, Web API 함수로 별도로 처리된다.
   (Web API 가 맡게 되는 작업들은 실행을 시작한 후에 즉시 결과를 반환하는 것이 아니라, 작업이 완료된면 콜백함수를 호출하거나 Promise 객체를 이용하여 처리 결과를 전달한다.)
3. Web API에서 처리가 완료된 작업은 Task Queue로 이동한다.
4. 'Event Loop'는 Call Stack이 비어있는지를 지속적으로 확인한다. 그리고 Call Stack이 비면, Task Queue에서 가장 오래된 작업(큐에 가장 먼저 들어간 작업)을 가져와서 Call Stack으로 이동시킨다.

이 과정을 계속 반복하여 비동기 작업들이 순차적으로 처리되는 것이 보장된다.

 

■ 콜스택?(Call Stack) 웹API?(Web API)

Call Stack : 실행 중인 함수의 호출 정보를 저장하는 스택. 함수 실행 중에 다른 함수가 호출되면 해당 함수의 호출 정보가 Call Stack에 추가되고, 함수 실행이 완료되면 호출 정보가 스택에서 제거된다.

Web API : 브라우저에서 제공하는 비동기 작업을 수행하는 함수들의 모음. 이 함수들은 자바스크립트 엔진과는 별도로 구현되어 있으며, 주로 브라우저 환경에서 실행된다. setTimerout 등의 타이머 함수나 AJAX 요청 함수, 이벤트 핸들러 함수 등이 여기에 포함된다.

 

4. 비동기 로직을 구현하기 위한 자바스크립트의 여러가지 방법

1. 콜백함수
   
   - 비동기 작업이 완료되었을 때 호출되는 함수를 콜백으로 전달하는 방식
   - 전통적으로 자바스크립트의 비동기 로직 구현 방법이었으나, 비동기 작업의 순서와 제어가 어려워지고, 콜백 지옥(Callback Hell)이라는 코드의 복잡성과 가독성 문제가 발생할 수 있어 아래의 새로운 비동기 처리 방식이 도입되었다.
2. Promise 객체
   
   - 비동기 작업의 결과를 나타내는 객체로서, 성공(resolve) 또는 실패(reject) 상태를 가진다.
   - .then() 과 .catch() 메서드를 사용하여 성공 또는 실패에 대한 처리를 할 수 있다.
3. async/await 구문
   
   - async 함수 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있다.
   - await 키워드 뒤에는 Promise 객체가 오며, 해당 Promise가 처리되기를 기다린다.(당연히 .then()과 .catch()를 사용하여 처리할수 있다.)
4. Generator Functions
   
   - 함수 실행을 일시 중지하고 재개할 수 있는 특별한 함수
   - yield 키워드를 사용하여 비동기 작업을 일시 중지하고, 다음 작업을 수행할 때까지 기다릴 수 있다.
   - 외부 코드에서 Generator 함수를 제어하기 위해, .next() 메서드를 사용할 수 있다.

 

비동기 처리를 하면 좋은 점에 대해 chat gpt 에게 물어봤더니, 비동기 처리를 통해 '블로킹' 작업을 회피하고, 여러 작업을 동시에 처리할 수 있다. 는 답변이 돌아왔다. 블로킹은 또 뭐지.

■ 블로킹(Blocking)?
특정 작업이 완료될 때까지 다른 작업이나 코드 실행이 중지되는 상태를 말한다. 블로킹은 해당 작업이 완료될 때까지 제어 흐름이 멈추는 것을 의미한다.

그냥 들었을 때, 동기 작업은 블로킹이 발생하고, 비동기 작업은 블로킹이 발생하지 않을 것 같지만(논블로킹) 절대적인 것은 아니라고 한다. 현시점에서 단지 밀접한 연관이 있다 정도로만 이해했다.

 

 

참고 resource >>

주니어 웹 개발자가 알아야 할 ‘비동기 통신’ | 요즘IT