React 환경설정/React 실행흐름

✅ Vite란?

Vite는 빠른 번들링과 개발 서버 속도를 자랑하는 프론트엔드 빌드 도구다. 특히 React 프로젝트에서 핫 리로딩 속도나 초기 빌드 속도에서 큰 장점을 보여준다.

 

✅ 프로젝트 생성

npm create vite@latest

 

💡 npm 7 이상 필요

명령어를 실행하면 터미널에서 다음과 같은 대화형 설정이 진행된다:

• Project name: 프로젝트 폴더 이름
• Package name: package.json의 name 속성값 (소문자로 작성!)
• Select a framework: React 선택
• Select a variant: TypeScript 선택

설정 완료후 프로젝트 디렉터리가 생성되면 다음 명령어를 통해 해당 폴더로 이동할 수 있다.

cd 프로젝트이름

 

✅ 프로젝트 초기설정

npm install

의존성 설치가 완료되면, 개발 서버를 실행할 수 있다.

npm run dev

콘솔창에 http://localhost:5173/주소가 뜨고 Ctrl+클릭을 해서 브라우저에서 해당 주소가 열리면 성공적으로 설정된 것이다.

 

✅ 생성된 프로젝트 구조

• node_modules: 설치된 패키지 모음
• public: 정적 파일 저장 공간
• src: 실제 코드 작성 위치
  • App.tsx: 메인 컴포넌트
  • main.tsx: 앱의 진입점
• index.html: HTML 템플릿 (SPA 기반으로 React 앱이 삽입됨)
• package.json: 프로젝트 정보와 의존성 명시
• tsconfig.json: TypeScript 설정
• vite.config.ts: Vite 설정 파일

✅ 자주 사용하는 명령어

npm run dev      # 개발 서버 실행 (핫 리로딩 포함)
npm run build    # 프로덕션 빌드 생성 (dist 폴더)
npm run preview  # 빌드된 앱을 로컬에서 미리보기

🔥 핫 리로딩이란?
전체 앱을 다시 시작하지 않고, 수정된 부분만 빠르게 반영해주는 기능. 개발 생산성을 크게 향상시킨다.

✅ 실행 중 자주 만나는 에러

1. npm is not recognized: Node.js와 npm이 설치되어 있지 않음 → 설치 필요
2. Permission denied (macOS):
   sudo 명령어 사용하거나 권한 설정 확인

✅ 주요 설정 파일 살펴보기

1. package.json

스크립트 및 의존성 정의가 담겨 있다. 예시:

//package.json

"scripts": {
  "dev": "vite",
  "build": "tsc -b && vite build",
  "lint": "eslint .",
  "preview": "vite preview"
}

• dependencies: 실제 앱 실행에 필요한 라이브러리
• devDependencies: 개발에만 필요한 도구들 (예: ESLint, TypeScript)

2. vite.config.ts

Vite의 빌드 및 플러그인 설정을 담당한다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

• JSX 인식 플러그인 설정
• @를 src로 매핑하는 alias 설정

3. index.html

React 앱의 뼈대 역할을 하는 HTML 템플릿. 개발 서버에서도 이 파일을 기준으로 앱이 실행된다.

 

---

React 프로젝트 실행흐름 이해하기

---

✅ main.tsx?

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom'

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

✅ 실행 순서 정리

1. App.tsx
   실제 UI를 구성하는 루트 컴포넌트. 여기에 페이지나 컴포넌트들이 계층적으로 배치된다.
2. main.tsx
   App.tsx를 불러와 브라우저에 표시해주는 역할. React-Router를 적용할 경우 BrowserRouter로 감싸서 라우팅 기능을 활성화한다.
3. index.html
   HTML 구조의 루트 역할을 하며, id="root"인 요소에 React 앱이 삽입된다.

즉, 흐름은 index.html → main.tsx → App.tsx 순서로 이어진다.

 

✅ 코드 분석

1. createRoot

createRoot(document.getElementById('root')!)

• React 18부터 도입된 createRoot는 새로운 Concurrent 모드를 지원한다.
• index.html의 <div id="root"></div> 요소를 가져와 여기에 React 앱을 "붙이는" 역할을 한다.

---

2. StrictMode

<StrictMode> ... </StrictMode>

• 개발 모드에서만 활성화되는 도구.
• 잠재적인 문제를 조기에 감지하고 경고해준다.
• 실 운영 환경에선 자동으로 제거되므로 성능에 영향 없음.

---

3. BrowserRouter

<BrowserRouter> ... </BrowserRouter>

• React Router를 사용하는 경우 반드시 필요한 컴포넌트.
• URL 경로를 기반으로 컴포넌트를 렌더링할 수 있게 만들어준다.
• 내부적으로 history API를 사용하여 페이지 전환을 처리한다.

---

✅ 마무리

이처럼 main.tsx는 React 앱의 시작점이자 핵심 연결부다. HTML의 root 요소에 JavaScript로 작성된 컴포넌트를 렌더링하고, 여기에 라우팅 기능과 개발 도구들을 얹는 구조라고 보면 된다.