🟦 [React] 어떤 빌드 도구를 사용하는지 알아보는 법 (ex. Vite, Next.js, CRA)

내가 프로젝트를 처음부터 구축하는 것이 아닌 이상 어떤 걸 썼는지 파악 먼저 해야한다!

 

기존에 있던 프로젝트를 받게 되어서 빌드 도구 알아보기!

1. package.json 파일 확인하기 (가장 확실한 방법)

=> devDpendencies 아니면 dependencies  찾아보기

"devDependencies": {
  "vite": "^4.0.0", // Vite 사용
}

"dependencies": {
  "next": "^14.0.0", // Next.js 사용
  "react-scripts": "^5.0.0" // CRA 사용
}

 

2. vite.config.js, next.config.js 파일 확인

=> 없다면 CRA 또는 Webpack 기반 프로젝트일 가능성이 높음

 

3. package.json의 scripts 확인

// Vite 프로젝트
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

// Next.js 프로젝트
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

// CRA 프로젝트
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

 

 

📌 어떤 걸 써야 할까?

비교 항목	react-scripts (CRA)	Vite	Next.js
사용 목적	기본적인 SPA	빠른 개발 환경	SEO & SSR
설정 가능 여부	제한적 (eject 해야 함)	vite.config.js 수정 가능	next.config.js 수정 가능
속도	느림 (Webpack 기반)	빠름 (ES 모듈 기반)	보통 (SSR/SSG에 따라 다름)
SEO 지원	❌ 없음 (CSR)	❌ 없음 (CSR)	✅ 있음 (SSR/SSG 지원)
서버 기능	❌ 없음	❌ 없음	✅ API 라우팅 지원
핫 리로드	보통	매우 빠름	보통