AJAX 통신 / 프로미스 / fatch / 클로저

[ AJAX 통신이란? (부분 리로드 가능!! 서버 효율 up!) ]

자바 스크립트를 이용해 이벤트 루프를 통해서 비동기 방식으로 통신을 한다.
ux때문에 무조건!! 비동기 통신을 해야함!!

통신을 내부적으로 받아서 csr을 하려면 무조건! 비동기적이어야함!
(서버 사이드 랜더링을 하면 동기고 비동기고 상관 없음. 근데 서버 부하가...ㅠㅠ)

즉, AJAX 통신이란 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하는 기술
페이지를 새로고침하지 않고도 웹 페이지의 내용을 업데이트 → 동적으로 데이터를 로드

인스타에서
글자나 로고 이런건 먼저 뜨는데(정적), 사진은 늦게 뜨잖아.
최초의 정적인 디자인을 html로 다운받고, 
ajax를 2번 돌린다. ajax1은 텍스트만 받고, ajax2는 이미지만 받는다.

이런 뼈대를 먼저 다운받는 것!

[ AJAX 통신의 과정 ]

1. 요청 보내기
   JavaScript를 사용하여 클라이언트에서 서버로 HTTP 요청을 보냄
   보통 XMLHttpRequest (바닐라 쿼리 객체)객체나 fetch API를 사용하여 생성
   $ajax로도 할 수 있음

2. 요청 처리 
   서버는 요청을 받아들이고 처리한 후, 클라이언트에 응답을 반환
   보통 JSON, XML, HTML 또는 기타 형식의 데이터

3. 응답 처리 
   클라이언트는 서버로부터 받은 응답을 처리
   필요에 따라 페이지의 일부를 업데이트 한다. (부분 리로드)
   이때, 자바 스크립트를 사용하여 DOM을 조작하거나 데이터를 표시

[ async, await ]

JavaScript에서 비동기적인 코드를 보다 간편하게 작성할 수 있도록 도와주는 문법

1. async

함수 선언 앞에 붙여서 해당 함수가 비동기적으로 실행될 수 있도록 지정한다. 
비동기 함수는 동기식(false) 대신 비동기식(true)으로 실행된다. 
이는 비동기 함수가 실행 중에 다른 작업을 수행하거나 대기할 수 있음을 의미

2. await

async 함수 내에서 사용되며, 
비동기 작업의 완료를 기다린 후 다음 코드를 실행할 수 있도록 도와준다.
즉, 함수 내부를 나와서 할 일 없을 때 다시 실행 함.

주로 Promise 객체를 반환하는 비동기 함수나 메서드 앞에 await를 붙여 사용. 
await 키워드가 있는 부분에서 코드 실행이 일시 중지되고, 
해당 Promise가 처리될 때까지 기다린 후 결과값을 받아온다. 
그리고 await 문 이후의 코드가 실행 되는 것! 
이를 통해 비동기적인 작업을 순차적으로 처리할 수 있다.

JavaScript에서 await 키워드는 주로 Promise 객체와 함께 사용. 
await 키워드를 만나면, 코드의 실행이 일시적으로 중지되고 
await 키워드 뒤의 Promise가 처리될 때까지 기다린다. 

이후 Promise가 처리되면, 
await 표현식은 해당 Promise의 결과값을 반환하고 코드의 실행이 다시 시작

[ 비동기적으로 데이터를 다운로드하고 출력하는 예제 ]

await는 promise가 안 들어오고 리얼 데이터가 들어온다. await fetch...
async(=비동기를 뜻함)

async function downdload() {
	let response = await fetch("http://localhost/8080/user");
	let body = await response.json();
	console.log(body);
}  --> await가 있는 이 내부는 동기적으로 실행

download();

alert("안녕");

--> 그러나 전체적으로는 비동기적으로 실행!!

때문에 안녕이 먼저 뜨고 5초 후에 콘솔창에 딱 뜬다

await - 이 자리를 기억해!
내부는 동기적으로 실행

async function download()
async 키워드를 사용하여 비동기 함수를 정의. 이 함수는 비동기 작업을 수행할 것을 나타냄

let response = await fetch("http://localhost/8080/user");:
fetch 함수를 사용하여 "http://localhost/8080/user" 주소로 HTTP 요청을 보냅니다.
"http://localhost/8080/user"는 fetch 함수에 전달되는 URL입니다. 
fetch 함수는 해당 URL로 HTTP 요청을 보내고, 이때 반환되는 값이 Promise!
await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다리고,
응답이 도착하면 그 값을 response 변수에 할당!

-> 해당 주소로 HTTP 요청을 보내는 비동기 작업을 시작하고, 
   작업이 완료되면 응답을 받아와서 처리하라는 의미

let body = await response.json();
response.json() 함수를 사용하여 응답 데이터를 JSON 형식으로 파싱
await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다립니다.
파싱된 JSON 데이터는 body 변수에 할당됩니다.

console.log(body);
body 변수의 값을 콘솔에 출력

download();
앞에서 정의한 download 함수를 호출.
이 함수는 비동기 작업을 수행하고 완료될 때까지 기다립니다.

1. download() 함수가 호출되고, 비동기 작업이 시작됩니다.
2. 서버로부터의 응답을 받을 때까지 await 키워드에 의해 비동기 작업이 일시 중지됩니다.
3. 응답이 도착하면, response 변수에 할당됩니다.
4. JSON 데이터로 파싱하여 body 변수에 할당합니다.
5. body 값을 콘솔에 출력합니다.
6. download() 함수의 실행이 완료되면, 
   다음 줄인 alert("안녕");이 실행되어 경고창이 표시

이렇게 비동기 함수와 await를 사용하면, 
비동기 작업의 완료를 기다린 후 결과를 처리할 수 있다.

코드의 실행이 해당 작업을 만날 때 잠시 멈추는 것을 의미
비동기 작업은 보통 시간이 오래 걸리거나 외부 리소스에 의존하는 작업

[ 프로미스 (Promise) ]

이벤트 루프에 등록된 것을 반드시 처리하는 약속!
비동기 작업을 수행하고 완료되면 처리할 콜백 함수를 지정하는 객체
비동기 작업이 완료되었을 때 해당 작업이 완료된 후에 콜백 함수가 실행

주요 메커니즘

비동기 작업을 수행하는 함수는 새로운 프로미스 객체를 생성하여 반환

프로미스 객체는 resolve와 reject라는 두 개의 함수를 인자로 받음
비동기 작업이 성공적으로 완료 → resolve 함수를 호출하여 프로미스가 이행(fulfilled) 상태 
실패하면 → reject 함수를 호출하여 프로미스가 거부(rejected) 상태

이행 상태에 도달한 프로미스는 .then() 메서드를 사용하여 이후의 처리를 등록
거부 상태에 도달한 프로미스는 .catch() 메서드를 사용하여 오류 처리를 등록

[ fetch 통신 코드 ]

let date = 비동기통신코드() { //실행되려면 3초 걸림
코드
코드
코드
코드
}

값이 들어와야 할 비동기통신코드가 3초 걸리니까 밑에 코드들은 전부 null 값일거잖아.
값이 할당되지 않았으니까 data가 실행되려고 해도 
이미 아래에 있는 코드들이 전부실행이 되어버린 바람에 stack이 날아가서 값도 다 날아가버렸다.

-> stack이 날아가도 지역 변수를 살려두는 방법이 있다. -> fetch
-> 바닐라 자바스크립트에서 쓴다. 라이브러리가 있다.

fetch를 쓰면 return을 null로 안주고, promise라는 객체를 준다
promise객체는.. 마법 같은 산타 할아버지다(?)
(promise는 아직은 사용할 수 없는 어음이라고 생각하면 될 듯)

메모리 공간을 promise가 쥐고있다. 
아직 데이터가 없어서 (통신중이라?) 뭘 줄게 없으니 일단 promise객체를 준다.
시간이 지나면,, promise객체에 마법처럼 데이터가 생겨나는 것(?)

[ 클로저 ]

클로저는 함수가 정의될 때 해당 함수의 외부 변수를 "캡처"하여 기억하고 있는 현상. 
이는 JavaScript에서 함수가 자신이 생성된 환경을 기억하고, 
그 외부 변수에 접근할 수 있도록 하는 메커니즘

클로저를 사용하면 함수 내부에서 외부 변수에 접근하고 수정할 수 있으며, 
이는 함수가 실행되는 동안 변수의 상태를 계속 유지할 수 있는 장점을 제공한다. 
클로저는 주로 비동기 처리, 콜백 함수, 자바스크립트의 모듈 패턴 등 다양한 상황에서 활용된다

[ 캡처링 ]

캡처링은 클로저가 외부 변수를 기억하고 접근하는 현상을 나타내는 용어.
클로저는 캡처링을 통해 외부 변수를 기억하고 활용할 수 있는 기능을 제공

처음에는 글자인 HTML 파일만 가지고 와서 
뷰에 뿌리고 더 오래 걸리는건 AJAX 통신으로 한번 더해서 가지고 와서 추가로 뿌리는거지
그게 클라이언트가 랜더링하는 클라이언트 사이드 랜더링(CSR)

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
AJAX란 무엇인가?