[React] 환경 설정
개요
React 프로젝트는 Vite를 사용해 생성하는 것이 현재 표준입니다. Vite는 빠른 개발 서버와 최적화된 빌드를 제공합니다.
필수 설치
Node.js
- nodejs.org 에서 LTS 버전 설치
- v18 이상 권장 (v22+ 최신)
# 버전 확인
node -v # v22.x.x
npm -v # v10.x.x
프로젝트 생성
Vite + React + TypeScript
# 새 프로젝트 생성 (현재 폴더에 생성)
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev
브라우저에서 http://localhost:5173 접속하면 기본 화면 확인.
생성된 파일 구조
my-app/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css ← App 컴포넌트 스타일 (삭제 가능)
│ ├── App.tsx ← 메인 컴포넌트 (여기서 시작!)
│ ├── index.css ← 전역 스타일
│ ├── main.tsx ← React를 HTML에 부착하는 진입점
│ └── vite-env.d.ts ← Vite 타입 선언
├── index.html ← HTML 진입점
├── package.json
├── tsconfig.json ← TypeScript 설정
├── tsconfig.node.json
└── vite.config.ts ← Vite 설정
각 파일 역할
index.html
React 앱이 마운트되는 HTML 파일. id="root" div가 React의 시작점.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div> <!-- React가 여기에 렌더링됨 -->
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
src/main.tsx
React 앱을 DOM에 부착하는 진입점. 거의 수정하지 않음.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
src/App.tsx
실제로 개발을 시작하는 파일. 깔끔하게 정리해서 시작하자.
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
자주 사용하는 명령어
| 명령어 | 설명 |
|---|---|
npm run dev |
개발 서버 시작 (Hot Reload 지원) |
npm run build |
프로덕션 빌드 (dist/ 폴더 생성) |
npm run preview |
빌드 결과물 로컬 미리보기 |
TypeScript 설정 확인
tsconfig.json에서 strict: true가 활성화되어 있는지 확인.
{
"compilerOptions": {
"strict": true, // ← 엄격 모드 활성화 (권장)
"target": "ES2020",
"jsx": "react-jsx"
}
}
추천 VS Code 확장
| 확장 | 설명 |
|---|---|
| ES7+ React snippets | React 코드 스니펫 |
| Prettier | 코드 자동 포맷 |
| ESLint | 코드 품질 검사 |
| React Developer Tools | Chrome 브라우저 확장 (디버깅) |
파일 정리 (선택)
불필요한 초기 파일 제거:
# 삭제해도 되는 파일들
src/App.css
src/assets/
src/index.css도 내용을 지우고 필요한 스타일만 추가해서 사용.
