자바스크립트를 이용하여 웹페이지를 만들거나 어플리케이션을 만들다보면 콜백안에 콜백, 또 그안에 또 콜백..
이른바 콜백 지옥에 빠질수밖에 없습니다.
아무리 잘 설계 하고 분리 하여 개발 하여도 말이죠.
그런걸 해결 하기 위하여 Promise란것이 세상에 나왔습니다.
당연히 불행하게도 MS의 IE에서는 그런 기능이 빠진체로.
IE를 무시 하고 싶을정도로 매력적인 Promise 기능에 대해 한번 알아보겠습니다.
먼저 콜백에 대해 얘기 해 봅시다.
콜백을 사용 하는 이유는 비동기 프로그래밍을 위하여 사용을 하게 되죠.
"A라는 행위가 끝나면 B를 실행 해라."
이걸 프로그램으로 표현을 하면 아래와 같습니다.
function A(callback){
if(typeof callback == 'function'){
callback();
}
}
function B(){}
A(B);
그러면 만약에
"A라는 행위가 끝나면 B라는 행위를 하고 ,또 B라는 행위가 끝나면 C라는 행위를 하고, 또 다시 C라는 행위가 끝나면 ..."
이것 또한 프로그램으로 표현을 하면 아래와 같습니다.
function A(callback){
if(typeof callback == 'function'){
callback();
}
}
function B(callback){
if(typeof callback == 'function'){
callback();
}
}
function C(callback){
if(typeof callback == 'function'){
callback();
}
}
function D(callback){
if(typeof callback == 'function'){
callback();
}
}
function E(){}
A(B(C(D(E))));
또는
1 (function(){
2 function(){
3 function(){
4 function(){
5 function(){
6 }
7 }
8 }
9 }
10 });
여기까지는 문제가 없어보입니다.
그러나!
만약에 C 함수쯤이나 4번째 줄쯔음에서 문제가 발생 하면?
자바스크립트의 비동기 프로그램에서는 디버깅을 하기 어렵다는 단점이 있기 때문에
"왜? 무엇 때문에 멈췄지? 왜 안되지?" 라는 의문과 스트레스를 겁나 받게 됩니다.
자. 이제 Promise를 통해 위 예제를 풀어보겠습니다.
먼저 "A라는 행위가 끝나면 B를 실행 해라."
function A(resolve,reject){
try{
resolve(); // 정상 실행 시
}catch(err){
reject(); // 오류발생시
}
}
function B(){}
var promise1 = new Promise(function(resolve, reject){
A(resolve,reject);
});
promise1 .then(function(value){
B();
});
소스가 길어졌습니다.^^; 하하하;;
손가락의 수고가 늘어났지만 스트레스와 유지보수의 용이성, 소스의 간결함이라는것을 얻게 됐습니다.^^
하지만.
"A라는 행위가 끝나면 B라는 행위를 하고 ,또 B라는 행위가 끝나면 C라는 행위를 하고, 또 다시 C라는 행위가 끝나면 ..."
function A(resolve,reject){
try{
resolve(); // 정상 실행 시
}catch(err){
var reason = "오류발생";
reject(reason); // 오류발생시
}
}
function B(resolve,reject){
try{
resolve(); // 정상 실행 시
}catch(err){
var reason = "오류발생";
reject(reason); // 오류발생시
}
}
function C(resolve,reject){
try{
resolve(); // 정상 실행 시
}catch(err){
var reason = "오류발생";
reject(reason); // 오류발생시
}
}
function E(resolve,reject){
try{
resolve(); // 정상 실행 시
}catch(err){
var reason = "오류발생";
reject(reason); // 오류발생시
}
}
function E(resolve,reject){
try{
resolve(); // 정상 실행 시
}catch(err){
var reason = "오류발생";
reject(reason); // 오류발생시
}
}
function F(){}
var promise1 = new Promise(function(resolve, reject){
A(resolve,reject);
});
var promise2 = new Promise(function(resolve, reject){
B(resolve,reject);
});
var promise3 = new Promise(function(resolve, reject){
C(resolve,reject);
});
var promise4 = new Promise(function(resolve, reject){
D(resolve,reject);
});
var promise5 = new Promise(function(resolve, reject){
E(resolve,reject);
});
Promise
.all([promise1,promise2,promise3,promise4,promise5])
.then(function(values){
F(values);
}).catch(function(reason){
console.log(reason);
});
위 코드를 풀어서 설명을 하게 되면
"A라는 행위가 끝나면 B라는 행위를 하고 ,또 B라는 행위가 끝나면 C라는 행위를 하고, 또 다시 C라는 행위가 끝나면 ..."와 같습니다.
어떻습니까.. 참 쉽죠?ㅋ
아래 링크는 Mozilla에서 공개한 Promise 문서입니다.
참고 하여 봐주세요.^^
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
스펙
브라우저 호환성
'IT > Web Programming' 카테고리의 다른 글
| Front-End 발전 역사와 개발 생태계 (0) | 2018.05.16 |
|---|---|
| PDF 컨버터(출력물) DOMPDF 사용팁 (0) | 2018.05.13 |
| [PHP]PHP 코딩 스타일 가이드 (0) | 2018.05.10 |
| [javascript]라이브러리 모음 (0) | 2018.05.04 |
| [크로스브라우징]익스플로러와 비익스플로러에서의 Date Object (0) | 2018.05.02 |
| [CSS] font-size의 새로운 단위 [em] (0) | 2018.04.14 |
| [HTML] HTML 어떻게 읽는것이 좋을까? (0) | 2018.04.13 |
| Xml Web Service 를 사용하기 위한 IIS 및 ASP.NET 2.0 설정 (0) | 2018.04.09 |