📂 React 설치하는 방법
1.Node.js LTS 버전이나 최신 안정 버전을 내려받아 설치하기
https://nodejs.org/ko/download
Node.js — Node.js® 다운로드
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
nodejs.org
2. Visual Studio Code 설치
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
설치가 완료되었는지 확인하려면 명령크롬프트를 관리자버전으로 실행한 뒤 버전 확인
node -v
npm -v
3. React 앱 생성
리액트 공식 문서에서는 Create React App이 점점 deprecated 되어가고 있고, Vite와 같은 툴을 사용하는 것을 권장하고 있음
작업 프로젝트에 아래 명령을 입력 하면 리액트 프로젝트 생성이 가능함.
예전엔 create-react-app을 이용했는데 지원종료되어 리액트 신버전 사용이 불가능
npm create vite@latest

Project name vs Package name 차이
Project name → 폴더 이름 (내 PC 안에서만 사용) → 그대로 입력하면 myreactProject 라는 디렉터리가 생김
Package name → package.json 안에 들어가는 npm 패키지 이름 → 소문자 + 하이픈(-)만 쓰는 게 규칙 (npm 규칙 때문) → 그래서 대문자가 자동으로 소문자로 바뀌거나, 띄어쓰기/특수문자는 제거돼서 myreactproject 로 됨
4. 실행
npm create vite@latest … 명령이 프로젝트 템플릿 생성
npm install로 필요한 패키지 설치
npm run dev 로 개발 서버 실행
기본적으로 http://localhost:5173 (혹은 Vite가 정해주는 포트) 에서 앱 볼 수 있음
------------------------------------------------------------------------------
Vite 방식: npm run dev
CRA(Create React App) 방식: npm start
브라우저에서 표시되는 localhost 주소 접속해서 리액트 앱 화면 나오면 성공
5. 파일/폴더 설명
- node_modules 폴더 : 설치한 라이브러리의 소스코드 보관 폴더
- public 폴더 : 데이터파일 이미지파일 등 쓸데없는 파일 보관소 (여기 넣으면 나중에 사이트 발행시 원본 보존가능)
- package.json : 설치한 라이브러리 기록용 파일
- eslint.config : lint, vite 설정용 파일
- index.html : 메인페이지, App.js 내용을 main.js에 넣고 그걸 index.html에 넣는 식으로 짜여져있음
📂 CRA 방식와 Vite 방식 차이
1. CRA (Create React App) → npm start
- CRA는 Webpack + Babel 기반으로 만들어져 있음
- npm start 는 react-scripts start 를 실행함
- 동작 과정:
- Webpack Dev Server 실행
- Babel로 코드 변환 (JSX, 최신 JS → ES5)
- 번들링(하나의 큰 JS 파일로 묶음) 후 브라우저에 제공
- HMR(Hot Module Replacement) 제공 — 코드 수정하면 새로고침 없이 갱신됨
- 실행 주소: 보통 http://localhost:3000
👉 특징: 안정적이지만 번들링 속도가 느리고, 앱이 커지면 빌드가 무거워짐
2. Vite → npm run dev
- Vite는 Rollup + ESBuild 기반의 최신 빌드 도구
- npm run dev 는 vite 명령을 실행함
- 동작 과정:
- ESBuild로 소스코드를 아주 빠르게 변환
- 브라우저의 네이티브 ES Modules (ESM) 기능을 활용 → 필요한 모듈만 로딩
- 개발 중에는 번들링을 거의 안 함 → 즉시 실행
- HMR 제공 — CRA보다 훨씬 빠르고 부드럽게 반영
- 실행 주소: 보통 http://localhost:5173
👉 특징: 시작 속도와 HMR 속도가 매우 빠름, 대규모 프로젝트에서도 쾌적