React 설치

📂 React 설치하는 방법

1.Node.js LTS 버전이나 최신 안정 버전을 내려받아 설치하기

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

2.  Visual Studio Code 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

설치가 완료되었는지 확인하려면 명령크롬프트를 관리자버전으로 실행한 뒤 버전 확인

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 를 실행함
• 동작 과정:
  1. Webpack Dev Server 실행
  2. Babel로 코드 변환 (JSX, 최신 JS → ES5)
  3. 번들링(하나의 큰 JS 파일로 묶음) 후 브라우저에 제공
  4. HMR(Hot Module Replacement) 제공 — 코드 수정하면 새로고침 없이 갱신됨
• 실행 주소: 보통 http://localhost:3000

👉 특징: 안정적이지만 번들링 속도가 느리고, 앱이 커지면 빌드가 무거워짐

2. Vite → npm run dev

• Vite는 Rollup + ESBuild 기반의 최신 빌드 도구
• npm run dev 는 vite 명령을 실행함
• 동작 과정:
  1. ESBuild로 소스코드를 아주 빠르게 변환
  2. 브라우저의 네이티브 ES Modules (ESM) 기능을 활용 → 필요한 모듈만 로딩
  3. 개발 중에는 번들링을 거의 안 함 → 즉시 실행
  4. HMR 제공 — CRA보다 훨씬 빠르고 부드럽게 반영
• 실행 주소: 보통 http://localhost:5173

👉 특징: 시작 속도와 HMR 속도가 매우 빠름, 대규모 프로젝트에서도 쾌적