JavaScript - AJAX, Asynchronous (비동기)

*️⃣AJAX

• Asynchronous JavaScript And XML (비동기식 JavaScript와 XML)
• 서버와 통신하기 위해 XMLHttpRequest 객체를 활용
• JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음
  • [참고] AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라 는 장점 때문에 JSON을 더 많이 사용함

|특징

• 페이지 전체를 reload(새로 고침)를 하지 않고서도 수행되는 “비동기성”
  • 서버의 응답에 따라 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음
• AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줌

1. 페이지 새로 고침 없이 서버에 요청
2. 서버로부터 데이터를 받고 작업을 수행

|XMLHttpRequest 객체

• 서버와 상호 작용하기 위해 사용되며 전체 페이지의 새로 고침 없이 데이터를 받아 올 수 있음
• 사용자의 작업을 방해하지 않으면서 페이지 일부를 업데이트 할 수 있음
• 주로 AJAX 프로그래밍에 사용
• 이름과 달리 XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있음
• 생성자
  • XMLHttpRequest()

|XMLHttpRequest 예시

• console에 todo 데이터가 출력되지 않음
• 데이터 응답을 기다리지 않고 console.log() 를 먼저 실행했기 때문

//옛날에 쓰는 방식임..
const request = new XMLHttpRequest()
const URL = '<https://jsonplaceholder.typicode.com/todos/1/>'

request.open('GET',URL)
request.send()

const todo = request.response
console.log(`data: ${todo}`)

*️⃣Asynchronous JavaScript

|동기식

• 순차적, 직렬적 Task 수행
• 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐 (blocking)
•  

<button>버튼<button>
<script>
	const btn = document.querySelector('button')
	btn.addEventListener('click', function() {
		alert('you click me!')
		const pElem = document.createElement('p')
		pElem.innerText = 'sample text'
		document.body.appendChild(pElem)
	})
</script>

버튼 클릭 후 alert 메세지의 확인 버튼 누를 때 까지 문장이 만들어 지지 않음!

|비동기식(Asynchronous)

• 병렬적 Task 수행
• 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐 (non-blocking)
•  

const request = new XMLHttpRequest()
const URL = '<https://jsonplaceholder.typicode.com/todos/1/>'

request.open('GET',URL)
request.send()

const todo = request.response
console.log(`data: ${todo}`)

• 요청을 보내고 응답을 기다리지 않고 다음 코드 실행.
• 결과적으로 변수 todo에 응답 데이터 할당되지 않고 빈 문자열 출력
• JavaScript는 single threaded기 때문에 기다리지 않는 방식으로 동작

|왜 비동기식을 사용하는가? === “사용자 경험”

• 매우 큰 데이터를 동반하는 앱이 있다고 가정
• 동기식 코드라면 데이터를 모두 불러온 뒤 앱이 실행됨
	• 즉, 데이터를 모두 불러올 때 까지는 앱이 모두 멈춘 것처럼 보임
	• 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 것 같은 사용자 경험을 제공
• 비동기식 코드라면 데이터를 요청하고 응답 받는 동안, 앱 실행을 함께 진행함
	• 데이터를 불러오는 동안 지속적으로 응답하는 화면을 보여줌으로써 더욱 쾌적한 사용자 경험을 제공
• 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행됨

|Threads란?

• 프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스
• 각 thread(스레드)는 한 번에 하나의 작업만 수행할 수 있음
• 예시) Task A → Task B → Task C
  • 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야 함
  • 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한 번에 여러 가지 일을처리할 수 있음

|“JavaScript는 single threaded 이다.”

• 컴퓨터가 여러 개의 CPU를 가지고 있어도 main thread라 불리는 단일 스레드에서만 작업 수행
• 즉, 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
• 이 문제를 해결하기 위해 JavaScript는

1. 즉시 처리하지 못하는 이벤트들을 **다른 곳(Web API)**으로 보내서 처리하도록 하고,
2. 처리된 이벤트들은 처리된 순서대로 **대기실(Task queue)**에 줄을 세워 놓고
3. Call Stack이 비면 **담당자(Event Loop)**가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

|Concurrency model

• Event loop를 기반으로 하는 동시성 모델(Concurrency model)

1. Call Stack
2. 요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조
3. Web API (Browser API)
   1. JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
   2. setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리
4. Task Queue (Event Queue, Message Queue)
   1. 비동기 처리된 callback 함수가 대기하는 Queue(FIFO) 형태의 자료
   2. main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지
5. Event Loop
   1. Call Stack이 비어 있는지 확인
   2. 비어 있는 경우 Task Queue에서 실행 대기 중인 callback 함수가 있는지 확인
   3. Task Queue에 대기 중인 callback 함수가 있다면 가장 앞에 있는 callback 함수를 Call Stack으로 push

console.log('Hello SSAFY!') 
setTimeout(function(){
    console.log('I am from setTimeout')
}, 10000)

console.log('Bye SSAFY!')

Call Stack에 먼저 console.log('Hello SSAFY!') 가 들어가 실행된 후 비워진다.
그 후 setTimeout()이 들어가지만, setTimeout()의 경우 
AJAX로 데이터를 가져오는 시간이 요소되는 일들을 Web API로 보낸다.
그리고 Call Stack에 console.log('Bye SSAFY!')이 실행된 후 비워진다.
Web API로 보내진 setTimeout()은 Task Queue로 보내지는데, 
Event Loop가 Call Stack에 console.log('Bye SSAFFY!')가 실행후 비워지는 걸 확인 후 
Call Stack에 setTimeout()을 push해준다.

//실행결과
Hello SSAFY!
Bye SSAFY!
I am from setTimeout

|Zero delays

• 실제로 0ms 후에 callback 함수가 시작된다는 의미가 아님
• 실행은 Task Queue에 대기 중인 작업 수에 따라 다르며 해당 예시에서는callback 함수의 메시지가 처리되기 전에 ‘Hi’와 ‘Bye’가 먼저 출력됨
• 왜냐하면 delay(지연)는 JavaScript가 요청을 처리하는 데 필요한 최소 시간이기 때문(보장된 시간이 아님)
• 기본적으로 setTimeout 함수에 특정 시간 제한을 설정했더라도 대기 중인 메시지의 모든 코드가 완료될 때까지 대기해야 함

|순차적인 비동기 처리하기

• Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요 (즉, 실행 순서 불명확)
• 이를 해결하기 위해 순차적인 비동기 처리를 위한 2가지 작성 방식

1. Async callbacks • 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정된 함수 • 예시) addEventListener() 의 두 번째 인자
2. promise-style • Modern Web APIs에서의 새로운 코드 스타일 • XMLHttpRequest 객체를 사용하는 구조보다 조금 더 현대적인 버전