원형 큐(Circular Queue)란? 원형 형태를 가지며 먼저 들어간 데이터가 먼저 나오는 FIFO(First In First Out) 기반의 선형 자료구조이다. 자바스크립트를 이용해서 원형 큐 자료구조를 구현해보자. 구현할 메서드(method) 데이터 전체 반환 CircularQueue.getBuffer() 인덱스(index)가 비어 있는지 확인 CircularQueue.isEmpty() 인덱스(index)가 다 찼는지 확인 CircularQueue.isFull() 데이터 추가 / 데이터 삭제 CircularQueue.enqueue() / CircularQueue.dequeue() 첫 번째 데이터 조회 CircularQueue.front() 데이터 개수 확인 CircularQueue.dataSize..

우선순위 큐(Priority Queue)란? 우선순위를 고려해 먼저 들어간 데이터가 먼저 나오는 FIFO(First In First Out) 기반의 선형 자료구조이다. 정렬 방식으로 배열 기반, 연결리스트 기반, 힙(Heap) 기반 등이 존재한다. 구현할 메서드(method) 데이터 전체 반환 PriorityQueue.getBuffer() 비어 있는지 확인 PriorityQueue.isEmpty() 데이터 추가 / 데이터 삭제 PriorityQueue.enqueue() / PriorityQueue.dequeue() 첫 번째 데이터 조회 PriorityQueue.front() 데이터 개수 확인 PriorityQueue.size() 데이터 전체 삭제 PriorityQueue.clear() 우선순위 큐 구현 ..

Vite 란? 비트(Vite)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 현재 Vue, React, Svelte 등의 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목하고 있다. Vite는 네이티브 자바스크립트 모듈(ES Module)을 기반으로 한 데브 서버이다. 이미 현대 프론트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있다. 그리고 비트는 웹팩보다 훨씬 더 빠르게 개발하고 배포할 수 있다. 왜 빠른지 이해하기 위해서는 먼저 번들링과 네이티브 자바스크립트 모듈을 이해해야 한다. 웹팩(Webpack)과 같은 모듈 번들러가 ..

웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다. 웹팩을 사용하는 이유 웹 사이트를 개발하면 HTML, CSS, 스크립트, 이미지 파일 등 많은 리소스 파일이 생겨나 로딩할 때 많은 파일이 다운로드되므로 서버 접속이 많아져 웹 페이지 로딩 속도가 느려진다. 웹 사이트가 빠르게 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어난다. 그래서 웹 사이트의 로딩 속도를 높이기 위한 대표적인 방법으로 클라이언트에서 서버로 요청하는 파일들을 압축하고 병합하는 방법을 찾..

큐(Queue)란? 가장 먼저 들어간 데이터가 먼저 나오는 FIFO(First In First Out) 기반의 선형 자료구조이다. 구현 메서드(method) 데이터 전체 획득 Queue.getBuffer() 비어 있는지 확인 Queue.isEmpty() 데이터 추가/삭제 Queue.enqueue()/Queue.dequeue() 첫 번째 데이터 조회 Queue.front() 사이즈 확인 Queue.size() 전체 삭제 Queue.clear() 큐(Queue)는 먼저 온 사람이 먼저 나가는 줄 서기와 같다고 볼 수 있다 이메일이나 메시지, 쇼핑몰 주문, 콜센터 전화 등 일상에서 많이 찾아볼 수 있다 큐 구현 - getBuffer(), isEmpty() // 생성자 함수 function Queue(array..

스택(Stack)이란? 가장 늦게 들어간 데이터가 가장 먼저 나오는 LIFO(Last In First Out) 기반의 선형 자료구조이다. 구현 메서드(method) 데이터 전체 획득 Stack.getBuffer() 비어 있는지 확인 Stack.isEmpty() 데이터 추가/삭제 Stack.push()/Stack.pop() 마지막 데이터 조회 Stack.peek() 사이즈 확인 Stack.size() 데이터 위치 확인 Stack.indexOf() 존재 여부 확인 Stack.includes() Windows 단축키인 Ctrl + z 실행취소(undo) 기능도 스택(Stack) 기반으로 구현되었고 웹 브라우저에서 이전 페이지로 이동하는 원리도 스택(Stack)이라고 볼 수 있다 스택 구현 - getBuffer..

배열(Array)이란? 컴퓨터 과학에서 배열은 번호(index)와 번호에 대응하는 데이터들로 이루어진 자료 구조로 여러 개체(entity) 값을 순차적으로 나열한 선형 자료구조이다. 자바스크립트 배열의 대표 속성(property)과 메서드(method) 배열 크기/여부 확인 Array.length, Array.isArray() 배열 추가/삭제 Array.push(), Array.pop(), Array.shift(), Array.unshift(), Array.splice(), Array.slice 배열 탐색 Array.indexOf(), Array.lastIndexOf(), Array.includes() 배열 변형 Array.sort(), Array.reverse(), Array.join() 배열 반복 A..