“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
[Vite] Veu에서 빠른 React 사용을 위해 만든 로컬 개발 서버
Vite
Next Generation Frontend Tooling
vitejs.dev
Vue에서 만든 node.js기반의 bundle
Vite는 최신 JavaScript 프레임워크 및 라이브러리에서 사용되는 도구로, 개발자가 웹 애플리케이션을 개발하고 빌드하는 데 도움을 주는 빠르고 경량화된 빌드 도구입니다. Vite는 Vue.js 프레임워크를 위해 만들어졌지만 React, Preact, Svelte 등 다른 프레임워크와도 함께 사용할 수 있습니다. Vite의 주요 의도는 개발자가 개발 및 디버깅 과정에서 빠르고 효율적인 개발 환경을 제공하는 것입니다.
장점:
- 빠른 개발 환경: Vite는 빠른 개발을 위해 HMR(Hot Module Replacement)을 사용하여 코드 변경 시 즉시 브라우저를 새로고침하지 않고도 변경 사항을 확인할 수 있습니다. 이를 통해 개발자는 빠른 반복 개발을 할 수 있습니다.
- 경량화된 빌드: Vite는 ES 모듈 기반으로 동작하며, 개발 중에는 각 모듈을 개별적으로 빌드하고 번들링하지 않습니다. 이는 빠른 초기 로딩 속도와 최적화된 번들 크기를 제공합니다.
- 개발 서버와 플러그인: Vite는 자체 개발 서버를 내장하고 있으며, 플러그인을 사용하여 기능을 확장할 수 있습니다. 다양한 플러그인이 제공되어 개발자가 프로젝트에 필요한 추가 기능을 쉽게 구성할 수 있습니다.
- ESM(ES Modules) 지원: Vite는 ES Modules를 지원하여 모듈을 표준 JavaScript로 빌드할 수 있습니다. 이는 다른 번들러와 호환성을 유지하면서도 모듈 시스템의 이점을 활용할 수 있게 합니다.
단점:
- 상대적인 신생 기술: Vite는 비교적 최근에 출시된 도구이므로 다른 번들러와 비교했을 때 사용자 수와 생태계가 덜 발달되어 있을 수 있습니다. 따라서 일부 플러그인이나 지원하는 라이브러리가 다른 도구에 비해 제한적일 수 있습니다.
- 복잡한 설정: Vite는 설정이 상대적으로 복잡할 수 있으며, 기존의 번들러와 다른 작동 방식을 가지고 있을 수 있습니다. 이는 사용자에게 학습 곡선이 있을 수 있다는 의미입니다.
사용 방법:
- 프로젝트 설정: 새로운 Vite 프로젝트를 설정하려면 Vite CLI를 사용하여 프로젝트를 초기화합니다. 다음으로 프로젝트 종속성을 설치하고 필요한 구성 파일을 작성합니다.
- 개발 서버 실행: Vite는 개발 서버를 내장하고 있으므로 명령어를 사용하여 개발 서버를 실행합니다. 개발 서버는 코드 변경 시 자동으로 다시 빌드하고 브라우저에 반영되는 변경 사항을 실시간으로 표시합니다.
- 빌드: 개발이 완료되면 Vite를 사용하여 프로덕션용으로 애플리케이션을 빌드합니다. 이 단계에서 Vite는 코드를 최적화하고 번들을 생성하여 배포할 준비를 합니다.
Vite는 고속 개발 환경과 최신 모듈 시스템을 활용하여 개발자가 더욱 효율적으로 웹 애플리케이션을 개발할 수 있도록 지원합니다.
사용법
Vite를 사용하여 프로젝트를 설정하고 실행하는 방법은 다음과 같습니다:
1. 프로젝트 설정: Vite를 사용하여 새로운 프로젝트를 설정하려면 다음 명령어를 사용합니다:
npm init vite@latest- 이 명령어는 프로젝트를 위한 초기 구성 파일을 생성합니다. 생성된 구성 파일은 프로젝트 종속성을 관리하는 package.json 파일입니다.
- 종속성 설치: 프로젝트를 설정한 후, 프로젝트 폴더로 이동한 다음 종속성을 설치해야 합니다. 다음 명령어를 사용하여 종속성을 설치합니다:
npm install3. 개발 서버 실행: 종속성이 설치되었다면 다음 명령어를 사용하여 Vite 개발 서버를 실행합니다:
npm run dev이 명령어는 개발 서버를 시작하고 웹 애플리케이션을 브라우저에서 볼 수 있게 합니다. Vite는 변경 사항을 감지하고 빠르게 새로고침하여 개발 과정을 보다 효율적으로 만듭니다.
4. 프로덕션 빌드: 프로덕션 빌드를 위해서는 다음 명령어를 사용합니다:
npm run build이 명령어는 프로덕션용으로 애플리케이션을 빌드하고 번들을 생성합니다. 생성된 번들은 최적화되고 압축되어 배포에 사용됩니다.
Vite는 Vue.js 프로젝트를 위한 기본 설정으로 실행됩니다. 그러나 React, Preact, Svelte 등의 다른 프레임워크를 사용하려는 경우에도 동일한 방식으로 작업할 수 있습니다. Vite의 개발 서버는 변경 사항을 실시간으로 반영하기 때문에 코드를 수정하면 브라우저에서 자동으로 업데이트되므로, 더 빠르고 효율적인 개발 경험을 제공합니다