프론트엔드 개발의 세계는 빠르게 변화하고 있습니다. 새로운 라이브러리와 도구들이 쏟아져 나오면서, 개발자들은 더 효율적이고 빠른 개발 환경을 제공하는 도구들을 찾고 있습니다. 그중 최근 주목받고 있는 도구 중 하나가 바로 Vite입니다. 전통적인 웹팩(Webpack) 등의 번들러보다 가볍고 빠르게 프로젝트를 시작할 수 있다는 장점을 가지고 있어 많은 개발자들이 React와 같은 프레임워크와 함께 Vite를 사용하고 있습니다. 이번 글에서는 Vite의 특징과 React 애플리케이션을 어떻게 Vite를 사용하여 쉽게 생성할 수 있는지 알아보겠습니다.
Vite란 무엇인가?
Vite는 프랑스어로 '빠름'을 의미하며, 이 이름 그대로 빌드와 개발 속도가 매우 빠르다는 것을 자랑하는 툴입니다. Vite는 기존의 번들러 도구와는 다른 방식으로 작동하며, 여러 가지 기술적 혁신을 통해 번들링 과정에서 생기는 비효율성을 최소화했습니다. Vite는 특히 개발 서버와 번들링 두 가지 측면에서 큰 장점을 제공합니다.
1. 빠른 개발 서버: Vite는 모듈을 미리 번들링하지 않고, ES 모듈을 기반으로 필요한 파일만을 즉시 서버에 로드합니다. 덕분에 대규모 프로젝트에서도 서버 시작 시간이 매우 짧습니다.
2. 최적화된 번들링: 개발 중에는 ES 모듈을 활용하지만, 프로덕션 빌드를 할 때는 Rollup을 사용하여 최적화된 번들 파일을 생성합니다. 이 방식은 더 작은 파일 크기와 빠른 로딩 속도를 보장합니다.
3. 핫 모듈 리플레이스먼트 (HMR): Vite는 HMR 기능을 통해 코드 변경 시 페이지를 새로고침하지 않고도 변경 사항을 즉시 반영합니다. 이는 개발자에게 보다 효율적인 피드백 루프를 제공하여 생산성을 높여줍니다.
4. 다양한 플러그인 지원: Vite는 기본적으로 Rollup 기반이므로 다양한 Rollup 플러그인을 활용할 수 있습니다. 또한, React, Vue, Svelte 등의 다양한 프레임워크와도 쉽게 통합할 수 있습니다.
Vite와 기존 번들러의 차이점
기존의 번들러, 특히 Webpack은 매우 유연하고 강력한 도구로 오랜 기간 동안 널리 사용되었습니다. 하지만 Webpack은 종종 복잡하고, 설정이 어렵거나 대규모 프로젝트에서는 빌드 속도가 느려지는 문제가 있었습니다. 이에 반해 Vite는 초기 로딩 속도와 개발 편의성에서 Webpack보다 뛰어난 성능을 보입니다.
Webpack은 코드 전체를 미리 분석하고 번들링하는 반면, Vite는 개발 단계에서 필요한 파일만 즉시 로드합니다. 이로 인해 Vite는 서버를 실행하는 속도뿐만 아니라 코드 변경에 따른 피드백 속도도 매우 빠릅니다. 이러한 차별점 덕분에 Vite는 특히 빠른 개발 환경을 필요로 하는 프론트엔드 개발자들이 많이 사용하고 있습니다.
Vite를 사용하여 React App 생성하기
Vite가 무엇인지 알아보았으니, 이제 실제로 React 애플리케이션을 Vite로 생성하는 방법을 알아보겠습니다.
1. Node.js 설치 확인
Vite는 Node.js 환경에서 동작하기 때문에, 기본적으로 Node.js가 설치되어 있는지 확인해야 합니다. 터미널에 다음 명령어를 입력하여 Node.js가 설치되어 있는지 확인하고 설치되지 않았다면 아래 Node.js 공식 사이트를 통해 다운로드 하고 설치합니다.
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
2. Vite로 React 프로젝트 생성
Vite로 React 프로젝트를 생성하는 과정은 매우 간단합니다. 터미널에서 프로젝트를 생성할 디렉토리로 이동한 후, 다음 명령어를 입력합니다.
npm create vite@latest
참고로 해당 명령어를 처음 실행할 경우 vite 패키지가 설치되지 않아 아래와 같이 설치할 것인지 묻는 질문이 먼저 나오며 이때 “y”를 입력해 설치해주면 됩니다.
Need to install the following packages:
create-vite@5.5.3
그렇게 설치하고 나면 아래와 같이 프로젝트의 이름을 물어보는 프롬프트가 첫 번째로 나타나고 저는 my-react-app-01이라고 입력해주었습니다. 그리고 템플릿을 선택하는 프롬프트가 나타나며 여기서는 React를 선택해줍니다.
그 다음으로 React 프로젝트에서 사용할 JavaScript 혹은 TypeScript의 버전을 선택하라는 질문이 나오고 JavaScript로 개발을 진행할 것이기 때문에 JavaScript를 선택해줍니다.
√ Project name: ... my-react-app-01
? Select a framework: » - Use arrow-keys. Return to submit.
> Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others
? Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
> JavaScript
JavaScript + SWC
Remix ↗
이 과정을 모두 지나고 나면, 폴더에 새로운 React App 프로젝트가 생성되고
아래와 같은 메시지가 출력됩니다.
Scaffolding project in 폴더경로\my-react-app-01...
Done. Now run:
cd my-react-app-01
npm install
npm run dev
3. 프로젝트 설치 및 실행
프로젝트를 생성한 후, 해당 디렉토리로 이동하여 필요한 depedencies와 devDependencies의 라이브러리들을 설치해줘야 합니다.
우선 아래 명령어를 통해 해당 디렉토리로 이동합니다.
cd my-react-app-01
그리고 아래 명령어를 통해 필요한 라이브러리들을 설치해 줍니다.
npm install
이제 아래 명령어를 통해 Vite 개발 서버를 실행해줍니다.
npm run dev
이렇게 명령어를 실행하면 다음과 같은 메시지가 나타나고 vite 개발 서버가 로컬에서 실행됩니다.
VITE v5.4.8 ready in 686 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
이제 브라우저에서 http://localhost:5173/로 이동하면 아래와 같이 기본 React 웹 애플리케이션을 확인할 수 있습니다.
4. React 코드 변경 및 HMR 확인해보기
마지막으로 React 코드를 변경해주고 Vite의 강력한 기능 중 하나인 *핫 모듈 리플레이스먼트(HMR)를 확인해보겠ㅅ브니다. 코드를 변경하면 브라우저가 자동으로 변경된 내용을 반영합니다. 이를 테스트하기 위해 src/App.jsx 파일을 열고 텍스트를 변경해보겠습니다.
기존에 <>,</> 사이에 있던 코드를 모두 지운 후 “<h1>"개발 시작해보기"</h1>” 코드만 삽입 후 저장해보겠습니다.
그렇게 저장하고 나면, 별다른 작업을 하지 않아도 실행시켜 놓았던 페이지가
아래와 같이 변경되는 것을 바로 확인할 수 있습니다.
Vite의 장점과 단점
그럼 간단하게 Vite의 장점과 단점에 대해서 마지막으로 정리해보곘습니다.
장점
빠른 개발 서버: 서버 시작 속도가 매우 빠르며, 대규모 프로젝트에서도 성능 저하가 적습니다.
간편한 설정: 기본적인 설정으로도 충분히 사용 가능하며, 필요에 따라 확장이 가능합니다.
핫 모듈 리플레이스먼트 (HMR): 코드 변경 시 즉각적으로 브라우저에 반영되므로 빠른 개발이 가능합니다.
경량화된 번들: Rollup 기반의 최적화된 번들링을 제공하여, 더 작은 파일 크기로 프로덕션 환경에 배포할 수 있습니다.
단점
특정한 사용 사례 제한: Webpack만큼 다양한 기능을 제공하지는 않으므로, 매우 복잡한 설정이나 요구사항을 가진 프로젝트에서는 Vite가 부족할 수 있습니다.
새로운 툴에 대한 러닝 커브: 기존의 번들러에 익숙한 개발자라면, Vite의 새로운 개념과 설정 방식에 적응하는 데 시간이 필요할 수 있습니다.
마무리
Vite는 프론트엔드 개발자에게 빠르고 간편한 개발 환경을 제공합니다. 특히 React와 같은 현대적인 프레임워크와 함께 사용하기에 매우 적합하며, 기존의 번들러보다 훨씬 빠른 개발 서버와 HMR 기능을 통해 개발자 생산성을 크게 높일 수 있습니다. Webpack에 비해 가볍고 빠른 Vite는 새로운 프로젝트를 시작할 때 고려할 만한 훌륭한 선택지입니다. 이번 글에서 간단하게 Vite란 무엇인지 알아보고 새로운 프로젝트를 생성해 보았습니다. 생성된 프로젝트안에는 어떤 파일들로 구성되어 있고 실행되는 원리는 무엇인지 알아볼 것이 많아 앞으로 계속 포스팅해보며 공부한 내용을 정리해보겠습니다.