비동기 JavaScript

• Synchronous (동기)

프로그램의 실행 흐름이 순차적으로 진행 → 하나의 작업이 완료된 후에 다음 작업이 실행된다.

= 앞의 작업이 끝나야 뒤 작업이 가능

 

• Asynchronous (비동기)

프로그램의 실행 흐름이 순차적이지 않으며, 작업이 완료되기를 기다리지 않고 다음 작업을 실행하는 방식, 동시에 다른 작업들을 수행할 수 있다.

특징 : 병렬적 수행 + 당장 처리를 완료할 수 없고 시간이 필요한 작업들은 별도로 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리

 

• Thread

작업을 처리할 때 실제로 작업을 수행하는 주체

javascripts 는 Single Thread 언어로 한번에 하나의 일만 수행할 수 있다.

 

• 브라우저 환경의 자바 스크립트 비동기 처리 관련 요소

자바 스크립트 엔진의 Call Stack

Web API

Task Queue

Event Loop

1. Call Stack
   요청이 들어올 때마다 순차적으로 처리하는 스택
   기본적인 자바 스크립트의 single thread 작업 처리
2. Web API
   자바 스크립트 엔진이 아닌 브라우저에서 제공하는 runtime 환경
   시간이 소요되는 작업을 처리한다. (setTimeout, event, 비동기 요청 등)
3. Task Queue
   비동기 처리된 콜백 함수가 대기하는 큐
4. Event Loop
   작업이 들어오길 기다렸다가 들어오면 이를 처리하고, 태스크가 없을 땐 잠드는, 자바스크립트 내 루프 Call stack 과 Task Queue를 지속적으로 모니터링한다.
   Call stack이 비어있는지 확인 후 비어있으면 Task Queue에서 대기 중인 오래된 작업을 Call stack 으로 Push 한다.

 

• Ajax

XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹 페이지를 구성하는 프로그래밍 방식

비동기적인 웹 애플리케이션 개발을 위한 기술

브라우저와 서버 간의 데이터를 비동기적으로 교환하는 기술

페이지 전체를 새로고침 하지 않고도 동적으로 데이터를 불러와 화면을 갱신하도록 한다.

= 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 업데이트한다.

→ 웹 페이지 일부가 다시 로드되는 동안에도 코드가 계속 실행되어 비동기식으로 작업할 수 있다.

 

• XMLHttpRequest 객체 (=XHR)

서버와 상호작용할 때 사용하는 객체

페이지의 새로고침 없이도 데이터를 가져올 수 있다.

 

특징 :

자바 스크립트를 사용하여 서버에 HTTP 요청을 할 수 있는 객체

브라우저와 서버 간의 네트워크 요청을 전송할 수 있다.

사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있다.

 

• Axios

자바 스크립트에서 사용되는 HTTP 클라이언트 라이브러리

클라이언트와 서버 사이에 HTTP 요청을 만들고 응답을 처리하는 데 사용된다.

브라우저를 위한 XHR 객체를 생성하고 Promise 기반의 비동기 요청을 처리한다.

 

• Promise 객체

자바 스크립트에서 비동기 작업을 처리하기 위한 객체

비동기 작업의 성공 또는 실패와 관련된 결과, 값을 나타낸다.

 

then ( ) :

요청한 작업이 성공하면 callback 실행, 이전 작업의 성공 결과를 인자로 전달받는다.

 

catch ( ):

앞의 then() 이 하나라도 실패하면 callback 실행 (남은 then 은 중단)

이전 작업의 실패 객체를 인자로 전달 받는다.

 

• 비동기 처리의 단점

작업이 완료되는 순서에 따라 처리하다보니 코드의 실행 순서가 불명확하다.

 

⇒ 비동기 콜백 :

비동기적으로 처리되는 작업이 완료되었을 때 실행되는 함수

비동기 작업을 순차적으로 동작할 수 있게 한다.

→ 작업의 순서, 동작을 제어하거나 결과를 처리하는데 사용

but. 콜백 함수의 반복으로 인해 코드가 복잡해지는 콜백 지옥이 발생 가능

 

⇒ Promise : 자바 스크립트에서 비동기 작업의 결과를 나타내는 객체

비동기 작업이 완료되었을 때 결과 값을 반환하거나, 실패 시 에러를 처리할 수 있는 기능을 제공한다.