[JS] 동기와 비동기

# 동기(Synchronous)

프로그램의 실행 흐름이 순차적으로 진행

즉, 하나의 작업이 완료된 후에 다음 작업이 실행되는 방식

 

# 비동기(Asynchronous)

프로그램의 실행 흐름이 순차적이지 않으며,

작업이 완료되기를 기다리지 않고 다음 작업이 실행되는 방식

→ 작업 완료 여부를 신경 쓰지 않고, 동시에 다른 작업들을 수행할 수 있음

기다려주지 않는 것일 뿐, 앞에 일을 안하는게 아님!

 

비동기의 특징

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

---

JavaScript는 Single Thread언어

→ 한번에 한개밖에 못 함, 그럼 어떻게 여러개를 한번에 할 수 있나?

 

# JavaScript Runtime

JavaScript가 동작할 수 있는 환경

JavaScript 자체는 Single Thread이므로 비동기 처리를 할 수 있도록 도와주는 환경이 필요함

보통 브라우저 or Node에서 처리

 

 

 

브라우저 환경에서 JavaScript 비동기 처리 관련 요소를 알아보자

다음과 같은 코드가 있을 때, 어떻게 실행이 될까?

console.log('Hi')

setTimeout(function myFunc() {
	console.log('Work')
}, 3000)

console.log('Bye')

1. 모든 작업은 Call Stack으로 들어간다

2. 오래 걸리는 작업이 들어오면 Web API로 보내서 별도로 처리하도록 한다

3. Web API에서 처리가 끝난 작업들은 바로 Call Stack이 아니라 Task Queue로 들어간다

4. Event Loop가 Call Stack이 비어 있는 것을 체크하고, Call Stack이 빈다면 Task Queue에서 가장 먼저 들어온 애들부터 Call Stack으로 보낸다

 

 

 

각각의 요소들의 역할

1. Call Stack

• 요청이 들어올 때 마다 순차적으로 처리하는 Stack(LIFO)
• 기본적인 JavaScript의 Single Thread 작업 처리

2. Web API

• JavaScript 엔진이 아닌 브라우저에서 제공하는 runtime 환경
• 시간이 소요되는 작업을 처리(setTimeout, DOM Event, AJAX 요청 등)

3. Task Queue

• 비동기 처리된 Callback 함수가 대기하는 Queue(FIFO)

4. Event Loop

• 태스크(작업)가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우엔 잠듦
• 끊임없이 돌아가는 자바스크립트 내의 루프
• Call Stack과 Task Queue를 지속적으로 모니터링
• Call Stack이 비어 있는지 확인 후, 비어있다면 Task Queue에서 대기 중인 오래된 작업을 Call Stack으로 Push

 

---

그럼 이걸로 뭐하지..?

 

# AJAX

= Asynchronous JavaScript + XML

JavaScript의 비동기 구조와 XML 객체를 활용해 비동기적으로 서버와 통신하여 

웹페이지의 일부분 만을 업데이트하는 웹 개발 기술

→ 새로고침 없이 업데이트! 

그리고 XML보다는 요즘은 JSON으로 처리한다

 

XMLHttpRequest객체(= XHR 객체)

서버와 상호작용할 때 사용하며

페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음

 

 

✨Axios

XHR 객체를 서버로 보낼 때 도와주는 HTTP 클라이언트 라이브러리

서버와의 HTTP 요청과 응답을 간편하게 처리할 수 있도록 도와주는 도구

→ 다음글로