클라이언트와 서버가 어떻게 통신하는 지를 정의한 것이 바로 http이다.
AJAX는 웹페이지에서 동적으로 서버 데이터를 주고 받는 기술.
대표 예 -- XHR
XML은 HTML같은 마크업 언어.
json은 JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
비동기 프로그래밍(콜백, Promise, async/await)
Callback 함수를 써서 서버에서 가져온 데이터를 활용. 그런데 이게 계속 반복되면 수십개의 콜백이 겹치는 콜백 지옥이 될 수 도 있다.
따라서 promise가 등장.
Promise
Promise는 어떤 작업의 중간상태를 나타내는 오브젝트 입니다.
— 미래에 어떤 종류의 결과가 반환됨을 promise (약속) 해주는 오브젝트라고 보면 됩니다.
Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.
출저 - MDN
Promise 객체 생성 방법
Promise는 인스턴스 생성처럼 new 키워드를 통해 하나의 객체를 생성한다.
객체이기 때문에 변수 등에 할당하여 활용이 가능하다.
Promise는 하나의 콜백함수(여기서의 의미는 비동기 콜백함수가 아님)를 인자로 받는다.
new Promise가 생성되는 즉시
인자로 받아지는 함수도 즉시 실행되며,
그래서 이 함수를 executor, 실행자 함수라고도 부른다.
해당 실행자(executor) 함수는 또 다시 2개 함수(resolve, reject)를 인자로 받는다.
실행자 함수가 실행되면, 함수 내부에서는 비동기 작업이 이루어지고
만약 비동기 작업이 성공했을 시에는 그 성공 값을 인자로 resolve 함수를 호출하고,
만약 비동기 작업이 실패했을 시에는 그 실패 값을 인자로 reject 함수를 호출한다.
const successPromise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Success");
}, 3000);
}); // 비동기 작업 완료 후, 성공 값 "Success"를 가진 프로미스 객체(인스턴스)를 생성하고 변수에 할당
const failurePromise = new Promise(function (resolve, reject) {
setTimeout(function () {
reject(new Error("Request is failed"));
}, 3000);
}); // 실패 값 new Error("Request is failed")를 가진 프로미스 객체(인스턴
Promise 객체의 3가지 상태
Promise 객체는 반드시 아래 3가지 상태중 한가지 상태를 갖는다.
대기(pending): 이행하거나 거부되지 않은 초기 상태, 즉 약속된 결과 값이 반환되지 않은 상태
이행(fulfilled): 연산이 성공적으로 완료된 상태.
거부(rejected): 연산이 실패한 상태
