(SEB_FE) Section4 Unit1 Stack & Queue

PYM·2023년 5월 10일
0

(SEB_FE) SECTION4

목록 보기
2/24

스택의 구조와 특징에 대해 이해합니다.
스택의 실사용 예제를 보고, 스택이 어떻게 이용이 되는지 이해합니다.
직접 구현한 스택이 어떤 식으로 동작하는지 이해하고, JavaScript 배열의 어떤 메서드를 사용해야 하는지 압니다.
JavaScript의 배열과 스택은 어떤 차이가 있는지 이해합니다.
큐의 개념과 구조, 특징에 대해 이해합니다.
큐의 실사용 예제를 보고, 큐가 어떻게 이용이 되는지 이해합니다.
직접 구현한 큐가 어떤 식으로 동작하는지 이해하고, JavaScript 배열의 어떤 메서드를 사용해야 하는지 압니다.
JavaScript의 배열과 큐는 어떤 차이가 있는지 이해합니다.

💜Stack

직역 그대로, 데이터(data)를 순서대로 쌓는 자료구조

💜Stack의 구조

동그란 원통에 차례대로 구슬을 넣는다고 상상해 보자.
우리는 원통의 맨 위에 뚫려있는 구멍을 통해 구슬을 넣을 수 있고, 구슬을 뺄 때 또한 원통의 맨 위에 뚫려있는 구멍을 통해 맨 위에 있는 구슬을 먼저 뺄 수 있다.

이때, 원통을 자료구조 Stack, 구슬을 데이터(data)로 비유할 수 있다.

  • 자료구조 Stack의 특징은 입력과 출력이 하나의 방향, 즉 스택의 최상단에서만 이루어지는 제한적 접근에 있다.

  • 이런 Stack 자료구조의 정책을 LIFO(Last In First Out) 혹은 FILO(First In Last Out)라고 부르기도 한다.

  • Stack에 데이터를 넣는 것을 'PUSH', 데이터를 꺼내는 것을 'POP'이라고 한다.

💜Stack의 특징

💟1. LIFO(Last In First Out)

먼저 들어간 데이터는 제일 나중에 나오는 후입선출의 구조

예1) 1, 2, 3, 4를 스택에 차례대로 넣는다.

stack.push(데이터)
|  4  | <- top
|  3  |
|  2  |
|  1  |
들어간 순서대로, 1번이 제일 먼저 들어가고 4번이 마지막으로 들어가게 된다.

예2) 스택이 빌 때까지 데이터를 전부 빼낸다.

stack.pop()
|    |
|    |
|    |
|    |
4, 3, 2, 1
제일 마지막에 있는 데이터부터 차례대로 나오게 된다.

이러한 특성으로 인해 스택 구조 내에서 특정 데이터를 조회할 수 없으며, 스택의 최상단에서만 데이터를 저장하고 꺼낼 수 있는 특징이 있다.

그 때문에 데이터를 저장할 때나 검색할 때 항상 스택의 최상단에서만 행위가 이루어지며 이에 따라 데이터를 저장하고 검색하는 프로세스가 매우 빠르다.

💟2. 하나의 입출력 방향을 가지고 있다

Stack 자료구조는 데이터를 넣고 뺄 수 있는 곳이 스택의 가장 최상단, 한 군데다.
즉 데이터를 넣을 때도 스택의 가장 최상단으로 넣고(입력) 뺄 때 또한 스택의 가장 최상단으로 데이터를 뺄 수(출력) 있다.

💟3. 데이터는 하나씩 넣고 뺄 수 있다

Stack 자료구조는 데이터를 넣고 뺄 수 있는 경로가 스택의 최상단, 한 군데이기 때문에 스택 내부에 데이터를 넣을 때도 하나씩 최상단을 통해 넣고 데이터를 뺄 때 또한 항상 스택 최상단에서 하나씩 데이터를 뺄 수 있다.

즉, 스택에 한 개씩 여러 번 데이터를 넣어 데이터가 여러 개 쌓여 있다고 하더라도,
데이터를 뺄 때는 스택의 가장 최상단에서 한 번에 한 개의 데이터만을 뺄 수 있다.

💜Stack의 실사용 예제

대표적으로 브라우저의 뒤로 가기, 앞으로 가기 기능 구현 시 자료구조 Stack이 활용되고 있다.

  1. 새로운 페이지로 접속할 때, 현재 페이지를 Prev Stack에 보관한다

  2. 뒤로 가기 버튼을 눌러 이전 페이지로 돌아갈 때는, 현재 페이지를 Next Stack에 보관하고 Prev Stack에 가장 나중에 보관된 페이지를 현재 페이지로 가져온다.

  3. 앞으로 가기 버튼을 눌러 앞서 방문한 페이지로 이동을 원할 때는, Next Stack의 가장 마지막으로 보관된 페이지를 가져온다.

  4. 마지막으로 현재 페이지를 Prev Stack에 보관한다.


💜Queue

명절에는 고향으로 가기 위해 많은 자동차가 고속도로를 지납니다. 고속도로에는 톨게이트가 있고, 자동차는 톨게이트에 진입한 순서대로 통행료를 내고 톨게이트를 통과합니다.

톨게이트를 Queue 자료구조, 자동차는 데이터(data)로 비유할 수 있다.

가장 먼저 진입한 자동차가 가장 먼저 톨게이트를 통과하게 된다.
다시 말해, 가장 나중에 진입한 자동차는 먼저 도착한 자동차가 모두 빠져나가기 전까지는 톨게이트를 빠져나갈 수 없다는 말!

💜Queue의 구조

자료구조 Queue는 Stack과 반대되는 개념으로, 먼저 들어간 데이터(data)가 먼저 나오는 FIFO(First In First Out) 혹은 LILO(Last In Last Out)을 특징으로 가지고 있다.

입력의 방향과 출력의 방향이 각각 고정되어 있으며, 데이터를 입력할 시에는 큐의 끝에서(tail), 데이터를 출력할 때는 큐의 맨 앞에서(head) 진행한다.

  • Queue에 데이터를 넣는 것을 'enqueue', 데이터를 꺼내는 것을 'dequeue'라고 한다.

자료구조 Queue는 데이터(data)가 입력된 순서대로 처리할 때 주로 사용!

💜Queue의 특징

💟1. FIFO (First In First Out)

예1) 1, 2, 3, 4를 큐에 차례대로 넣습니다.

						queue.enqueue(데이터)
출력 방향(head) 	<---------------------------< 입력 방향(tail)
					1 <- 2 <- 3 <- 4
				<---------------------------<
들어간 순서대로, 1번이 제일 먼저 들어가고 4번이 마지막으로 들어가게 됩니다.

예2) 큐가 빌 때까지 데이터를 전부 빼냅니다.

						queue.dequeue(데이터)
출력 방향(head)	 <---------------------------< 입력 방향(tail)

				 <---------------------------<
1, 2, 3, 4
제일 첫 번째 있는 데이터부터 차례대로 나오게 됩니다.

💟2. 두 개의 입출력 방향을 가지고 있다.

Queue 자료구조는 데이터의 입력, 출력 방향이 다르다.

데이터를 입력할 때는 큐의 맨 끝(tail)으로만 입력이 가능하며 데이터를 출력할 때는 큐의 맨 앞(head)으로만 출력이 가능하다.

즉, 큐는 데이터를 입력하는 곳과 출력하는 곳이 각각 정해져 있으며 이렇게 총 2개의 입출력 방향을 가지고 있다.
(만약 입출력 방향이 같다면 Queue 자료구조라고 볼 수 없는 것!)

💟3. 데이터는 하나씩 넣고 뺄 수 있다.

Queue 자료구조는 데이터를 넣을 때는 큐의 맨 뒷부분에서 뺄 때는 큐의 맨 앞부분에서 처리를 진행한다. 각 처리 시마다 한 개의 데이터를 넣거나 뺄 수 있다.

즉, 큐에 한 개씩 여러 번 데이터를 넣어 큐 내부에 데이터가 여러 개 쌓여 있다고 하더라도, 데이터를 뺄 때는 큐의 맨 앞에서 한 번에 한 개의 데이터만을 뺄 수 있다.

💜Queue의 실사용 예제

자료구조 Queue는 컴퓨터에서도 광범위하게 활용된다.

컴퓨터와 연결된 프린터에서 여러 문서를 순서대로 인쇄하려면 어떻게 해야 할까?

  1. 우리가 문서를 작성하고 출력 버튼을 누르면 해당 문서는 인쇄 작업 (임시 기억 장치의) Queue에 들어간다.

  2. 프린터는 인쇄 작업 Queue에 들어온 문서를 들어온 순서대로 인쇄한다.

컴퓨터(출력 버튼) - (임시 기억 장치의) Queue에 하나씩 들어옴 - Queue에 들어온 문서를 들어온 순서대로 인쇄한다

만약 Queue에 들어온 순서대로 출력하지 않는다면, 인쇄 결과물이 뒤죽박죽일 것이다.

이 예시처럼 컴퓨터 장치들 사이에서 데이터(data)를 주고받을 때, 각 장치 사이에 존재하는 속도의 차이나 시간 차이을 극복하기 위해 임시 기억 장치의 자료구조로 Queue를 사용한다.
이것을 통틀어 버퍼(buffer)라고 한다.

💟버퍼

대부분의 컴퓨터 장치에서 발생하는 이벤트는 파동 그래프와 같이 불규칙적으로 발생한다. 이에 비해 CPU와 같이 발생한 이벤트를 처리하는 장치는 일정한 처리 속도를 갖는다.
이에 불규칙적으로 발생한 이벤트를 규칙적으로 처리하기 위해 버퍼(buffer)를 사용한다.

버퍼 정보를 바탕으로
컴퓨터와 프린터 사이의 데이터(data) 통신을 다시 정리해 보자.

  • 일반적으로 프린터는 속도가 느리다.

  • CPU는 프린터와 비교하여, 데이터를 처리하는 속도가 빠르다.

  • 따라서, CPU는 빠른 속도로 인쇄에 필요한 데이터(data)를 만든 다음, 인쇄 작업 Queue에 저장하고 다른 작업을 수행한다.

  • 프린터는 인쇄 작업 Queue에서 데이터(data)를 받아 들어온 순서대로 일정한 속도로 인쇄한다.

이외에도 유튜브와 같은 동영상 스트리밍 앱을 통해 동영상을 시청할 때, 다운로드된 데이터(data)가 영상을 재생하기에 충분하지 않은 경우가 있다.
이때 동영상을 정상적으로 재생하기 위해 Queue에 모아 두었다가 동영상을 재생하기에 충분한 양의 데이터가 모였을 때 동영상을 재생한다. (a. k. a. 버퍼링)

profile
목표는 "함께 일하고 싶은, 함께 일해서 좋은" Front-end 개발자

0개의 댓글