Vite

🔎 Vite란?

Vue.js의 개발팀에서 만든 빌드 도구로서 프로젝트를 위한 빠른 개발 서버와 빌드 도구를 제공하는 도구

🌟 Vite 주요 특징

✔︎ 빠른 개발 서버

: vite는 개발 서버를 통해 실시간 리로딩과 모듈 핫 리플레이스먼트 (HMR)를 지원. 이는 개발 중에 코드 변경을 빠르게 반영할 수 있어 생산성을 향상시켜줌

❓ 실시간 리로딩(Live Reloading)
→ 개발자가 코드를 수정하고 저장할 때, 웹 페이지를 자동으로 새로 고치는 기능. 개발자가 코드를 변경하고 저장하면, 브라우저는 현재 열려있는 웹 페이지를 자동으로 다시 로드하여 변경 사항을 즉시 반영.
→ 이를 통해 코드 수정 후 브라우저를 수동으로 새로 고칠 필요가 없어지므로 개발 생산성이 크게 향상

❓ 모듈 핫 리플레이스먼트(Module Hot Replacement, HMR)
→ 코드 변경 시 수정된 모듈만 다시 로드하여 애플리케이션을 새로 고치지 않고도 변경 사항을 즉시 반영.
예를 들어, 특정 모듈을 수정하면 해당 모듈만 다시 로드되고 해당 모듈을 사용하는 다른 모듈도 자동으로 업데이트
→ 이를 통해 애플리케이션의 전체 새로 고침 없이도 변경 사항을 확인할 수 있으므로, 개발자가 작업 중에 현재 상태를 유지하면서 빠르게 코드 테스트 가능

✔︎ 빠른 빌드

: vite는 빌드 시간을 크게 단축시키는 ESM 기반의 빌드 시스템을 사용. 이는 개발 의존성을 런타임 의존성과 분리하여 효율적인 빌드를 가능하도록함

❓ESM (ES Modules) 기반 빌드 시스템
→ 모듈 시스템: ES Modules는 JavaScript의 표준 모듈 시스템. 코드를 더 구조화하고 재사용 가능한 모듈을 만들 수 있도록 함
→ 트리 쉐이킹(Tree Shaking): 불필요한 코드를 제거하는 데 효과적. 사용되지 않는 모듈 및 함수를 제거하여 번들 크기를 최소화
→ 효율적인 의존성 관리: 모듈 간의 의존성이 명시적이며, 빌드 시스템이 필요한 모듈만 가져올 수 있음
→ 동적 로딩: 모듈을 동적으로 로딩하고 필요할 때만 가져올 수 있는 동적 import 기능 지원

✔︎ 다양한 프레임워크 지원

: 초기에는 Vue.js를 위한 도구로 시작하였으나, 현재는 Vue.js, React, Svelte 등 다양한 프레임워크와 라이브러리 지원

✔︎ 단순한 설정

: Vite는 간단하고 직관적인 설정 제공. 복잡한 설정 파일 없이 기본 설정으로도 대부분의 프로젝트 시작 가능

🌟 Vite 시작하기

1. 프로젝트 생성

새로운 프로젝트 디렉토리를 만들고, 해당 디렉토리로 이동

2. Vite 초기화

Vite 프로젝트 초기화

npm init vite

3. 프로젝트 의존성 설치

프로젝트 초기화가 완료되면 필요한 의존성을 설치

npm install

4. 개발 서버 시작

Vite 개발 서버를 시작

npm run dev

이로써 개발 서버를 실행할 수 있고, 실시간 리로딩과 모듈 HMR을 통해 개발을 시작할 수 있다.

CRA(Create React App) 🆚 Vite

❗️ Vite와 CRA는 모두 웹 애플리케이션 개발을 위한 도구이지만 목적과 특징이 다르다.

Vite는 특히 빠른 개발 및 빌드 속도에 중점을 둔 프로젝트에 적합하며, CRA는 React 앱을 빠르게 시작하고 설정하지 않고도 프로젝트를 개발할 수 있는 간단한 방법을 제공한다.

✔︎ CRA

• React 기반 웹 애플리케이션을 빠르게 시작할 수 있는 공식 도구
• 기본 설정이 미리 구성되어 있으며, 프로젝트 시작 시 몇 가지 선택 사항을 제공
• 프로젝트 구성을 자동화하고 최적화된 빌드 설정을 제공하여 개발자가 구성을 걱정하지 않아도 됨
• 기본적으로 Webpack을 사용하며, 추가 설정이나 확장이 필요한 경우 eject 명령을 사용하여 설정을 노출 시킬 수 있음

✔︎ Vite

• 빠른 개발과 빌드 속도를 강조하는 도구. Vue.js 기반 프로젝트에서 시작되었지만 이제는 다양한 프레임워크와 라이브러리 지원
• Vite는 모듈 번들링 및 개발 서버를 효율적으로 처리하며, 빠른 개발 환경 제공
• ESM를 기반으로 한 빌드 시스템을 사용하여 빌드 속도 빠름

결론

프로젝트의 목표와 요구사항에 따라 Vite 또는 CRA 중 하나를 선택하는 것이 더 간단하고 일반적이다.
→ 두 도구를 함께 사용하면, 웹 애플리케이션 개발을 위한 도구로서 기본적인 기능이 중복될 수 있어서 개발 및 관리 복잡성이 증가할 수 있다.
또한, Vite는 CRA 보다 빠른 개발 서버 및 빌드 속도를 제공하기 때문에 Vite를 사용한다면 CRA를 함께 사용할 필요성이 상대적으로 적어진다.