[React] vite로 리액트 설치하기

본 포스팅은 Window 11 환경에서 작성되었습니다.

 

---

 

목차

 

create-react-app 지원 종료

vite를 사용하는 이유

vite 시작하기

 

---

https://devyihyun.tistory.com/168

[React] 리액트 시작하기 / 리액트 설치 / 개발환경

 

---

[Create-React-App 지원 종료]

npx creat-react-app은 리액트를 시작하게 해 준 간편한 도구였다.

복잡한 설정 없이도 바로 개발을 시작할 수 있게 해 줬고 초보자에게는 진입 장벽을 낮춰주는 역할을 했다.

[한글]Create React App 지원 종료

[영문]Create React App 지원 종료

2025년 2월 14일 리액트 공식 블로그에 CRA 사용을 중단한다는 글이 올라왔다.

CRA는 리액트를 쉽게 시작할 수 있게 하지만 CRA를 유지보수 할 담당자가 없고 고성능 앱을 구축하기에는 한계가 있다고 한다.

 

<중단한 이유>

• 라우팅, 데이터 패칭, 코드 분할 기능이 내장되어 있지 않음
• React 팀에서 CRA 유지보수 인력 부족
• 많은 프레임 워크들이 문제를 잘 해결하고 있음
• 많은 개발자들이 자신이 원하는 프레임워크를 구축한다.

 

<CRA를 대신할 것>

<신규 프로젝트>

신규 프로젝트에서는 프레임워크로 새로 만들기를 권장한다.

1. Next.js의 마이그레이션
2. React Router의 프레임워크 도입
3. Expo 웹팩에서 Expo Router로의 마이그레이션

 

프레임워크 사용을 권장 : react + next.js, expo, react router 등

• 클라이언트 사이드 렌더링 및 SPA 지원
• 서버 사이드 렌더링, 정적 사이트 생성, 코드 분할 등 다양한 기능 내장
• 복잡한 설정 없이 빠른 시작 가능

 

<기존 프로젝트>

앱이 특수한 제약 조건을 가지고 있는 경우, 자신만의 프레임워크를 구축하여 문제를 해결하고 싶은 경우,

React가 처음부터 어떻게 동작하는지 배우고 싶은 경우에는 vite, Parcel, RSBuild 등을 이용하여 커스텀 설정을 직접 구축할 수 있다.

CRA에서 프레임워크나 빌드 도구로의 마이그레이션 가이드 제공됨

1. 프레임워크로 마이그레이션
   • Next.js : https://nextjs.org/docs/app/guides/migrating/from-create-react-app
   • React Router : https://reactrouter.com/upgrading/component-routes
   • Expo : https://docs.expo.dev/router/migrate/from-expo-webpack/
2. 빌드 도구 마이그레이션
   • Vite : https://www.robinwieruch.de/vite-create-react-app/
   • Parcel : https://parceljs.org/migration/cra/
   • RSBuild : https://rsbuild.rs/guide/migration/cra

 

<새로운 방법>

1. 프레임워크 사용

권장되는 기본 방식 : Next.js, Remix, Expo 등

• 라우팅, 데이터패칭, 코드 분할, 렌더링 전략 등 통합 제공
• 최적의 성능과 DX(Developer Experience)

2. 빌드 도구 사용 (직접 구축)

사용 가능한 도구 : Vite, Parcel, RSBuild

• 커스텀 프레임워크를 만들고 싶을 때
• 내부 툴이나 간단한 앱 등에서 설정을 통제하고 싶을 때
• React의 동작 원리를 배우고 싶을 때

 

---

[Vite를 사용하는 이유]

<Vite를 선택한 이유>

CRA가 공식적으로 권장되지 않으면서 React 프로젝트를 시작하는 방식으로 Next.js 프레임워크를 사용하는 방법과 Vite 빌드 도구를 사용하는 방법이 있다.

Next.js에 대한 내용은 별도의 포스팅에서 다룰 예정이다.

이번 글에서는 Vite를 사용한 React 개발 환경 구성과 빌드 도구로서의 장점에 대해 작성해 보았다.

 

<Vite란?>

Vite는 React 프로젝트를 설정할 때 가장 많이 사용되는 도구 중 하나이다.

새로운 프로젝트를 만들거나 기존 프로젝트를 변환할 때 Vite를 사용할 수 있다.

 

<Vite의 특징>

• 빠른 개발 서버 시작 : 번들링 없이 ESM(ES Modules) 방식으로 필요한 파일만 제공해 주기 때문에 서버가 아주 빠르게 돈다.
• 빠른 HMR : 코드를 수정할 때 전체 페이지를 새로고침 하지 않고, 수정한 부분만 빠르게 갱신된다. 즉 개발 중에도 앱 상태를 그대로 유지하면서 실시간으로 반영된다.
• 풍부한 기능 : TypeScript, JSX, CSS 등에 대한 기본 지원
• 최적화된 빌드 : Rollup 기반으로 빌드가 되기 때문에 코드 크기를 줄이고 성능을 높여준다.
• 유연한 플러그인 시스템 : 기존 Rollup 플러그인을 그대로 사용할 수 있고, Vite 전용 플러그인도 다양하다.
• 완전히 유형화된 API : 타입 스크립트 기반의 개발을 지원해서 자동 완성이나 타입 안정성을 확보할 수 있다.
• SSR 지원 : 사용자 정의 SSR을 설정하거나 자체 SSR 프레임 워크를 구축하는 것이 쉬워졌다.
• 성장 중인 생태계 : Vite 변경 사항을 다운 스트림 프로젝트에 대해 지속적으로 테스트하여 안정성과 확신을 가지고 Vite를 개선할 수 있도록 지원

 

---

[Vite 시작하기]

<순서>

1. node 버전 확인하기
2. vite로 react 환경 구축하기

 

1. node 버전 확인하기

• node 설치를 안 했다면 → https://devyihyun.tistory.com/166
• node 설치가 되어있다면

node -v

node 버전 확인

node 버전 : 20.19.0 또는 20.19.0 이상인 경우 → 최신 버전 설치

node 버전이 20.19.0 또는 20.19.0 이상이 아닌 경우 → vite 6.3.5 버전 설치

 

vite의 최신 버전은 7.0.0은 출시된 지 얼마 되지 않아 안정성이 충분히 검증되지 않았습니다.

따라서 환경에 따라 검증된 버전을 선택해 설치하는 것을 권장합니다.

 

2. vite로 React 환경 구축하기

node 버전을 확인했다면 vite로 환경을 구축해야 한다.

1. 프로젝트 이름
2. 프레임워크 선택
3. 기타 설정

 

저는 workspace 폴더에서 프로젝트를 세팅해 보겠습니다.

• 최신 버전 설치

npm create vite@latest

• 이전 버전 설치

npm create vite@6.0.0

 

저는 6.3.5 버전으로 설치해 보겠습니다.

npm create vite@6.0.0을 입력하면 vite 6.3.5 버전이 설치된다.

npm create vite@6.0.0

명령어를 입력하면 Project name 프로젝트 이름을 작성하라고 나옵니다.

우선 default인 vite-project로 입력합니다. (엔터를 누르면 디폴트인 vite-project가 입력된다.)

project name

 

프로젝트 이름을 작성하면 프레임워크 선택이 나온다.

프레임워크 목록

 

저는 리액트 환경을 구축하기 위해 react를 선택했습니다.

방향키로 react를 선택 후 엔터

프레임워크 선택

 

원하는 설정을 선택한다.

저는 타입스크립트를 사용하기 위해 타입스크립트를 선택하였습니다.

설정에서 타입스크립트 선택

 

vite로 프로젝트가 생성되었습니다.

vite로 프로젝트 생성 완료

 

먼저 폴더로 이동해 줍니다.

cd 프로젝트 폴더

폴더 이동

 

npm install 입력

npm install 입력

 

npm run dev 입력

npm run dev 입력

vite 프로젝트 웹 브라우저

프로젝트

설치가 잘 된 것을 확인할 수 있다.

 

만약 오류가 생겼다면 밑에 게시글을 확인해 보자!

https://devyihyun.tistory.com/231

[E-LOG] vite 환경 설정 오류 해결법

 

 

 

 

글을 써두고 당연히 업로드를 했을 거라 생각했다.
왜 업로드를 안해놨을까.. ㅠㅠ 이걸 이제야 올린다.

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://ko.vite.dev/guide/

Vite

 

https://news.hada.io/topic?id=19242

`create-react-app` 지원 종료 | GeekNews

 

https://ko.react.dev/blog/2025/02/14/sunsetting-create-react-app

Create React App 지원 종료 – React

 

https://github.com/vitejs/vite

GitHub - vitejs/vite: Next generation frontend tooling. It's fast!