목차
2. Vite란?
3. Vite가 CRA보다 좋은 점
4. 에러 해결
Vite 공식 사이트
Vite란?
Vite는 프랑스어로 "빠르다(Quick)"를 의미하며, Vue.js의 창시자인 Evan You가 만든 최신 빌드 도구 및 개발 서버이다.
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있다.
1) 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다.
2) 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공한다.
Vite가 CRA보다 좋은 점
일반적으로 리액트 프로젝트를 만들때 CRA(create-react-app)를 기본적인 빌드 도구로 많이 접할 수 있다.
Vite도 그와 마찬가지라고 보면 되는데, 어느 쪽도 다른 쪽 보다 낫다고 단정지을 순 없지만 Vite가 CRA에 비해 더 나은 점들이 분명히 존재한다. 그 이유는 다음과 같다.
1) 더 빠른 개발 서버
Vite는 최신 브라우저의 기본 ES 모듈 기능을 사용하여 더 빠른 개발 서버 시작 및 주문형 컴파일을 가능하게 한다.
이로 인해 CRA의 Webpack 기반 서버에 비해 응답성이 뛰어난 개발 경험을 얻을 수 있다.
실제로 CRA는 서버가 실행되는데 꽤 오랜 시간이 걸리는데 Vite는 매우 빠르다.
2) 최적화된 빌드 프로세스
Vite는 프로덕션 빌드를 위해 Rollup 번들러를 활용하여 효율적인 트리 쉐이킹 및 더 나은 코드 분할을 제공한다.
이것은 CRA에 의해 생성된 번들에 비해 더 작고 최적화된 번들로 이어질 수 있다.
3) 유연한 구성
Vite는 CRA에 비해 더 유연하고 액세스 가능한 구성 시스템을 제공한다.
CRA를 사용하면 개발자가 특정 사용자 지정을 수행하기 위해 애플리케이션을 "제거"(즉, 기본 Webpack 구성 노출)해야 할 수 있으며, 이로 인해 설정이 더 복잡해질 수 있다.
반면에 Vite는 꺼내지 않고도 더 많은 사용자 정의가 가능한 이해하기 쉬운 구성을 제공한다.
그리고 이러한 유연한 구성으로 인한 맞춤설정 외에도, 기본적으로 다양한 모듈과의 호환성도 CRA에 비해 좋은 편이다. CRA를 사용하다보면 가끔 모듈이나 라이브러리와의 호환성때문에 해결하기 어려운 에러를 만나는 경우가 종종 있기 때문이다.
4) 플러그인 생태계
Vite의 플러그인 시스템은 Rollup의 위에 구축되어 다양한 플러그인을 빌드 프로세스에 쉽게 통합할 수 있다.
CRA용 플러그인 에코시스템도 광범위하지만 Vite와 Rollup의 통합을 통해 특정 플러그인을 더 간단하게 포함할 수 있다.
5) 미래 보장
Vite는 최신 웹 표준을 기반으로 하고 최신 브라우저의 기본 ES 모듈 기능을 활용하기 때문에 미래 보장에 적합하다.
즉, 진화하는 웹 환경에 더 적합하고 새로운 기능과 최적화가 제공되면 이를 활용할 수 있다.
Vite는 최신 JavaScript 기능 및 API와 잘 작동하도록 설계되었으며 확장성을 염두에 두고 구축되어 개발자가 필요에 맞게 조정하고 사용자 지정할 수 있다.
또한 Vite의 유연한 구성 시스템과 플러그인 생태계는 새로운 도구와 기술이 등장할 때 프로젝트에 쉽게 통합할 수 있도록 하여 개발 워크플로의 미래를 보장한다.
전반적으로 Vite는 최신 웹 표준 및 확장성에 중점을 두고 있기 때문에 웹 생태계의 미래 변화에 적응하고 진화할 수 있는 프로젝트를 구축하려는 개발자에게 좋은 선택이다.
Vite로 React 프로젝트 만들기 (명령어)
1) 우선 npm으로 프로젝트를 구축해야하기 때문에, nodejs는 미리 설치되어 있어야 한다.
2) 다음 명령어를 터미널에 입력하여 create-vite 모듈을 전역적으로 설치해준다.
npm install -g create-vite
3) 이후 프로젝트를 만들 디렉토리 내에서 다음과 같은 명령어를 입력한다.
create-vite 프로젝트명 --template react
4) 다음 명령어를 통해 프로젝트 디렉토리 내로 이동하여 종속성 모듈 설치를 진행합니다.
cd 프로젝트명npm install
5) 이후 npm run dev를 입력하고, "ctrl+클릭"을 하면 localhost:5173 에 다음과 같이 클라이언트 서버가 정상적으로 작동하는걸 볼 수 있다. *참고) 서버를 끄고 싶다면 ctrl+c를 하면 된다.
에러 해결
npm run dev를 쳤는데 에러가 났다.
열심히 구글링한 결과 폴더 경로 문제였다. package.json이 있는 폴더에서 명령어를 입력했는지 확인해보자.
