[React] Vite로 React 프로젝트 만들기

 

 

 

vite로 React 프로젝트를 생성해보면

 

알아서 잘 해주기 때문에 너무 간단하다.

 

 

 

728x90

 

 

 

 

npm create vite@latest

yarn create vite

 

 

둘 중에 편한거로 만들면, 

vanilla, react 등등이 뜨는데 react를 선택.

 

그리고 typescript, javascript, remix 할 건지 뜨는데 편한거 선택.

 

보기중에 +swc 라는 것이 있는데,

swc는 Speedy Web Compiler로 Rust로 개발되어 속도가 빠르다.

babel의 대체재이다.

 

선택하면,

프로젝트 폴더로 이동하여 npm i, npm run dev를 실행하면

 

 

이런 화면을 볼 수 있다.

 

기존에 사용하던 webpack과의 차이는

 

 

웹팩(Webpack)과 바이트(Vite)는 모두 현대적인 자바스크립트 프로젝트를 위한 모듈 번들러 및 개발 서버다. 그러나 각각의 접근 방식과 목적에 약간의 차이가 있다.

1. 번들링 방식:
   • 웹팩: 웹팩은 모든 모듈을 번들링하여 하나의 번들로 생성한다. 이는 대규모 애플리케이션에서 모듈의 종속성을 관리하기에 좋다.
   • 바이트: 바이트는 빠른 개발을 위해 처음부터 ESM(ES Module)을 직접 사용하고, 개별 모듈을 번들링하지 않는다. 대신, 개발 중에는 실제 모듈로 서빙하며, 프로덕션 빌드 시 번들링을 진행한다.
2. 개발 서버 속도:
   • 웹팩: 웹팩의 개발 서버는 번들링 시간 때문에 느릴 수 있다.
   • 바이트: 바이트의 개발 서버는 빠르며, 개발 시에는 실제 모듈을 사용하기 때문에 더 빠른 개발 반응 속도를 제공한다.
3. 환경 구성:
   • 웹팩: 복잡한 구성이 가능하며, 다양한 로더 및 플러그인을 통해 다양한 작업을 처리할 수 있다.
   • 바이트: 바이트는 간단한 설정만으로도 빠르게 프로젝트를 시작할 수 있으며, 초기 구성이 더 간단하다.
4. 생태계:
   • 웹팩: 웹팩은 이미 많은 생태계와 플러그인이 존재하며, 커뮤니티가 크고 활성화되어 있다.
   • 바이트: 바이트는 상대적으로 새로운 프로젝트이므로 생태계가 웹팩만큼은 크지 않지만, 빠른 발전과 커뮤니티의 확장이 예상된다.
5. 프로젝트 유형:
   • 웹팩: 대규모 및 복잡한 프로젝트에 적합하다.
   • 바이트: 작은 및 중간 규모의 프로젝트 및 빠른 개발 반응 속도가 필요한 프로젝트에 적합하다.

따라서 프로젝트의 규모, 요구 사항 및 개발자의 선호도에 따라 웹팩 또는 바이트 중 하나를 선택할 수 있다.

 

 

 

 

 

 

참고

https://www.daleseo.com/swc/