2강. 개발 환경 만들기 — Vite | 리액트 입문 — 컴포넌트로 만드는 웹 · 입문 — 무료 온라인 강의

🛠️ 왜 Vite인가

리액트 프로젝트를 시작하는 방법은 여러 가지가 있습니다. 한때 표준이었던 create-react-app(CRA)은 이제 거의 쓰이지 않습니다. 현재 가장 널리 쓰이는 도구는 Vite(비트)입니다. Vite가 선택받는 이유는 명확합니다:

속도: 개발 서버 시작이 CRA보다 10~100배 빠릅니다. 파일 변경 시 즉시 반영됩니다.
단순함: 불필요한 설정 없이 빠르게 시작합니다.
표준: 리액트 공식 문서도 Vite를 추천합니다.

📦 Step 1 — Node.js 설치 확인

Vite는 Node.js 환경에서 실행됩니다. 먼저 Node.js가 설치되어 있는지 확인합니다:

// 터미널에서 실행
node --version   // v18.0.0 이상이어야 함
npm --version    // 함께 설치됨

버전이 낮거나 설치가 안 되어 있다면 nodejs.org에서 LTS 버전을 다운로드해 설치합니다. 설치 후 터미널을 재시작하고 다시 확인하세요.

🚀 Step 2 — Vite로 프로젝트 생성

터미널에서 프로젝트를 만들 폴더로 이동한 뒤 아래 명령을 실행합니다:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

각 줄이 하는 일:

npm create vite@latest — Vite 프로젝트 생성 도구 실행. my-react-app은 폴더명(원하는 이름으로 변경 가능). --template react-ts는 React + TypeScript 템플릿 사용.
cd my-react-app — 생성된 폴더로 이동.
npm install — 의존성 패키지 설치.
npm run dev — 개발 서버 실행. http://localhost:5173에서 앱이 열립니다.

브라우저에 Vite + React 로고와 카운터가 보이면 성공입니다.

📁 Step 3 — 폴더 구조 이해하기

생성된 프로젝트의 폴더 구조를 살펴봅시다:

my-react-app/
├── public/          # 정적 파일 (favicon 등) — 그대로 복사됨
├── src/             # 실제 소스 코드 — 여기서 작업
│   ├── assets/      # 이미지 등 에셋
│   ├── App.tsx      # 최상위 컴포넌트
│   ├── App.css      # App 스타일
│   ├── main.tsx     # 앱 진입점 (index.html에 연결)
│   └── index.css    # 전역 스타일
├── index.html       # HTML 템플릿 (수정 거의 없음)
├── package.json     # 의존성 목록
├── tsconfig.json    # TypeScript 설정
└── vite.config.ts   # Vite 설정

가장 중요한 파일은 src/ 안에 있습니다. 특히 main.tsx와 App.tsx를 먼저 열어보세요.

🔍 Step 4 — main.tsx와 App.tsx 읽기

src/main.tsx를 열면:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

이 파일이 앱의 시작점입니다. index.html의 <div id="root">를 찾아서 그 안에 <App /> 컴포넌트를 렌더링합니다. React.StrictMode는 개발 중 잠재적 문제를 감지해주는 래퍼입니다.

src/App.tsx를 열면 현재 화면에 보이는 내용이 들어있습니다. 여기서 내용을 바꾸면 브라우저가 즉시 반영됩니다.

✏️ Step 5 — 첫 수정: App.tsx 바꿔보기

App.tsx의 내용을 모두 지우고 아래로 교체해보세요:

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '100px' }}>
      <h1>안녕, 리액트! 👋</h1>
      <p>첫 번째 리액트 컴포넌트입니다.</p>
    </div>
  )
}

export default App

저장하는 순간 브라우저가 자동으로 업데이트됩니다. 이것이 Vite의 HMR(Hot Module Replacement)입니다. 새로고침 없이 변경 사항이 즉시 반영됩니다.

⚠️ 흔한 설치 오류와 해결

오류 메시지	원인	해결
`node: command not found`	Node.js 미설치	nodejs.org에서 LTS 설치 후 터미널 재시작
`EACCES permission denied`	권한 문제 (macOS)	명령 앞에 `sudo` 붙이거나 nvm 사용
포트 5173 이미 사용 중	다른 앱이 점유	`npm run dev -- --port 3000`으로 포트 변경
빈 화면만 보임	JS 에러	브라우저 콘솔(F12) 확인 후 에러 수정

✅ 정리

Vite는 빠른 개발 환경을 제공하는 현재 표준 빌드 도구입니다.
npm create vite@latest my-app -- --template react-ts 한 줄로 프로젝트가 생성됩니다.
실제 코드는 src/ 안에 있고, main.tsx가 진입점, App.tsx가 최상위 컴포넌트입니다.
저장만 하면 브라우저가 즉시 업데이트되는 HMR이 작동합니다.

개발 환경 만들기 — Vite