React와 Vite 프로젝트 시작 setting

React와 Vite 프로젝트를 시작을 위한 셋팅하기

 

1.  React + Vite 프로젝트 생성

npm create vite@latest 프로젝트명 --template react

* * React + Typescript + Vite 프로젝트 생성

npm create vite@latest 프로젝트명 --template react-ts

 

2. 프로젝트 폴더로 이동

 

cd 프로젝트명

 

3. 필요한 패키지 설치

npm install

 

4. 개발 서버 실행

npm run dev

 

 

🎈 Vite를 사용한 이유

Vite를 프로젝트에 사용한 이유는 빠르고 효율적인 개발 환경을 제공하기 때문이다. Vite는 특히 초기 로딩과 실시간 개발에서 탁월한 성능을 보이며, 이러한 장점이 프로젝트 진행을  원활하게 만들어준다. 구체적으로는 다음과 같은 이유에서 Vite를 선택했다.

1. 빠른 개발 서버 시작: Vite는 모듈 기반으로 필요한 파일만 로딩하므로, 개발 서버가 즉시 시작된다. 특히 프로젝트 규모가 커질수록 이러한 빠른 로딩 속도는 큰 차이를 만든다. 개발 초기부터 빠르게 테스트하고 피드백을 받을 수 있어 개발 속도가 향상된다.
2. 효율적인 Hot Module Replacement (HMR): Vite는 변경된 모듈만 갱신하는 방식의 HMR을 지원하여, 코드 수정 후 즉각적으로 화면에 반영된다. 이로 인해 코드 수정 사항을 실시간으로 확인하며 개발할 수 있어 작업 효율성이 높아진다.
3. 최적화된 빌드: Vite는 개발 환경과 빌드 환경을 각각 최적화하여 사용한다. 개발 중에는 ESM(ES 모듈)을 사용하고, 최종 빌드 시에는 Rollup을 통해 번들링을 최적화하여 성능 좋은 결과물을 만들 수 있다.
4. 설정의 간단함과 유연성: Vite는 설정이 간단해 빠르게 개발을 시작할 수 있도록 돕는다. vite.config.js를 통해 필요한 설정을 쉽게 변경할 수 있으며, React와 같은 프레임워크와도 자연스럽게 통합되어 추가 설정 없이도 개발을 진행하기 용이하다.

이러한 이유로 Vite는 프로젝트에서 빠르고 효율적인 개발 환경을 지원하며, 초기 로딩부터 빌드까지 개발자가 원하는 성능과 유연성을 제공한다. Vite를 통해 생산성을 높이고 개발 프로세스를 간소화하는 것이 주요 목적이었다.

 

 

🎈 기타 다른 번들러 도구들

1. Webpack:
   • 설명: JavaScript 생태계에서 가장 널리 사용되는 번들러로, 다양한 플러그인과 설정 옵션을 제공해 커스터마이징이 용이하다.
   • 장점: 방대한 플러그인 생태계, 높은 호환성, 유연한 설정. 대규모 프로젝트에 적합하다.
   • 단점: 설정이 복잡하고, 초기 로딩 속도가 느리며, HMR 속도가 Vite보다 다소 느릴 수 있다.
   • 추천 상황: 커스텀 설정이 복잡하게 필요한 대규모 프로젝트에 유리하다.
2. Parcel:
   • 설명: Parcel은 설정이 거의 필요하지 않은 번들러로, ‘제로 설정’을 강조하며 자동 최적화 기능을 제공한다.
   • 장점: 초보자도 쉽게 접근할 수 있으며, 빠른 빌드 및 HMR을 지원해 개발 생산성을 높인다.
   • 단점: 플러그인과 설정 면에서는 Webpack이나 Vite에 비해 한계가 있을 수 있다.
   • 추천 상황: 설정 없이 빠르게 시작할 수 있는 개발 환경이 필요한 프로젝트에 적합하다.
3. Snowpack:
   • 설명: Snowpack은 Vite와 유사하게 ESM을 활용해 필요한 모듈만 로드하여 개발 속도를 높인다.
   • 장점: 빠른 개발 서버 시작 및 HMR, 모듈 캐싱 기능이 뛰어나다. Vite와 비슷한 모듈 기반 방식이라 로딩 속도가 빠르다.
   • 단점: 최근 업데이트 빈도가 줄어들면서 Vite만큼 활발히 사용되지 않는 편이다.
   • 추천 상황: Vite의 대체로 고려할 만하지만, 생태계와 업데이트가 활발한 최신 프로젝트에서는 Vite가 더 나은 선택일 수 있다.
4. esbuild:
   • 설명: esbuild는 초고속 JavaScript 번들러로, Go 언어로 작성되어 매우 빠른 빌드 속도를 제공한다.
   • 장점: 빌드 속도가 매우 빠르며, 많은 프로젝트에서 미들웨어나 플러그인으로 사용된다.
   • 단점: 기능이 기본적인 번들링에 집중되어 있어, 복잡한 설정을 다루기에는 다소 한계가 있다.
   • 추천 상황: 빌드 속도가 매우 중요한 프로젝트에서, 번들링 및 트랜스파일링만 필요할 때 사용하기 좋다.

이외에도 프로젝트의 특성과 요구 사항에 따라 Rollup과 같은 도구를 사용할 수도 있다.