리액트 프로젝트 기초 세팅

기본 세팅

---

1. 런타임 도구 선택

NodeJS vs Bun

 

2. 프로젝트 세팅 방식 선택

CRA vs Vite

 

3. 언어 선택

Js vs Ts

 

✅ CRA (Create React App)

• 무엇?
  React 팀이 공식 제공하던 React 앱 보일러플레이트 생성 도구.
  • 내부적으로 Webpack 기반.
  • npx create-react-app my-app 으로 시작.
• 특징
  • 한때 React 입문 표준.
  • 설정 숨겨져 있어 커스터마이즈 어려움 (eject 필요).
  • 지금은 거의 레거시로 취급 → React 공식 문서도 Vite나 Next.js 권장.

---

✅ Vite

• 무엇?
  Evan You(Vue.js 만든 사람)이 만든 프론트엔드 빌드 도구 & 개발 서버.
  • 개발 서버: esbuild 기반 → 기동/핫리로드 속도 빠름.
  • 프로덕션 빌드: Rollup 기반.
• 특징
  • React, Vue, Svelte 등 프레임워크 불문하고 빠른 개발 환경 제공.
  • SSR, 라이브러리 모드 지원.
  • CRA보다 훨씬 가볍고 확장성 높음.
  • 신규 React 프로젝트의 사실상 표준.

---

✅ Bun

• 무엇?
  Node.js 같은 JS/TS 런타임 + 패키지 매니저(npm/pnpm 대체) + 번들러까지 합친 올인원 툴체인.
• 특징
  • bun install → npm/pnpm보다 수 배 빠른 의존성 설치.
  • Node.js API 대부분 호환.
  • bun create vite my-app 처럼 Vite 프로젝트 생성도 가능.
  • 아직 생태계/호환성이 100%는 아님 → 개인·실험용으론 좋고, 실무에서는 Node가 안정적.

---

✅ 한 줄 요약

• CRA = React 전용 옛날 스타터 (Webpack 기반, 이제 레거시).
• Vite = 요즘 대세인 프론트엔드 빌드/개발 서버 (빠르고 가볍다).
• Bun = Node 대체하는 차세대 런타임 + 패키지 매니저 + 번들러 (Vite 프로젝트도 Bun으로 시작/실행 가능).

---

👉 즉,

• CRA와 Vite는 "React 프로젝트를 세팅하는 방식" 차이.
• Bun은 Node.js 자리를 대체하는 "런타임/도구".

 

최근 Bun이 Star Rank가 가장 높다구 한다!

 

 

기초 세팅

---

1. VS Code 실행

2. vite + js 기반 프로젝트 실행

# Vite 공식 CLI로 프로젝트 생성
npm create vite@latest my-app