callback 함수 이해하기

Node js 공식 홈페이지에 들어가면 About 탭에서 Node.js의 대해서 라는 설명이 짤막하게 나옵니다.

Node.js®에 대해서

비동기 이벤트 주도 JavaScript 런타임으로써 Node는 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계되었습니다. 다음 "hello world" 예제는 다수의 연결을 동시에 처리할 수 있습니다. 각 연결에서 콜백이 실행되는데 실행할 작업이 없다면 Node는 대기합니다.

여기서 중요한 단어 두 가지가 나오게 되는데 하나는 비동기 다른 하나는 콜백이라는 단어입니다.

비동기라는 말은 코드가 작성된 순서 그대로 실행되는 것이 아니라 하나의 작업이 다 끝나지 않아도 그건 그대로 계속 작업하게 내버려두고 다음 작업을 바로 시작한다는 뜻입니다. 그런데 이러한 특징은 장점이 될 수도 있지만 도리어 단점이 될 수도 있습니다.

그래서 Node.js에서 항상 붙는 수식어가 callback 함수입니다.

보통 어떤 함수 작업이 끝나서 값을 리턴할 때 보통 C나 Java와 같은 언어에서는 

return 값 

의 형태로 나타나게 됩니다. 위와같은 언어에서는 코드 작성 순서대로 일을 처리하기 때문에 있지도 않는 값을 return 하게 될 일은 나타나지 않습니다. 그렇게되면 정의되지 않은 값이라고 컴파일 오류가 뜰 것입니다.

그러나 비동기를 기본으로 하는 Node에서는 얘기가 좀 달라집니다. 

예를들면 변수 A에 어떠한 값을 계산하고나서 그 값을 return 하는 함수를 만들었다치면 상식적으로는 리턴받는 값은 계산된 어떤 값이 나와야한다고 생각할텐데 그렇지 못한 경우가 발생합니다. 변수 A는 선언이 되었지만 계산을 수행하기도 전에 값을 return 해버리는 경우가 발생할 수 있기 때문에 계산되기 전의 값을 return 하는 상황이 나타납니다. 제가 작업했던 코드를 예시로 보겠습니다.

function weatherFunction(callback) {
    request(url,function(err,response,body) {
        if(err)
            console.log(err);
        else {
            var obj = JSON.parse(body);
            var weatherObj = {"img":"rain.gif", "temp":obj.main.temp};
            callback(weatherObj)
        }
    });
}
 
exports.weatherFunction = weatherFunction;

else부분에서 weatherObj라는 JSON 타입의 Object를 만듭니다. 그리고 이 Object를 Server로 전달합니다.

App.js

app.get('/forecast',function(req,res){
    weather.weatherFunction(function(data){
        res.render('forecast',{data:JSON.stringify(data)});
        console.log(data);
    })
});

전체 코드를 다 쓰진 않았습니다. forecast라는 라우터로 접속을 했을 때 페이지를 렌더링하고 위에서 전달했던 Object 값을 client단으로 넘겨주는 코드인데 넘겨주는건 둘째치고 console.log로 찍히는 값만 살펴보겠습니다.

temp가 나온 경위는 제가 날씨 데이터를 받는 API를 쓴거라 위에 내용에는 생략되었지만 일단 뭐가됐든 잘 넘어왔다고 볼 수 있겠습니다. 그럼 callback형식을 사용하지 않는 경우를 보겠습니다.

코드를 return 형식으로 살짝 바꿔보면

function weatherFunction() {
    var obj;
    var weatherObj;
    request(url,function(err,response,body) {
        if(err){
            weatherObj = {"img":"err","temp":"err"};
        }
        else {
            obj = JSON.parse(body);
            weatherObj = {"img":"rain.gif", "temp":obj.main.temp};
        }
    });
    return weatherObj;
}
 
exports.weatherFunction = weatherFunction;

s

그러면 서버쪽에서는 해당 함수를 실행 했을 때 리턴 되는 값이 있으리라 추측되므로 이런식으로 바꿔주겠습니다.

App.js

app.get('/forecast',function(req,res){
    res.render('forecast',{data:JSON.stringify(weather.weatherFunction())});
    console.log(weather.weatherFunction());
});

아까도 에러가 나지 않았으므로 당연히 else부분이 실행될 것이고 그렇다면 weatherObj값이 리턴되리라 생각이 듭니다. 그래서 실행을 시켜보았더니

undefined이 나와버립니다. 분명히 return하기 전에 값을 명시하고 return을 시켰는데 값이 없습니다. 그래서 Node.js에서는 값을 return하는 형식이 아닌 callback의 형태를 사용합니다. 두 함수의 선언부 차이를 보면

function weatherFunction(callback)

function weatherFunction()

매개변수로 callback이라는 것이 차이가 납니다. 맨 처음에 공식홈페이지에서 나왔던 말 중에 이런 말이 있었습니다.

각 연결에서 콜백이 실행되는데 실행할 작업이 없다면 Node는 대기합니다.

사용자가 필요한 매개변수 이외에 callback이라는 함수를 매개변수로 넣을 수 있는데 이녀석을 통해 값을 전달하는 역할을 합니다.

forecastFunction

callback(weatherObj)

app.js

weather.weatherFunction(function(data){

    res.render('forecast',{data:JSON.stringify(data)});

})

forecast함수에서는 매개변수로 넘길 값인 weatherObj를 넣습니다.

그러면 서버쪽에서 해당 함수를 사용할 때 위와같이 선언하게 됩니다.

weatherFunction을 사용할 때 매개변수로 함수를 작성하게 되는데 저기에 있는 data라는 매개변수가 forecastFunction 에서 넘겨준 weatherObj가 됩니다. 

함수에서 값을 리턴해준다는 것은 굉장히 많이 쓰이는 일이기 때문에 비동기로 진행되는 프로세스에서 callback은 필수적입니다.

그동안 그것도 모르고 도대체 값이 왜 안 나오는건가 한탄도 참 많이했는데 이제야 쪼금 이해가 된 것 같네요..ㅋㅋ