현업 표준으로 자리 잡은 Vite(비트)의 원리를 이해하고, 단 3줄의 명령어로 프로젝트를 실행하는 법을 배웁니다.
🐢 아직도 npm start 누르고 기다리시나요?
리액트를 처음 배울 때 국룰처럼 쓰던
npx create-react-app.
하지만 프로젝트 규모가 조금만 커져도 저장할 때마다 갱신 속도가 느려
답답했던 경험, 다들 있으실 겁니다.
공식 문서에서도 이제는 CRA 대신 다른 프레임워크 사용을 권장하고 있다는
사실을 아시나요?
그 대안 중 가장 가볍고 빠르며, 설정이 간편한 것이 바로
Vite(프랑스어로 '빠르다'는 뜻)입니다.
1️⃣ 왜 Vite가 압도적으로 빠를까?
CRA는 Webpack이라는 번들러를 사용합니다.
이는 코드 한 줄만 고쳐도 전체 프로젝트를 다시 묶어서 빌드하는 방식을
사용하기 때문에 느릴 수밖에 없습니다.
반면 Vite는 브라우저가 지원하는 ES Modules(ESM) 방식을
사용하여, 변경된 파일만 쏙 골라서 교체합니다.
📊 CRA vs Vite 성능 비교
| 구분 | CRA (Webpack) | Vite (esbuild) |
|---|---|---|
| 개발 서버 시동 | 30초 ~ 수 분 소요 | 거의 즉시 (300ms 내외) |
| HMR (수정 반영) | 프로젝트 클수록 느려짐 | 규모 상관없이 항상 빠름 |
| 언어 | JavaScript 기반 | Go 언어 기반 (100배 빠름) |
* HMR(Hot Module Replacement): 코드를 수정했을 때 새로고침 없이 변경
사항만 반영하는 기술.
2️⃣ 1분 컷! 프로젝트 생성부터 실행까지
이제 직접 설치해 보겠습니다.
Node.js가 설치되어 있다고 가정하고 진행합니다.
터미널(맥은 iTerm, 윈도우는 PowerShell 추천)을 열고 아래 순서대로
입력하세요.
npm create vite@latest my-app
# 2. 프레임워크 선택 과정
Select a framework: React 선택
Select a variant: JavaScript (또는 TypeScript) 선택
# 3. 폴더 이동 및 패키지 설치
cd my-app
npm install
# 4. 개발 서버 실행
npm run dev
CRA와 다르게 npm create vite 명령어를 입력하면 즉시 설치가
완료되는 것이 아니라, 어떤 프레임워크를 쓸지 물어보는
대화형 메뉴가 나옵니다.
방향키로 React를 선택하고 엔터를 치면 순식간에 뼈대
파일이 생성됩니다.
3️⃣ CRA와 구조가 조금 달라요!
프로젝트를 열어보면 폴더 구조가 조금 다르다는 것을 알 수 있습니다.
당황하지 마세요. 더 직관적으로 바뀐 것뿐이니까요.
-
📁 index.html의 위치:
CRA에서는public폴더 안에 숨어 있었지만, Vite에서는 최상위 루트(Root)에 나와 있습니다.
Vite는 index.html을 진입점으로 삼기 때문입니다.
-
⚙️ 확장자 규칙 (.jsx):
CRA는.js파일에서도 JSX 문법이 작동했지만, Vite는 반드시 .jsx 확장자를 사용해야 합니다.
이는 명시적인 파일 구분을 통해 빌드 속도를 높이기 위함입니다.
📝 마치며: 가벼운 시작이 개발 효율을 높인다
오늘은 무거운 CRA를 벗어던지고 Vite로 가볍게 시작하는
방법을 알아보았습니다.
초기 세팅 속도가 빠르다는 것은 개발자가 "아이디어"를 "구현"하는 데 걸리는
장벽이 낮아진다는 뜻입니다.
지금 바로 터미널을 열고 npm create vite@latest를 입력해
보세요.
그 쾌적함에 다시는 예전으로 돌아갈 수 없을 겁니다.
댓글 쓰기