[Promise는 도대체 뭔가요?]

비동기 처리를 간편하게 제공할 수 있는 자바스크립트에 내장된 녀석임.

이전의 자바스크립트는 주로 이벤트 처리나 서버 통신과 같은 비동기 처리를 위해 콜백함수를 사용했는뎁쇼

Q. 네? 잠시만요. 콜백함수(Callback function)가 뭔데요?

정의 : 함수에 파라미터로 들어가는 함수
용도 : 안정적이고 순차적으로 실행하고 싶을 때 씀

document.querySelector('button').addEventListener('click', function(){
	// 버튼 클릭시 이 안에 내용이 실행된다.
})

위의 예시는 순차적으로 button을 클릭했을 때 안에 있는 내용을 처리하는데요. 이때 function() <- 이게 바로 addEventListener() 함수에 붙은 콜백함수임

[콜백함수 만드는 법]

function first(파라미터){
	파라미터()
}

function second(){
	
}

first(second) 
// first 함수 안의 코드 실행해주세요~ 근데 파라미터에 second함수 집어넣어서요

그래서 다시 말하자면, 이러한 콜백 같은 경우 함수의 처리 순서를 보장하기 위해서 함수를 중첩하게 사용되는 경우가 발생해 콜백 지옥에 빠질 수 있으며, 코드가 난잡해져 에러처리가 힘들어질 수 있는 단점이 있어요.

Q. ㅠㅠ? 콜백 지옥(Callback Hell)은 또 뭔데요;;

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

// step1 다음에 stpe2 실행하고 그다음 step3 실행하고 .. step999 실행할거야

웹서비스를 개발하는 경우 서버에서 데이터를 받아오고 화면에 표시하기까지 수많은 비동기 처리를 하게되면서 위와같은 콜백지옥 현상이 나타나게되는걸 콜백지옥이라고 해요.

이러한 콜백 함수의 단점을 보완하여 비동기 처리에 사용하는 객체를 프로미스(Promise)라고 합니다.

Q. 아 님아 ;; 그래서 프로미스가 뭔데요;;; 한줄 요약 좀

콜백과 프로미스는 둘 다 자바스크립트에서 비동기처리를 위해서 사용되는 패턴인데, 콜백에 단점이 존재해서 나온게 프로미스이고 ES6부터 정식 채택되어 사용중임 ㅋ

[Promise의 상태]

프로미스는 말 그대로 '약속'입니다. 말그대로 서버와의 통신을 약속하는건데욥
예를 들어 ajax로 설명드리겠습니다. (ajax는 비동기로 서버랑 통신하는 애임)

console.log(1) // 첫번째로 실행
fetch('https://jsonplaceholder.typicode.com/posts', {
.then(((response) => {
	return response.json();
})
.then((결과) =>{
	console.log('결과');
})
.catch(() => {
	console.log('에러')
})
.finally(() => {
	console.log('처리 되면 무조건 나와라')
})
// ajax가 마지막으로 수행된다.

console.log(2) // 두번째로 실행

1. then은 fetch를 통해서 결과가 성공했을 때 전달된 호출 결과가 나오도록 약속한거임.

2. catch는 에러났을때임

3. finally는 성공하든 실패하든 처리가 완료되면 항상 나오게 하는거임

step1()
.then((res) => step2(res))
.then((res) => step3(res))
.then((res) => step4(res))

암튼 이렇게 프로미스를 사용하면 콜백지옥에서 탈출할 수 있다~ (참고로 프로미스가 연결연결연결 되는 것을 프로미스 체이닝이라고 한다.)

참고
w3c callback
mdn promise