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..

다차원 배열 배열(Array) 안에 여러 개의 배열이 존재하는 객체다. 2/3차원 지도 정보, RGB를 저장하는 2차원 사진 파일 등을 표현할 때 활용한다. 2차원 배열 예제 2차원 배열은 array[N][M]으로 접근하며 배열(Array) 전체에 push(), pop()이 가능하다. let array = [ [101, 102, 103], [201, 202, 203], [301, 302, 303], ]; console.log(array); // [ [ 101, 102, 103 ], [ 201, 202, 203 ], [ 301, 302, 303 ] ] console.log(array[0]); // [ 101, 102, 103 ] console.log(array[1][0]); // 201 console.lo..

Date란? 표준 Built-in 객체로써 날짜와 시간을 위한 속성 값과 메서드를 제공하는 객체다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값으로 표현한다. 생성자 및 대표 메서드(method) Date 객체 생성자 : new Date() 현재 시간 기준 문자열 : Date() 날짜 정보 얻기 (년/월/일) : Date.getFullYear(), Date.getMonth(), Date.getDate() 시간 정보 얻기 (시/분/초/ms) : Date.getHours(), Date.getMinutes(), Date.getSeconds() 날짜 정보 설정 (년/월/일) : Date.setFullYear(), Date.setMonth(), Dat..