[node.js] route에서 반복문(forEach 문)으로 만든 배열 rendering하기

비록 node.js 쪼렙이지만 인터넷에 있던 예제만으로 어떻게 어떻게 응용해서 일을 해내가고 있던 나는 오늘 난관에 부딪혔다.

node.js에서 DB 데이터를 여러번 가져오려면 동기식으로 이중, 삼중의 함수를 만들어서 마지막 함수에서 렌더링을 해야하는데, 나는 처음 가져온 데이터의 각 튜플마다 다른 값을 가져와야했다.

깊은 지식 없이 그냥 배열에 넣으면 되겠다! 까지는 생각을 해냈다. 그래서 아래와 같은 형식으로 작성했다.

x
route.get('/', function(req, res, next) {
    getData.getList(sql1, function(err, data) {
        var array = [];
​
        data.forEach(function (element, index, array){
            getData.getList(sql2, function(err, result) {
                console.log("result: " + JSON.stringify(result));
                array.push(result);
            });
        });
​
        console.log("array: " + array);
​
        res.render('list', { req: req, res: res, result: data, array: array });
   });
});

 

결과는 어떻게 됐을까?

콘솔에는 이렇게 찍혔다.

x
result: jsondata1
result: jsondata2
.
.
.
array: []

분명히 DB에서 데이터를 정확히 가져오고 있는데, array는 텅 비어있다.

forEach문 안의 getList안에서만 값이 살아 있는 것 같긴 한데, 그 안에서 렌더링을 해줄 방법도 모르겠고.. 그래서 오늘도 구글신의 힘을 빌렸다. 검색은 나의 힘..!

이 문제를 해결하는 방법은 많았는데, (async.series를 사용한다던지, async.parallel을 사용한다던지..) getList안에 렌더링을 넣어주면서도 forEach를 다 돌고 난 후에 render할 수 있는 방법이 있었다.

아래와 같이 조건문을 넣어 주면 된다.

x
route.get('/', function(req, res, next) {
    getData.getList(sql1, function(err, data) {
        var array = [];
​
        data.forEach(function (element, index, array){
            getData.getList(sql2, function(err, result) {
                console.log("result: " + JSON.stringify(result));
                array.push(result);
                
                if (array.length === data.length) {
                    console.log("array: " + array);
                    res.render('list', { req: req, res: res, result: data, array: array });
                }
            });
        });
   });
});

forEach가 끝나는 순간 array와 data의 길이가 같아지게 되므로, 그 때 렌더링을 해주면 된다.

어떻게 보면 모듈이고 뭐고 사용할 필요 없이 엄청 간단하게 해결할 수 있는 거였는데, 저 간단한 방법을 생각해내지 못해서 아쉽다. 좀만 더 생각했으면 알 수도 있었을 것 같은데(라고 자기 위안을 해본다.)