JS promise 패턴 구현해보기

많은 프론트앤드? 혹은 JS개발자들이 코드를 아름답게 만드는 것을 방해하는 것이 있으니 그것은 바로 callback 지옥이라 말할 수 있다.

javascript의 많은 기능들은 비동기로 설계되어 있다. 그러다 보니 장점도 엄청나지만 코드가 어려워지는 문제도 있습니다.

fn(a, function(){
fn(a, function(){
fn(a, function(){
// 이런거 정말 싫다.
});
});
});

위와 같은 패턴을 콜백 지옥(callback hell)이라 할 수 있는데, 인간적으로 3번까지는 참아줄만 합니다. 하지만 그 이상이 필요한 상황이 되어 콜백패턴의 코드를 작성하면, 집중해서 처음 작업 할 때까지는 문제 없지만, 몇달 후에 유지보수 하려고 코드를 열게 되거나 후배에게 코드를 설명 해주려 하면

‘이러려고 개발자 했나 자괴감이 들고 괴로워 질때가 있다.’

그렇다면 비동기 코드의 장점을 살리면서 콜백 지옥(callback hell)을 피할 방법은 없을까? 필자의 경우, 작년 까지만 해도. 해외 블러그 등에서 개인적으로 파악한 바로는 정답은 없다. 잘 짜야 한다. 등이 이야기가 대세였다. 물론 ES6표준 스팩에 포함되어 있는 Promise 패턴이 있습니다. (아실만한 분은 다 아실 것 같아 그냥 링크만 던지겠습니다. 자세한 설명은 다른곳에서 충분히 많이 하는 것 같습니다.)

하지만 안타깝게도. Promise의 브라우저 호환성 레벨은 실망스러울 정도다. 위 링크에 마지막 쯤을 확인해보면 다음의 브라우저 호환성 정보를 확인 할 수 있습니다.

세상에나 이건 대한민국에 개발자에겐 쓰지 말라는 이야기와 같다 :(

이런 이유로 저에게는 차선책이 필요했습니다.

필자의 경우엔 이런 상황에서 Polyfill을 찾아봅니다. 구글에서 ‘polyfill promise’ 라고 검색하면 여러가지 대안을 찾을 수 있습니다. (폴리필:폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다.)

출처: http://webdir.tistory.com/328 [WEBDIR]

음… 그런데 다 영어다. 그리고 코드가 너무 길다. 이거 내가 가져다 써도 문제가 없을까 라는 고민이 생겼다.. ‘나중에 링크를 하나씩 확인 해보면 아실테지만. 머 사용법이 조금씩 다 달라서 어느 것 하나 믿음이 확 가진 않습니다. (저의 경우엔..)

그리고 간단한 패턴을 구현하는데 이렇게 많은 코드가 과연 필요한 것 인가에 대한 의문의 생겼습니다.

그래서 직접 만들어 봤습니다. 아주 간단하게~~

먼저 Promise 구현체의 코드 입니다.

차~암 쉽지요?

보시다 시피 워낙 몇줄 안됩니다. 바로 여러분의 프로젝트에 적용 가능 하고 충돌 문제도 피할 수 있습니다. (핵심 아이디어는 then에 전달된 함수를 큐에 담아주고 덜어내는 방식.)

그리고 구현체를 사용하는 방법은 다음과 같습니다.

예제에서는 여러단계의 AJAX 호출을 처리하고 각 단계가 모두 성공하면 then() 구문이 실행 됩니다. 그리고 각 구문 실행중에 에러가 발생되면 구문 안에서 2번째 인자를 실행하여 구문이 에러가 발생된 것은 ax.promise에세 보고, 전체 문장 맨 끝에 있는 catch 를 실행해주는 방식입니다.

아마도 개발좀 해보신 분들이 라면 이런 상황 자주 보셨을 겁니다. 저 역시 수차례 수년간 같은 상황에서 궁여지책으로 문제를 해결해 오다 최근 이런 방법을 사용중입니다.

이 글의 내용이 필요하신 분이 있길 기대하면서. (끝)