클로저를 사용하여 루프 문제를 해결해보려고 한다.
아마 노드를 사용하는 개발자라면 루프를 처리하기 위해 수많은 삽질을 했을 것이다.
이번 글에서 그것을 확실히 해결을 해보려고 한다.
promise와 async둘중 하나를 쓰면 되는데 async를 통해서 구현을 해보겠다.
(요 몇달간 파이썬만 다루다가 노드 다루려니 적응안되 미칠 뻔 했네;;; ㅋㅋㅋㅋ)
우선 테스트용 test.txt파일을 생성을한다.
$ cat test.txt
test
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var express = require('express');
var router = express.Router();
var async = require('async');
var fs = require('fs');
/* GET home page. */
router.get('/', function(req, res, next) {
var testList = [1,2];
fs.readFile('./routes/test.txt', function(err, data){
console.log(data.toString());
res.end('success');
})
});
module.exports = router;
| cs |
비동기를 쓰는 fs모듈과 async모듈을 호출을 해준다.
위 api를 호출을 하면 정상적으로 test.txt내용이 콘솔에 찎힌다.
이제 testList의 길이만큼 fs.readFile을 호출을 한다면.....
여기서부터 먼가 꼬이기 시작한다.
1
2
3
4
5
6
7
8
9
|
router.get('/', function(req, res, next) {
var testList = [1,2,3,4];
for(var i in testList){
fs.readFile('./routes/test.txt', function(err, data){
console.log(data.toString());
})
}
res.end('success');
});
| cs |
이렇게 작성을 하면 될까??? 당연히 안된다.
실행해보면 정상 응답을 되겠지만 실행이 모두 완료되고 응답이 되는게 아니라 응답이 먼저 되버리고 실행은 그 이후에 완료가 된다.
이건 안되는 방법이다.
그리고 루프문 자체에도 문제가 있다. 바로 루프가 비동기의 흐름을 따라가지 못한다.
결과를 보면 우선 응답된 시점과 fs.readFile이 실행되는 시점이 매우 불안정함을 할 수 있다.
또한 i값이 계속 3이 뜸을 볼수 있다.
이것을 해결하기 위해서는 javascript에서 제공되는 array.prototype 메소드를 이용을 하자.
1
2
3
4
5
6
7
8
9
10
11
|
router.get('/', function(req, res, next) {
var testList = [1,2,3,4];
testList.map(function(item, index){
fs.readFile('./routes/test.txt', function(err, data){
console.log(item)
console.log(data.toString());
})
})
res.end('success');
});
| cs |
우선 이렇게 수정을 해보자.
1234정상출력이 된다. 이것이 가능한 이유는 map메소드또한 콜백으로 처리가 되기 떄문이다. 비동기에 비동기를 처리하는 거다
자바스크립트는 이런식으로 꼬리에 꼬리에 꼬리를 계속 무는 형태의 코드로 짤 수 밖에 없다. 하지만 async, promise를 이용하면 해결할 수있다.
이제 응답이 되는 시점을 루프의 마지막 시점에 줘보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
router.get('/', function(req, res, next) {
var testList = [1,2,3,4];
var testListCount = testList.length;
testList.map(function(item, index){
fs.readFile('./routes/test.txt', function(err, data){
console.log(item)
console.log(data.toString());
if(testListCount-1 == index){
res.end('success');
}
})
})
});
| cs |
루프 내부에서 루프의 마지막을 검사를 하여 응답을 하면 된다.
우선 응답이 되는 시점을 루프의 마지막으로 잡았다.
근데 먼가 코드가 깔끔하진 않다. 유지보수 하기가 매우 힘들것 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
router.get('/', function(req, res, next) {
var testList = [1,2,3,4];
async.series([
// 1st
function(callback){
fs.readFile('./routes/test.txt', function(err, data){
console.log(1)
console.log(data.toString())
callback(null, 1);
})
},
// 2nd
function(callback){
fs.readFile('./routes/test.txt', function(err, data){
console.log(2)
console.log(data.toString())
callback(null, 1);
})
}
],
// callback (final)
function(err, results){
console.log(results); // [1, 2]
res.end('test');
});
});
| cs |
async모듈을 사용을 하면 위코드처럼 바꿀 수있다.
우선 결과부터 확인을 해보자.
우선 먼가 출력이 우르르 된다
async모듈은 series메소드가 존재한다. series매소드는 첫번쨰 인자로 function array를 받는다 각 함수는 두번쨰 인자로 전달 되는 콜백 인자를 받게 된다. 이게 먼 거지같은 소리인가 하면
1
2
3
4
5
6
7
|
function(callback){
fs.readFile('./routes/test.txt', function(err, data){
console.log(1)
console.log(data.toString())
callback(null, 1);
})
}
| cs |
이 부분이 있다 이 함수는 콜백을 받는다. 이 콜백이 바로
1
2
3
4
|
function(err, results){
console.log(results); // [1, 2]
res.end('test');
}
| cs |
이친구가 된다 즉 함수로 이루어진 리스트는 요놈을 전부 콜백으로 받아 에러없이 콜백을 호출 할 경우 정상적으로 해당 콜백이 호출이 된다. 여기서 중요한건 모든 함수가 정산적으로 콜백을 호출 할 경우다 그렇지 않으면 해당 콜백을 호출하지 않고 에러를 발생한다 이 경우 따로 에러를 잡아서 처리만 해주면 된다.
근데 저렇게 하면 코드가 매우 정적이라 좋지 못한것 같다 async.series로 의 첫번쨰 인자인 리스트를 가변적으로 바뀐다면 좋을 것 같다. 음... 그럼 함수를 반환을 해버리는 함수를 만들어 버리자 여기서 클로저를 이용하면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
router.get('/', function(req, res, next) {
var testList = [1,2,3,4];
var testListArray = [];
testList.map(function(item, index){
testListArray.push(closureTest(item));
})
async.series(testListArray, function(err, result){
console.log(result)
res.end('test')
})
function closureTest(item){
return function(callback){
fs.readFile('./routes/test.txt', function(err, data){
console.log(data.toString(), item);
callback(null, 'test')
})
}
}
});
| cs |
먼가 코드거 더 거지같이 된거같다....... 위코드를 보기 쉽게 바꾸면
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
router.get('/', function(req, res, next) {
var testList = [1,2,3,4];
var testListArray = [];
testList.map(function(item, index){
testListArray.push(closureTest(item));
})
async.series(testListArray, function(err, result){
console.log(result)
res.end('test')
})
});
| cs |
이렇게 바꿀수 있다.
해당 라우터에서 뿐 아니라
1
2
3
4
5
6
7
8
9
|
function closureTest(item){
return function(callback){
fs.readFile('./routes/test.txt', function(err, data){
console.log(data.toString(), item);
callback(null, 'test')
})
}
}
exports.module= closureTest
| cs |
해당 파일을 읽는 부분을 재사용이 가능하도록 모듈화가 가능해졌다.
우선 첫번째로 map을 돌리는 부분을 봐보자 루프가 돌면서 closureTest라는 함수를 호출을 한다.
해당 함수는 또다른 익명 함수를 반환을 하는 클로저이다. 음 .... 여기서 함수로 이루어진 배열을 생성을 하나. 해당 배열은 호출이 될떄 콜백인자를 받게 되므로 callback을 인자로 받아두자.
map을 다돌리면 이제 async.series에 첫번쨰 인자로 넘겨주자. 그리고 첫 번째 인자의 함수들이 모두 호출이 되면 실행 될 콜백을 지정을 해주자.
이렇게 짜면 처음에 if(testListCount-1 == index) 처리 한것처럼 루프가 완료 되는 시점에서 응답을 처리 할 수 있다.
사실 async 모듈을 쓰면 코드가 더 복잡해 질 수 있다. 사실 안써도 되는 클로저를 쓰느거라 하지만 코드의 재사용이 가능해지고 유지보수도 좀더 효율적으로 바뀐다. 아 참고로 series는 배열 말고도 객체로도 전달이 가능하다. 하지만 객체보다는 리스트가 더 빠르기 때문에 리스트를 사용하였다.
댓글
댓글 쓰기