2. Javascript ES2015 (6) - 프로미스 [3/5]

 

 

 

 

 

앞선 아티클에서 프로미스를 사용하는 기본적인 패턴에 대해서 살펴보았습니다. 

 

 

 

2. Javascript ES2015 (6) - 프로미스 [2/3]

 

 

이번 아티클에서는 프로미스를 이용해서, 통상적으로 사용하는 콜백 함수를 좀 더 가독성 있게 바꿔보도록 하겠습니다. 참고로 여기에는 전제조건이 있습니다. 아래 예제에서 사용하는 메서드 중, findOne과 save에는 내부에 new Promise가 함수 내부에 구현이 되어 있는 상황이라고 가정해야 합니다(이것이 구현되어 있지 않은 경우의 콜백 함수 변경은 별도로 살펴보겠습니다).

 

우선 아래와 같이 콜백 함수를 사용하는 원래의 예제를 살펴보겠습니다. 

 

function findAndSaveUser(Users){
    Users.findOne( {}, (err, user) => { // 첫 번째 콜백
        if(err){
            return console.error(err);
        }
        user.name = 'zero';
        user.save( (err) => {    // 두 번째 콜백
            if(err){
                return console.error(err);
            }
            Users.findOne( { gender: 'm' }, (err, user) => {    // 세 번째 콜백
                /* 내용 생략*/
            } );
        } );
    } );
}

 

 

코드가 꽤나 복잡합니다. 헷갈리겠지만 잘 살펴보도록 합시다. 우선, 처음 등장하는 Users.findOne( ) 함수 안에는 몇 개의 파라미터가 있는 상황일까요? 

 

답은 "두 개"입니다. 바로 첫 번째 파라미터는 { } / 그리고 두 번째 파라미터는 (err, user)를 파라미터로 받는 콜백 함수입니다. 이 콜백함수가 거의 코드의 전체를 감싸고 있는 상황입니다. 

 

그리고 해당 콜백 함수 코드 내부를 따라가다 보면, 내부에서 존재하는 user.save( ) 메서드에서 또 하나의 콜백 함수가 추가로 등장합니다. 뎁스가 하나 더 늘어난 셈이죠? 이 콜백 함수는 (err)을 파라미터로 받는 콜백 함수입니다. 그리고, 또 이 콜백 함수 내부를 따라가면 그 안에 또 하나의 콜백 함수, Users.findOne( ) 메서드에 전달된 콜백함수가 존재합니다. 

 

콜백 함수가 뎁스가 깊어질수록 코드는 점점 가독성이 떨어지고 복잡해집니다. 콜백 함수 안의 콜백 함수 - 그리고 또 그 콜백 함수 안의 콜백 함수... 이를 두고 콜백 지옥이라고 칭하는 것도 무리는 아닙니다. 

 

이제, 위 복잡한 콜백 함수 코드를 프로미스 적용을 통해서 최대한 간결하게 바꾸어 보겠습니다.