새 React 프로젝트를 시작할 때 많은 개발자가 프로젝트 설정 및 구성을 위해 자주 사용하는 명령 도구로 create-react-app 를 사용합니다. 하지만 Vite가 더 나은 대안입니다. 더 빠른 개발 시간과 더 나은 성능을 제공합니다.
Vite란?
Vite는 최신 웹 애플리케이션의 개발 프로세스를 개선하기 위해 설계된 빌드 도구이자 개발 서버입니다. 애플리케이션 모듈을 종속성과 소스 코드로 구분하여 이를 수행합니다. 종속성은 자주 변경되지 않는 모듈인 반면 소스 코드는 일반적으로 개발 중에 자주 편집됩니다.
Vite는 소스 코드의 빌드 프로세스 속도를 높이기 위해 기존 JavaScript 기반 번들러보다 훨씬 빠른 Go 기반 번들러인 esbuild 을 사용합니다. 또한 애플리케이션의 종속성을 미리 번들링하고 네이티브 ESM을 통해 소스 코드를 제공하므로 브라우저에서 모듈 로딩을 최적화하여 애플리케이션 성능을 더욱 효율적이고 빠르게 향상시킬 수 있습니다. 애플리케이션을 프로덕션 환경에 배포할 때 Vite에는 배포를 위해 앱을 자동으로 최적화하는 빌드 명령이 내장되어 있어 애플리케이션이 원활하게 실행되도록 보장합니다.
Vite 프로젝트 만들기
Vite 프로젝트를 만들기 전에 Node.js 버전 14.18+ 또는 16 이상이 필요하다는 점에 유의하세요. 이 문서를 참조하여 Windows 또는 Ubuntu 머신에 Node를 설치할 수 있습니다.
⭐ Windows에 Node.js를 설치하는 방법.
⭐ 우분투에 Npm과 Node.js를 설치하는 방법 알아보기
터미널에서 이 명령을 실행하여 Vite 프로젝트를 생성합니다.
npm create vite@latest
명령이 실행되기 시작하면 프로젝트 이름을 입력하라는 메시지가 표시됩니다. 프로젝트 이름을 입력하고 Enter를 클릭합니다.
다음으로 Vite에서 프레임워크를 선택하라는 메시지가 표시됩니다. React를 선택합니다.
Vite는 또한 변형을 선택하라는 메시지를 표시합니다. JavaScript를 선택합니다.
Vite가 프로젝트 스캐폴딩을 완료하면 생성된 디렉토리로 이동하여 npm을 통해 의존성을 설치합니다.
npm install
프로젝트를 실행하려면 다음 명령을 사용합니다:
npm run dev
여기가 홈 페이지입니다.
프로젝트 편집을 시작할 수 있으며 변경 사항이 브라우저에 반영됩니다.
빠른 개발 속도를 위해 Vite 사용
CRA(create-react-app)는 일반적으로 React 애플리케이션의 프로젝트 구조와 구성을 설정하기 위한 기본 도구입니다. 모든 것이 설정되어 있어 편리하지만 개발 중에 빌드하고 다시 로드하는 속도가 느릴 수 있습니다.
반면에 Vite는 브라우저에서 네이티브 ES 모듈을 사용하여 빌드 시간을 단축합니다. Vite를 사용하고 싶지 않다면 Next.js와 같은 React 메타 프레임워크도 고성능으로 설계되었으므로 선택할 수 있습니다.