웹 애플리케이션의 기능이 더욱 풍부해짐에 따라 빠르고 효율적인 빌드 도구에 대한 수요가 계속 증가하고 있습니다.
Vite는 초고속 개발 서버와 최적화된 빌드 프로세스를 제공하는 최신 빌드 도구로, 사용자가 워크플로우를 간소화하고 최종 사용자 경험을 개선할 수 있도록 지원합니다.
설치 프로세스, 필수 기능, 명령줄 인터페이스(CLI) 명령어 등 Vite를 시작하는 방법을 살펴봅니다.
Vite 프로젝트 초기화
Vite 를 사용하려면 먼저 시스템에 Node.js와 Node 패키지 관리자를 설치해야 합니다. 이 두 패키지를 설치한 후 Vite로 프로젝트를 생성할 수 있습니다.
npm init vite
이 명령을 실행하면 현재 작업 디렉터리에 새 Vite 프로젝트가 생성됩니다. 이 명령은 새 Vite 프로젝트를 설정하기 위한 기본 구성을 선택하라는 메시지를 표시합니다.
다음은 명령이 선택하라는 메시지를 표시하는 옵션에 대한 분석입니다:
⭐ 프로젝트 이름. 명령을 실행하면 새 프로젝트의 이름을 입력하라는 메시지가 표시됩니다. 입력한 이름은 package.json 파일에도 표시되며 프로젝트 디렉터리의 이름으로 사용됩니다.
⭐ 프레임워크를 선택합니다. 프로젝트에 사용할 프레임워크를 선택하라는 메시지가 표시됩니다. Vite는 현재 React, Vue, Angular와 같은 인기 있는 프런트엔드 프레임워크와 일반 자바스크립트 코드를 위한 Vanilla 옵션을 지원합니다.
⭐ 변형을 선택합니다. JavaScript 및 그 하위 언어인 TypeScript와 같은 대안을 포함하여 프로젝트에 사용할 변형을 선택하라는 메시지가 표시됩니다.
필요한 정보를 입력하면 현재 작업 디렉터리에 새 프로젝트 구조가 생성됩니다. 이 구조는 package.json 파일, index.html 및 main.js 파일이 있는 src 디렉토리, 공개 디렉토리 등 기본 프로젝트 설정을 나타냅니다.
프로젝트 구조를 생성한 후 cd <project-name> 을 실행하여 프로젝트 디렉토리로 이동할 수 있습니다. 그런 다음 프로젝트에 필요할 수 있는 추가 종속성을 npm 설치 명령을 사용하여 설치합니다.
개발 서버를 시작하고 프로젝트의 변경 사항을 모니터링하려면 프로젝트 터미널에서 npm run dev 명령을 실행합니다.
Vite의 특징
Vite의 기능은 빌드 프로세스를 간소화하고 웹 빌드 경험을 향상시키는 데 중점을 둡니다.
빠른 개발 서버
Vite의 개발 서버는 네이티브 ES 모듈과 지연 모듈 로딩을 활용하여 놀라운 속도를 구현합니다. 이를 통해 빠른 피드백 루프와 초고속 시작 시간이 가능합니다.
최적화된 빌드 프로세스
Vite는 프로덕션에 바로 사용할 수 있고 최적화되고 간소화된 코드를 생성하도록 빌드 절차를 개선했습니다. 또한 바스트 및 버전 에셋을 캐시할 수 있는 매니페스트 파일을 생성합니다.
다양한 프런트엔드 프레임워크 지원
Vite는 Vue를 비롯한 다양한 프런트엔드 프레임워크와 React Js, Angular Js와 같은 유사한 프레임워크를 지원합니다. 따라서 개발자는 선호하는 프레임워크를 선택하여 Vite의 강력한 기능을 활용할 수 있습니다.
핫 모듈 교체(HMR)
Vite의 핫 모듈 교체(HMR) 기능을 사용하면 전체 페이지를 새로 고칠 필요 없이 애플리케이션을 빠르고 원활하게 업데이트할 수 있습니다. 이를 통해 개발 프로세스를 더 빠르고 효율적으로 진행할 수 있습니다.
CSS 전처리 및 포스트CSS 통합
Vite는 Sass, Less, Stylus를 포함한 CSS 전처리를 지원합니다. 또한 PostCSS와 통합되어 CSS를 추가로 변환하고 최적화할 수 있습니다.
Vite는 TypeScript, JSX, WebAssembly 지원 등 다양한 기능을 제공합니다. Vite v4.0.4가 출시되면서 Vite의 개발자 커뮤니티가 성장하여 정기적으로 새로운 기능을 추가하는 등 활발하게 소프트웨어를 유지 관리하고 있습니다.
Vite의 명령줄 인터페이스(CLI)
Vite의 명령줄 인터페이스(CLI)는 Vite의 동작을 사용자 지정할 수 있는 편리한 도구입니다. 개발 프로세스를 간소화하는 데 도움이 되는 다양한 필수 명령을 제공합니다. 다음은 몇 가지 중요한 CLI 명령어입니다:
vite build
이 명령은 프로덕션 환경에 맞게 애플리케이션을 빌드하여 코드를 최적화하고 축소하여 배포할 수 있도록 준비합니다. 이 명령을 사용하면 애플리케이션을 최대한 빠르고 효과적으로 빌드하여 사용자에게 배포할 준비가 되었는지 확인할 수 있습니다.
vite preview
이 명령을 사용하면 생성된 코드를 프로덕션에 배포하기 전에 미리 볼 수 있습니다. 모든 것이 예상대로 표시되고 작동하는지, 주의가 필요한 명백한 문제나 이슈는 없는지 확인하려는 경우 이 명령을 실행하면 유용합니다.
vite 최적화
vite 최적화 프로젝트 코드를 분석하고 트리 셰이킹, 코드 분할 작업을 수행하고 작은 에셋을 최종 빌드에 직접 임베드하여 앱 로드에 필요한 요청을 줄임으로써 최적화된 프로덕션 빌드를 생성하는 Vite 2.6 이상 버전에서 사용할 수 있습니다.
vite optimize는 vite 빌드 명령 중에 자동으로 실행되어 최적화된 프로덕션 빌드를 생성합니다. 별도로 실행하여 빌드 크기와 성능을 확인할 수도 있습니다.
Vite의 구성 파일
Vite에서 구성 파일은 빌드 프로세스에 대한 다양한 옵션을 정의합니다. Vite 구성 파일은 JavaScript와 ES6 모듈 구문을 사용합니다.
기본적으로 구성 파일의 이름은 vite.config.js로 지정하고 프로젝트의 루트 디렉터리에 배치해야 합니다.
다음은 Vite 구성 파일에서 가장 일반적으로 사용되는 몇 가지 옵션입니다:
⭐ root. 프로젝트의 루트 디렉터리를 지정합니다.
⭐ 서버. 개발 서버를 구성합니다. 여기에는 호스트, 포트 구성 및 API 백엔드로 요청을 프록시하는 옵션이 포함됩니다.
⭐ 플러그인. Vite 빌드 프로세스에 플러그인을 추가할 수 있습니다. 플러그인은 새로운 파일 형식에 대한 지원을 추가하거나 소스 코드를 변환하는 등 어떤 방식으로든 빌드 프로세스를 수정하는 기능입니다.
⭐ 해결. Vite가 프로젝트에서 임포트를 해결하는 방법을 구성합니다. 여기에는 별칭, 확장자 및 모듈 디렉터리를 지정하는 옵션이 포함됩니다.
다음은 Vite 구성 파일의 예입니다:
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
server: {
port: 3000,
open: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
plugins: [],
});
이 구성 파일은 다음을 사용하여 기본 Vite 프로젝트를 설정합니다:
포트 3000에서 실행되는 로컬 개발 서버
src 디렉터리의 별칭
플러그인 없음
강력한 커뮤니티가 있는 Vite
여러 온라인 리소스에서 React, Vue, Angular와 같은 인기 프레임워크에서 Vite를 사용하는 방법을 매우 자세히 설명합니다.
또한 공식 문서에는 Vite를 효과적으로 사용하는 방법에 대한 풍부한 정보가 있습니다. 이러한 리소스를 활용하면 다음 프로젝트에 Vite를 통합할 수 있습니다.