minstudio

Vite 기반 프로젝트 시작하기: 개발 환경 세팅과 폴더 구조

왜 CRA 대신 Vite인가요?

과거에는 React 프로젝트를 시작할 때 Create React App (CRA)를 표준처럼 사용했습니다. 그러나 웹팩(Webpack) 기반의 CRA는 프로젝트 규모가 커질수록 빌드 및 로컬 서버 시작 속도가 느려지는 치명적인 단점이 있습니다.
현재의 표준은 Vite(바이트)입니다. 프랑스어로 '빠르다'를 뜻하는 Vite는 브라우저의 네이티브 ES Module을 활용하여 대규모 프로젝트에서도 즉각적인 HMR(Hot Module Replacement)과 초고속 서버 구동을 보장합니다.
bash - React Installation
$ npm create vite@latest my-react-app -- --template react

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
명령어 상세 설명
  • npm create vite@latest : 가장 최신 버전의 Vite 툴을 실행하여 스캐폴딩(초기 세팅)을 시작합니다.
  • my-react-app : 생성될 프로젝트의 폴더 이름입니다. 원하는 이름으로 자유롭게 변경 가능합니다.
  • -- : npm에게 "이 뒤에 나오는 옵션들은 npm 자체가 아닌, 실행할 패키지(Vite)에게 직접 전달해라"라는 의미를 가지는 관례적인 구분자(Separator)입니다.
  • --template react : 여러 지원 환경 중 순수 React 템플릿을 사용하여 자동 구성하겠다는 옵션 명령어입니다. (TypeScript를 쓰고 싶다면 react-ts를 입력합니다)

Vite 프로젝트 폴더 구조

my-app
node_modules/
public/
favicon.svg
src/
assets/
App.css - App 컴포넌트 전용 스타일
App.jsx - 최상위 루트 컴포넌트
index.css - 전체 앱 공통 스타일
main.jsx - React 렌더링 엔트리 포인트
.gitignore
eslint.config.js - 코드 린터(Linter) 설정 파일
index.html - 메인 HTML 파일 (Vite의 진입점)
package-lock.json
package.json - 프로젝트 의존성 라이브러리 및 스크립트
README.md
vite.config.js - Vite 빌드 도구 설정 파일

💡 StrictMode란 무엇인가요?

main.jsx 파일을 보면 <StrictMode> 컴포넌트가 전체 앱을 감싸고 있는 것을 볼 수 있습니다.
Strict Mode(엄격 모드)는 애플리케이션 내의 잠재적인 문제를 찾아내기 위한 도구입니다. UI를 렌더링하지 않으며, 하위 컴포넌트들에 대해 부가적인 문법 검사와 경고를 활성화합니다. (예: 안전하지 않은 생명주기 메서드 사용 경고, 레거시 API 사용 경고 등)
핵심 특징: 개발 모드에서 2번 렌더링 React 18 이상에서 개발 모드(Development)로 실행할 경우, Strict Mode는 컴포넌트의 렌더링 과정(예: useEffect)을 의도적으로 두 번씩 실행합니다.
이는 불순물(Side Effect)이 있는 렌더링 로직이나 메모리 누수를 개발자가 빨리 발견하고 수정할 수 있도록 돕기 위함입니다. 실제 배포되는 운영(Production) 환경에서는 한 번만 렌더링되므로 안심하셔도 됩니다. 
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)
실행 결과
Vite 기반 프로젝트 시작하기: 개발 환경 세팅과 폴더 구조 | Minstudio