1. vite란?
vite는 프런트엔드 개발을 위해 설계된 빠르고 효율적인 빌드 도구입니다.
2. vite의 특징
1. 여러 프레임워크와의 통합이 잘되어 있습니다
React, Vue, Svelte, Preact 등 주요 프레임워크와 잘 통합되어 있습니다.
다양한 플러그인과 템플릿도 지원합니다.
2. 기본설정이 되어있어 빠른 시작이 가능합니다
Vite는 대부분의 설정이 미리 구성되어 있어, 복잡한 설정 없이도 프로젝트를 바로 시작할 수 있습니다.
3. 개발서버 빌드가 빠릅니다
브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)"이라는 해결 방법을 사용해야 했습니다.
Vite는 ES Module을 브라우저에 직접 제공하여 초기 서버 시작 속도를 획기적으로 줄일수 있습니다.
ESM(ES Modules)이란: JavaScript에서 공식적으로
표준화된 모듈 시스템으로, 파일 간의 코드 분리를 지원합니다.
번들링(Bundling)이란: 모듈화된 여러 개의 파일(소스 코드)을 하나의 파일로 합치는 과정입니다.
4.HMR(Hot Module Replacement)
코드 수정 시 변경된 부분만 빠르게 업데이트하여 브라우저를 새로고침하지 않고도 실시간으로 변화를 확인할 수 있습니다.
.vite생성 명령어
npm create vite@latest
라는 명령어로 생성할수있습니다.
명령어를 입력후 먼저 프로젝트명을 설정합니다.
다음은 사용할 프레임워크를 설정합니다.
마지막으로
타입스크립트를 or 자바스크립트 or SWC(Speedy Web Compiler)를 설정합니다.
그럼 효율적인 vite로 프레임워크를 만들수있습니다.
포스트 봐주셔서 감사합니다@@
