JAVASCRIPT

Javascript Queue구현 및 사용방법 + 재귀호출

Ambitions 2022. 11. 25. 17:46

최근 사내에서 개발을 하던 중 동시에 요청이 들어왔을 때 기존에 실행되던 기능이 새로운 요청이 들어오면 종료되는 문제가 있어서 자료구조중 큐를 이용해 순차적으로 수행할 수 있도록 하는기능을 구현했는데, 큐를 구현했던 경험을 정리하려고 한다.

 

먼저 javascript에선 Queue를 리스트를 이용해구현할 수 있고 난 다음과 같이 구현하여 사용하였다.

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
27
28
29
30
31
32
33
(function () {
    class Queue {
                constructor() {
                    this.items = [];
                }
                enqueue(value) { // 큐에 값을추가
                    this.items.push(value);
                }
                dequeue() { // 큐에서 값을 제거한 뒤 리턴
                    return this.items.shift();
                }   
                isEmpty() { // 큐가 비었는지 확인
                    return this.items.length === 0;
                }
            }
    const taskQueue = new Queue();
 
 
    function addItems() {
        for(let i = 0; i !== 10; i++) {
           taskQueue.enqueue(i);
        }
    }
 
    function task(taskQueue) { 
        console.log(taskQueue.dequeue()); //큐에서 값을꺼낸 뒤 제거
        if (!taskQueue.isEmpty()) {
            task(taskQueue);
        }
    }
    addItems();
    task(taskQueue);
})();
cs

일단 큐라는 자료구조에서 중요한개념은 FIFO(First In First Out)인데 FIFO란 먼저 집어넣은 데이터가 먼저 나온다. 

이것만 기억하면 큐라는 자료구조를 사용하는데에는 무리가 없을 것 같다. (자료구조에 대한 설명은 인터넷에 많이 설명되있으니까 pass)

 

javascript의 class를 이용해서 Queue라는 이름을 가진 클래스에 list를 이용하여 각각 넣기, 뺴기, 비어있는지 확인되는 기능을 만들었고 함수들이 실행되는 순서는 다음과 같다.

1. addItems 함수가 0 ~ 9까지의 값을 taskQueue에 삽입

2. task라는 함수가 콘솔창에 taskQueue에 있는 제일 첫번째 값을 출력

3. 출력 후 taskQueue가 비어있는지 확인 후 비어있지 않으면 재귀호출을 통해 다시 task 함수가 실행

4. taskQueue가 비어있으면 함수는 종료

 

사실 따로 설명할 필요는 없는코드긴 하지만 기억해두기 위해 정리해둔다.

큐를 사용하기전까진 서버단에서 동기화를 고민했었는데, 생각보다 쉽게 문제가 해결되었고, 학부때 자료구조를 배웠던게 도움이 되었던 것 같다.