vite에 대해 질문있습니다.

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

4.2) 첫 React App 생성하기

해결된 질문

작성

안녕하세요 리액트 부분에 대해 강의를 듣다가 vite라는 내용이 나오던데 이 vite를 설치하니 src나 index.html 등등 여러 파일들이 설치가 되고 src폴더에서는 App.tsx 파일명으로 나오더라구요. 여기서 조금 헷갈리는 것이 npx create-react-app 설치와 비슷한데 이 vite는 정확히 무엇이고 또 npx create-react-app 이 부분과 다른건지도 궁금합니다.

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

우선 Vite와 create-react-app 모두 기본 설정이 완료된 리액트 앱을 쉽게 생성하도록 도와주는 도구입니다. 이런 도구를 "보일러플레이트" 라고 부르는데요 쉽게 말해 기본 재료들이 다 준비되어 있는 밀키트 같은거라고 생각하시면 됩니다 😃

이중 create-react-app은 현재 Vite에 밀려있는 상태입니다. 리액트 공식문서에서도 creat-react-app 보다는 vite 또는 Next.js를 사용할 것을 권장하고 있는 상황이며 각종 기능 및 성능 지표에서 vite보다 좋지 않은 모습을 보여주고 있습니다.

따라서 강의에서는 vite로 안내드리고 있음을 참고해주시면 감사하겠습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님!

Vite와 Create React App(CRA)은 모두 새로운 리액트 프로젝트를 설정할 때 사용하는 도구입니다. 각각의 차이점은 다음과 같습니다:

Vite:
- Vite는 빠른 개발 환경 설정을 위한 빌드 도구입니다. 초기 개발 서버 시작 속도가 매우 빠르고, 최신 브라우저의 ES Module을 활용하여 핫 모듈 리플레이스먼트(HMR)가 굉장히 빠른 것이 특징입니다.
- 최신 JavaScript 기능과 ES6+ 모듈을 지원하며, 설정이 간단합니다.
- Vite는 비단 React에 국한되지 않고 다양한 프로젝트에서 사용할 수 있는 범용적인 빌드 도구입니다.
Create React App:
- CRA는 React 프로젝트 생성을 위한 페이스북에서 유지보수하는 표준 도구입니다. 설정 없이 바로 개발을 시작할 수 있는 환경을 제공합니다.
- CRA는 웹팩(Webpack) 기반으로 동작하며, 환경 설정이 이미 구축되어 있는 상태로 제공됩니다. 하지만 이는 때때로 시작 시 느리거나 커스텀 설정이 어려운 점으로 평가되기도 합니다.

Vite와 CRA의 주요 차이는 초기 속도 및 모듈화 방식일 수 있습니다. Vite는 ES Module 시스템을 활용하여 매우 빠른 개발 환경을 제공하는 데 반해, CRA는 전통적인 웹팩으로 설정되어 있어 유연한 개발 환경을 제공합니다. 개발 프로젝트의 유형에 따라 선택하여 사용하시면 됩니다.

관련 질문을 다룬 게시물도 추천드립니다:

제가 제공한 설명이 도움이 되었길 바랍니다. 프로젝트에 맞는 선택을 통해 원활한 개발 진행이 되시길 바랍니다. 궁금한 점이 더 있다면 언제든 이어서 질문해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

vite에 대해 질문있습니다.