TIL) Callback을 왜 해야하는지, Promise가 생겨난 배경, Callback 함수를 Promise함수로 바꿔보기

📌Language/JavaScript

TIL) Callback을 왜 해야하는지, Promise가 생겨난 배경, Callback 함수를 Promise함수로 바꿔보기

hellohailie 2022. 6. 4. 13:48

👇 우리가 콜백을 해야하는 이유

반복해야할때마다 같은 식을 여러번 써야한다.

setTimeout(() => {
	document.body.style.backgroundColor = 'red';
}, 1000)

setTimeout(() => {
	document.body.style.backgroundColor = 'orange';
}, 2000)

setTimeout(() => {
	document.body.style.backgroundColor = 'yellow';
}, 3000)

setTimeout(() => {
	document.body.style.backgroundColor = 'green';
}, 4000)

setTimeout(() => {
	document.body.style.backgroundColor = 'blue';
}, 5000)

👇 비슷한 역할을 하는 코드를 반복해서 쓰고 있다는 단점이 있다.

첫번째의 1초 후, 두번째의 1초 후 이런식으로 자동으로 돌아가는 프로그램이 필요해!

중첩을 활용해서 쓸 수 있다.

setTimeout(() => {
	document.body.style.backgroundColor = 'red';
    setTimeout(() => {
		document.body.style.backgroundColor = 'orange';
        	setTimeout(() => {
				document.body.style.backgroundColor = 'yellow';
                	setTimeout(() => {
						document.body.style.backgroundColor = 'green';
                        	setTimeout(() => {
							document.body.style.backgroundColor = 'blue';
					}, 1000)
				}, 1000)
		}, 1000)
	}, 1000)
}, 1000)

👇 썼던 코드를 재사용하고, 다른 효과를 주고 싶다면!

추가공부 setTimeout 함수에 대해 알아보기

2022.05.28 - [JavaScript] - TIL) 자바스크립트 비동기와 setTimeout

const delayedColorChange = (newColor,delay,doNext) => {
	setTimeout(() => {
    	document.body.style.backgroundColor = newColor;
        doNext();
    }, delay)
}

delayedColorChange('red',1000,() => {
	delayedColorChange('orange',1000,() => {
    	delayedColorChange('yellow',1000,() => {
        	delayedColorChange('green',1000,() => {
                delayedColorChange('blue',1000,() => {
        		})
        	})
        })
    })
});

👇 시간을 모르는 경우 (가짜 코드이거나 존재하지 않는 함수인 경우)

searchMoviesAPI('amadeus', () => {
	saveToMyDB(movies, () => {
    	// if it works, run this
    }, () => {
    	// if it doesn't work, run this
    })
},() => {
	// if API is down, or request failed
})

⬆️ 이게 일반적인 거다. 데이터베이스에 저장하기가 작동할 수 도 있고,

인터넷이 멈추거나 데이터베이스가 존재하지 않거나 권한이 없거나, 용량이 없다면 작동하지 않는거다.

따라서 두 가지 가능한 결과에 대해 예상해야한다.

몇 초 후 발생할 때까지 알 수가 없다.

결론, 콜백의 중복은 좋지 않지만, 실제로는 하나 이상의 콜백이 있는 경우가 흔하다!

콜백 중복 (콜백 헬)은 불가피하다!!

이런 어려움을 해결하기 위해 나온 것이 바로 Promise와 비동기 함수!!!

Promise는 어떤 연산, 비동기 연산이 최종적으로 완료 혹은 성공했는지 실패했는지 알려주는 객체이다.

const fakeRequestCallback = (url, success, failure) => {
	const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
    	if(delay > 4000) {
        	failure('Connection Timeout :(')
        } else {
        	success(`Here is your fake data from ${url}`)
        }
    }, delay)
}

fakeRequestCallback('books.com', function() {
	console.log('IT WORKED!!')
}, function() {
	console.log('ERROR!!')
})

➥랜덤이기 때문에, 실패, 성공 둘 중에 하나의 결과가 나온다.

추가학습

Math.random()

2022.06.01 - [JavaScript] - TIL) Math.random(), 자바스크립트, 반올림(round), 올림(ceil), 내림(floor)

const fakeRequestCallback = (url, success, failure) => {
	const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
    	if(delay > 4000) {
        	failure('Connection Timeout :(')
        } else {
        	success(`Here is your fake data from ${url}`)
        }
    }, delay)
}

fakeRequestCallback('books.com', 
	function(response) {
	console.log('IT WORKED!!')
    console.log(response)
}, function(err) {
	console.log('ERROR!!', err)
})

➥랜덤이기 때문에, 실패, 성공 둘 중에 하나의 결과가 나온다.

👇 books.com 의 page2 요청도 있다고 가정한다면!

const fakeRequestCallback = (url, success, failure) => {
	const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
    	if(delay > 4000) {
        	failure('Connection Timeout :(')
        } else {
        	success(`Here is your fake data from ${url}`)
        }
    }, delay)
}

fakeRequestCallback('books.com/page1',
  function (response) {
    console.log('IT WORKED!!');
    console.log(response);
    fakeRequestCallback(
      'books.com/page2',
      function (response) {
        console.log('IT WORKED AGAIN!!');
        console.log(response);
      },
      function (err) {
        console.log('ERROR!!(2nd request)', err);
      }
    );
  },
  function (err) {
    console.log('ERROR!!', err);
  }
);

➥ 위 셋 중 하나의 결과가 나온다.

** 두 번째 요청을 보내도록 만들기 위해서는 첫번째 성공 콜백 안에 끼워넣어야한다!

const fakeRequestCallback = (url, success, failure) => {
	const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
    	if(delay > 4000) {
        	failure('Connection Timeout :(')
        } else {
        	success(`Here is your fake data from ${url}`)
        }
    }, delay)
}

fakeRequestCallback('books.com/page1', 
	function(response) {
	console.log('IT WORKED!!')
    console.log(response)
    fakeRequestCallback('books.com/page2',
    	function(response) {
			console.log('IT WORKED AGAIN!!')
    		console.log(response)
            fakeRequestCallback('books.com/page3', 
            	function (response) {
                	console.log('IT WORKED AGAIN (3rd request)!!')
    				console.log(response)
                },
                function (err) {
        			console.log('ERROR!!(3rd request)', err)
            	})
        },
        function (err) {
        	console.log('ERROR!!(2nd request)', err)
        })
}, function(err) {
	console.log('ERROR!!', err)
})

➥ 어디서든 실패하는 순간, 성공 콜백이 실행되지 않아서 다음 요청으로 넘어가지 않고 종료한다.

Promise = 값이나 오류에 대한 최종 결과(약속)이다.

const fakeRequestCallback = (url, success, failure) => {
	const delay = Math.floor(Math.random() * 4500) + 500;
    setTimeout(() => {
    	if(delay > 4000) {
        	failure('Connection Timeout :(')
        } else {
        	success(`Here is your fake data from ${url}`)
        }
    }, delay)
}

const fakeRequestPromise = (url) => {
	return new Promise((resolve,reject) => {
    	const delay = Math.floor(Math.random() * 4500) + 500;
        setTimeout(() => {
        	if(delay > 4000) {
            	reject('Connection Timeout :(')
            } else {
            	resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}

const request = fakeRequestPromise('yelp.com/api/coffee');
request
	.then(() => {
		console.log('IT WORKED!!!')
	})
    .catch(() => {
		console.log('OH NO, ERROR')
	})

👇 콜백 버전의 코드와 똑같은 결과를 도출한다.

👇 request는 객체이다. .then과 .catch는 request의 메서드이다. 둘 다 각각 콜백을 넣는다.

둘 중 하나만 실행이 될텐데, Promise가 resolve되면 () => {console.log('IT WORKED!!!')} 함수가 실행되고,

reject되면 () => {console.log('OH NO, ERROR')} 함수가 실행된다.

fakeRequestPromise('yelp.com/api/coffee/page1')
	.then(() => {
		console.log('IT WORKED!!! (page1)')
        fakeRequestPromise('yelp.com/api/coffee/page2')
            .then(() => {
        		console.log('IT WORKED!!! (page2)')
           		fakeRequestPromise('yelp.com/api/coffee/page3')
            		.then(() => {
        				console.log('IT WORKED!!! (page3)')
               		 })
               		 .catch(() => {
                		console.log('OH NO, ERROR (page3)')
               		 })
    	   	})
       		.catch(() => {
        	console.log('OH NO, ERROR (page2)')
       		})
	})
    .catch(() => {
		console.log('OH NO, ERROR (page1)')
	})

➥ page1 요청 성공 후 page2, page3 요청하는 프로그램을 promise로 구현하기

👇 promise 가 callback 보다 나은 이유

fakeRequestPromise('yelp.com/api/coffee/page1')
	.then(() => {
    	console.log('IT WORKED!! (page1)')
        return fakeRequestPromise('yelp.com/api/coffee/page2') // Promise를 반환하고
	})
    .then(() => {                                              // .then으로 그 반환을 호출한다.(그래서 중첩 필요없음)
    	console.log('IT WORKED!! (page2)')
        return fakeRequestPromise('yelp.com/api/coffee/page3')
    })
    .then(() => {
    	console.log('IT WORKED!! (page3)')
    })
    .catch(() => {                                             // catch는 하나만 있으면 된다!!
    	console.log('OH NO, A REQUEST FAILED')
    })

➥ Promise 는 .then 안에서 나 자신에게 Promise를 반환할 수 있다. 즉, 중첩없이 다른 .then들을 연쇄시킬 수 있다.

어디서든 Promise가 reject되면, 전부 무시하고 바로 catch로 간다. (.then 콜백 안에서 Promise를 반환하기 때문이다.)

Promise에 대해 알아둘 것은 값으로 resolve 또는 reject된다는 것이다.

여기 콜백에는 매개변수가 없다.

하지만 promise는 전달받은 값으로 resolve 또는 reject된다. (then이 그 값을 받는다.)

실제 요청을 작성한다면 데이터가 필요하다. 👇 매개변수에 파라미터를 넣고 출력해보자

fakeRequestPromise('yelp.com/api/coffee/page1')
	.then((data) => {
    	console.log('IT WORKED!! (page1)')
    	console.log(data)
        return fakeRequestPromise('yelp.com/api/coffee/page2')
	})
    .then((data) => {
    	console.log('IT WORKED!! (page2)')
        console.log(data)
        return fakeRequestPromise('yelp.com/api/coffee/page3')
    })
    .then((data) => {
    	console.log('IT WORKED!! (page3)')
        console.log(data)
    })
    .catch((err) => {
    	console.log('OH NO, A REQUEST FAILED')
        console.log(err)
    })

새 Promise 작성법

new Promise((resolve, reject) => {
	resolve();
})

➥ PromiseState: 'fulfilled'

new Promise((resolve, reject) => {
	reject();
})

➥ PromiseState: 'rejected'

new Promise((resolve, reject) => {

})

➥ PromiseState: 'pending'

Promise의 세 가지 상태

pending: 비동기 처리의 결과를 기다리는 중
fulfilled: 비동기 처리가 정상적으로 끝났고 결과값을 가지고 있음
rejected: 비동기 처리가 비정상적으로 끝났음

👇 가짜 요청 함수를 만들어보자.

const fakeRequest = (url) => {
	return new Promise((resolve, reject) => {
    	const rand = Math.random();
		setTimeout(() => {
        	if(rand < 0.7){
            	resolve('YOUR FAKE DATA HERE');
            }
        	reject('REQUEST ERROR');
        }, 1000)
	})
}

fakeRequest('/dogs/1')
	.then((data) => {
		console.log('DONE WITH REQUEST!')
        console.log('data is: ', data)
	})
    .catch((err) => {
    	console.log('OH NO!',err)
    })

➥ 둘 중 하나의 결과가 나온다.

** 새 Promise를 만들려면, 함수의 두 매개변수를 전달해야한다.

첫번째는 Promise를 resolve할 함수, 두번째는 Promise를 reject할 함수다.

Callback 함수를 Promise로 만들어보자!

const delayedColorChange = (newColor,delay,doNext) => {
	setTimeout(() => {
    	document.body.style.backgroundColor = newColor;
        doNext();
    }, delay)
}

delayedColorChange('red',1000,() => {
	delayedColorChange('orange',1000,() => {
    	delayedColorChange('yellow',1000,() => {
        	delayedColorChange('green',1000,() => {
                delayedColorChange('blue',1000,() => {
        		})
        	})
        })
    })
});

👇 콜백 함수로 쓴 코드를 Promise를 사용한 코드로 바꿔보자!!

delayedColorChange 함수가 콜백을 전달하지 않고 Promise를 반환하게 하면 된다.

const delayedColorChange = (color, delay) => {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	document.body.style.backgroundColor = color;
            resolve();
        }, delay)
    })
}
➥ 위의 callback함수와 비교해보면, 많은 것을 전달하거나 중첩하지 않아도 된다는 점에서 가치가 있다. 

delayedColorChange('red', 1000)
delayedColorChange('orange', 1000)

// 같은 결과값을 도출한다. 

delayedColorChange('red', 1000)
	.then(() => {
    	delayedColorChange('orange', 1000)
    })

// 같은 결과값을 도출한다. 

delayedColorChange('red', 1000)
	.then(() => {
    	return delayedColorChange('orange', 1000)
    })


// 같은 결과값을 도출한다. 

delayedColorChange('red', 1000)             
	.then(() => delayedColorChange('orange', 1000))
    .then(() => delayedColorChange('yellow', 1000))
    .then(() => delayedColorChange('green', 1000))
    .then(() => delayedColorChange('blue', 1000))

😃혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

저작자표시 비영리 변경금지

'📌Language > JavaScript' 카테고리의 다른 글

TIL) Node란? Node의 사용법, fs 모듈, 터미널에서 노드 활용하기, 3rd-party 모듈을 사용하는 방법 (0)	2022.06.04
TIL) Async function(비동기 함수)와 Promise, Async에서 오류 잡기 (0)	2022.06.04
TIL) Math.random(), 자바스크립트, 반올림(round), 올림(ceil), 내림(floor) (0)	2022.06.01
TIL) 클래스 super, extends 사용 방법, 왜 사용하지? (0)	2022.06.01
TIL) 커링(currying)과 클로저(closure)의 차이 이해하기, 자바스크립트, js (0)	2022.06.01

현재글TIL) Callback을 왜 해야하는지, Promise가 생겨난 배경, Callback 함수를 Promise함수로 바꿔보기

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Today Hailie Learned