vite란 빠르고 간결한 모던 웹 프로젝트 개발 경험에 맞춰 탄생한 빌드 도구이다.
나는 CRA로 프로젝트를 시작하였으므로 기본적으로Webpack이라는 빌드 도구를 사용하고 있는 셈인데,
Webpack은 안정적이라는 장점이 있지만 느린 빌드 시간이 단점이라는 사실을 알게 되었다.
프로젝트가 커질수록 빌드와 개발 서버 시작 시간이 길어진다.
그에 반해 vite는 Webpack보다 빠른 빌드 속도를 제공한다. 또한 개발 중에는 필요한 파일만 로드하고 빌드 시에만 번들링을 수행하며 설정이 간단하다.
vite가 이와 같은 장점을 가지고 있어 vite를 사용하기로 결정했다.
vite 설치 및 적용 방법
1. 기존 CRA 프로젝트 정리
나는 CRA로 이미 프로젝트를 시작한 상황이기 때문에 우선 CRA 프로젝트의 관련 의존성을 제거해야 한다.
npm uninstall react-scripts 명령어를 입력해 제거해주었다.
2. Vite 설치
npm install vite @vitejs/plugin-react 명령어를 입력하여 vite와 관련 플러그인을 설치해주려고 하는데, 이번에는 vite와 @types/node 버전 간의 충돌이 발생하였다.
그래서 npm install @types/node@latest --save-dev
@types/node를 vite에서 요구하는 최신 버전으로 업데이트 해 준 후 vite를 다시 설치해주었더니 충돌 없이 잘 설치되었다.
3. vite.config.ts 설정
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});나는 이와 같이 설정하였는데, 하나하나 설명해보려고 한다.
우선 defineConfig 함수는 vite 설정을 명확하게 정의하기 위해 사용되며 타입 안정성을 제공하므로 vite 설정에 오류가 있을 경우 개발자가 미리 알 수 있다고 한다.
@vitejs/plugin-react 플러그인은 vite에서 리액트를 쉽게 사용할 수 있도록 돕는 플러그인이다. 리액트 컴포넌트를 트랜스파일하고, JSX 문법을 지원하며 빠른 HMR(핫 모듈 리플레이스먼트)를 통해 개발 중 즉각적으로 화면 업데이트가 가능하다.
defineConfig 함수 내부에 설정을 전달하고 vite가 이를 읽어 빌드 도구로서 작동하게 되는 기본 설정을 해주었다.
4. index.html을 루트 경로로 이동
말 그대로 public 폴더에 있던 index.html 파일을 루트 경로로 이동시켜준다.
5. package.json 수정
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}scripts 속성 부분을 위와 같이 수정해주었다.
이제 npm run dev 명령어를 입력하면 vite로 개발 서버를 실행할 수 있다.
그래서 npm run dev를 입력하였는데
에러 발생 ,,
열심히 구글링하여 문제점과 해결법을 찾았다!
나는 아직 미처 지우지 못한 Webpack 파일 등이 남아있어서 문제가 생겼나 했는데 아니었다ㅠ
일단 해결법부터 얘기하자면 index.html 파일의
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
이 부분을 주석처리 해주니 해결되었다.
원인은 vite가 %PUBLIC_URL%을 인식하지 못하기 때문이다.
CRA는 빌드 시 %PUBLIC_URL%와 같은 변수들을 실제 URL로 대체하지만, vite는 이러한 변수들을 자동으로 처리해주지 않아 vite 환경에서 이 변수를 사용하면 에러가 발생하게 되는 것이다.
따라서 %PUBLIC_URL%와 같은 변수를 사용하지 않도록 경로를 수정하면 해결된다!
