자바스크립트 코딩테스트 강좌, 스택과 큐

문제: 레이아웃 변경하기

스택과 큐를 이용해 웹 페이지의 레이아웃을 동적으로 변경하는 문제를 다뤄보겠습니다. 사용자는 다음과 같이 변수를 조작할 수 있습니다:

  • push(x): 스택이나 큐에 값 x를 넣습니다.
  • pop(): 스택이나 큐에서 가장 위 또는 앞에 있는 값을 제거합니다.
  • getLayout(): 현재 레이아웃을 배열 형태로 반환합니다.

입력

유저가 입력한 pushpop 명령어의 리스트가 주어집니다.

출력

최종적으로 레이아웃을 배열 형태로 반환합니다.

문제 해결 과정

이 문제를 해결하기 위해서는 스택과 큐의 기본적인 작동 원리를 이해하고, 자바스크립트의 배열을 활용하여 이들을 구현해야 합니다.

1. 스택(Stack)과 큐(Queue) 개념 이해

스택은 후입선출(Last-In-First-Out) 방식입니다. 즉, 가장 나중에 들어온 데이터가 가장 먼저 나갑니다. 반면, 큐는 선입선출(First-In-First-Out) 방식입니다. 즉, 가장 먼저 들어온 데이터가 가장 먼저 나갑니다.

2. 스택 및 큐 구현

자바스크립트에서 스택과 큐를 구현하기 위해 객체를 사용할 수 있습니다. 두 가지 모두 배열을 사용하여 구현할 수 있습니다.


class Stack {
    constructor() {
        this.items = [];
    }

    push(element) {
        this.items.push(element);
    }

    pop() {
        if (this.isEmpty()) {
            return "스택이 비어 있습니다.";
        }
        return this.items.pop();
    }

    isEmpty() {
        return this.items.length === 0;
    }

    peek() {
        if (this.isEmpty()) {
            return "스택이 비어 있습니다.";
        }
        return this.items[this.items.length - 1];
    }

    getItems() {
        return this.items;
    }
}

class Queue {
    constructor() {
        this.items = [];
    }

    enqueue(element) {
        this.items.push(element);
    }

    dequeue() {
        if (this.isEmpty()) {
            return "큐가 비어 있습니다.";
        }
        return this.items.shift();
    }

    isEmpty() {
        return this.items.length === 0;
    }

    front() {
        if (this.isEmpty()) {
            return "큐가 비어 있습니다.";
        }
        return this.items[0];
    }

    getItems() {
        return this.items;
    }
}

3. 문제 해결 알고리즘 구현

주어진 명령어 리스트를 기반으로 레이아웃을 조작하는 로직을 구현합니다. 사용자가 입력한 push 명령어에 따라 값을 스택이나 큐에 추가하고, pop 명령어에 따라 값을 제거합니다.


function layoutManager(commands) {
    const stack = new Stack();
    const queue = new Queue();

    commands.forEach(command => {
        const parts = command.split(' ');
        if (parts[0] === 'push') {
            const value = parts[1];
            // stack에 값 추가 예시
            stack.push(value);
            // queue에 값 추가 예시
            queue.enqueue(value);
        } else if (parts[0] === 'pop') {
            // 스택에서 제거하기
            stack.pop();
            // 큐에서 제거하기
            queue.dequeue();
        }
    });

    return {
        stackLayout: stack.getItems(),
        queueLayout: queue.getItems()
    };
}

// 사용 예시
const commands = ['push 1', 'push 2', 'pop', 'push 3'];
const finalLayout = layoutManager(commands);
console.log(finalLayout); // { stackLayout: ['1', '3'], queueLayout: ['2', '3'] }

4. 결론

이 문제를 통해 스택과 큐의 기본적인 작동 원리와 자바스크립트에서 어떻게 구현할 수 있는지를 살펴보았습니다. 각 자료구조의 장단점을 이해하고 필요에 따라 적절히 사용할 수 있는 능력을 키우는 것이 중요합니다.