[React] Vite 설치 및 기본 개념 이해

Vite로 React 앱 만들기

1. Vite 설치 및 프로젝트 생성

절차

1. 터미널을 onebite-react 폴더로 이동합니다.
2. 다음 명령어를 입력합니다:
3. npm create vite@latest
4. 프로젝트 이름을 묻는 창이 나오면 원하는 이름을 입력합니다.
   (예시: section_custom)
5. "Select a framework" 질문에서는 방향키로 React를 선택합니다.
6. "Select a variant" 질문에서는 JavaScript를 선택합니다.
7. 프로젝트 폴더(section_custom)로 이동한 후, 의존성 설치를 위해 다음 명령어를 실행합니다:
8. npm install
9. 설치가 완료되면 node_modules 폴더와 다수의 라이브러리들이 추가됩니다.

Tip: 직접 React 설정을 구성하려면 번거로운 작업(webpack 설정, babel 설정, 환경구성 등)이 필요한데, Vite는 이를 자동으로 설정해주어 빠른 개발 환경 구성이 가능합니다.

---

2. 폴더 구조 이해

public 폴더

• HTML에서 직접 접근할 수 있는 정적 파일(Static Assets)을 저장하는 곳입니다.
• 예시: .png, .jpg, .svg, .mp4, .woff (폰트) 등
• 접근 방식:(※ 슬래시 /를 붙여 public 루트 기준으로 경로를 지정합니다.)
• <img src="/logo.png" />

src 폴더

• "source"의 약자로 애플리케이션의 실제 코드가 들어갑니다.
• 여기서 작성하는 코드들은 Vite가 번들링(묶어주기)해 브라우저에 전달합니다.

src 주요 폴더:

• assets/: 정적 파일 보관소 (이미지, 스타일시트 등). 단, 이 파일들은 코드에서 import하여 사용합니다. (※ public과의 차이점은 나중에 자세히 다룹니다.)
• components/: React 컴포넌트 보관소

---

3. package.json 이해 및 스크립트 실행

역할

• 프로젝트 메타정보(이름, 버전, 의존성 목록 등)를 담고 있습니다.
• 주요 스크립트 항목:
• { "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } }

명령어

• 개발 서버 실행
  • 실행 후 콘솔에 http://localhost:5173/ 같은 주소가 표시됩니다.
  • 해당 URL을 클릭해 가동 중인 리액트 앱을 브라우저에서 확인할 수 있습니다.
• npm run dev
• 단축키(h)
  • 터미널에 h 입력 → 개발 서버 관련 핫키(재시작, 종료 등) 안내.

---

4. React 앱 구동 원리

요약

• npm run dev를 실행하면 Vite가 내장된 개발 서버를 가동시킵니다.
• 기본적으로 localhost:5173 (포트 번호는 상황에 따라 다를 수 있음)에서 웹 서버가 실행됩니다.

흐름

1. 브라우저가 localhost:5173에 접속하면 public/index.html을 받아옵니다.
2. index.html 안에는 다음과 같은 스크립트가 있습니다:
3. <script type="module" src="/src/main.jsx"></script>
4. 이 스크립트가 src/main.jsx 파일을 불러옵니다.

---

5. React 요소 렌더링 과정

main.jsx 분석

파일 내용:

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

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

주요 개념

• createRoot()
  • document.getElementById('root')를 찾아서 React의 루트 노드로 설정합니다.
• .render()
  • 루트 노드에 React 요소를 실제로 렌더링합니다.
• <StrictMode>
  • React의 개발 모드에서 잠재적인 문제를 감지해주는 래퍼입니다. 실제 DOM에 영향을 주진 않습니다.
• <App />
  • App.jsx 파일에서 import된 React 컴포넌트입니다.
  • 컴포넌트란 여러 요소를 하나로 묶어 재사용할 수 있는 UI 단위입니다.

---

실제 화면 연결 과정 요약

1. index.html이 기본 구조 제공
2. main.jsx가 루트 엘리먼트에 React 렌더링
3. App.jsx가 첫 화면 컴포넌트를 정의하고 렌더링

---

✅ 실무 팁

• Vite는 기본적으로 **핫 리로딩(Hot Reloading)**을 지원합니다. 코드 수정 시 브라우저가 자동으로 갱신됩니다.
• public 폴더에 저장하는 파일은 빌드 시 그대로 복사되며 최적화되지 않습니다.
  반면, src/assets에 저장하고 import하는 방식은 번들링 및 최적화 대상이 됩니다.
• package.json 관리에 익숙해지면, 직접 다양한 개발 스크립트를 추가해 자동화할 수 있습니다.