Vite 는 무엇인가?

---

■ 작동 환경
    1) Vite 자체는 Node.js 런타임 환경 위에서 동작하는 도구입니다.
    2) 개발용 서버로 작동할 경우 vite dev 명령어가 Node 프로세스에서 실행됩니다.
    3) Rollup, esbuild 같은 트랜스파일러와 번들러도 Node 기반 라이브러리입니다.

■ Development Sever(개발서버)
   : 개발 중에 ESM(ES Module)을 이용하여 코드를 실시간으로  브라우저에 전달합니다.
       ⓐ 기존 Webpack은 코드 전체를 번들링 후 브라우저에 전달하므로 → 느림
       ⓑ Vite는 요청이 들어온 모듈만 실시간 변화하여 브라우저에 전송하므로 →  빠름

■ Production Build(프로덕션 빌드)
    : 프로덕션에서는 내부적으로 Rollup을 사용하여 코드를 최적화하여 번들링 합니다.
       ⓐ 코드분할
       ⓑ Tree-shaking
       ⓒ 압축(minify)
       ⓓ 캐싱 전략

---

■ Development Server(Dev Server ; vite dev) 
    ⓐ ESM  방식으로 실시간 변환하므로  Rollup 번들링 없이 브라우저에 전달됩니다.
    ⓑ Vite 개발 서버 실행 →  요청 시 esbuild 기반으로 실시간 코드 변환 →  ESM 방식으로 브라우저에 모듈 전송됩니다.

■ Production Build(Prod Build ; vite build)
    ⓐ Rollup을 사용하여 코드를 최적화하여 번들링 합니다
    ⓑ vite.config.js 의 설정 읽기 → 내부적 Rollup API 호출 → build.rollupOptions 설정을 적용해 빌드 → Rollup 이 모듈을 번들링 및 최적화 수행 → 결과물을 /dist에 출력

---

■ STEP 1 : 프로젝트 생성
    ⓐ React + Vite 로 프로젝트 생성
    ⓑ localhost:5173 같은 개발 서버가 실행되고, 개발 서버에서는  코드를 실행한면 실시간 반영됩니다.
    ⓒ src/ 폴더 안의 파일을 수정하면 자동으로 반영됩니다 (HMR)

<< bash
npm create vite@latest my-vite-project
cd my-vite-project
npm install
npm run dev
>>

■ STEP 2-1 : src 폴더 안에서 파일 수정
    ⓐ src/App.jsx
    ⓑ 코드를 수정하면 브라우저를 새로고침 하지 않아도 실시간으로 반영됩니다.
<< jsx
function App() {
  return (
    <div>
      <h1>Hello PION79 Friends ~ </h1>
    </div>
  );
}
export default App;
>>

■ STEP 2-2 : 새 파일을 만들어서 컴포넌트 구성
    ⓐ src/components/MyButton.jsx
<< jsx
function MyButton() {
  return <button>Click Me</button>;
}
export default MyButton;
>>

     ⓑ src/App.jsx  
          : App.jsx에서 MyButton.jsx 의 MyButton 을 가져다 사용할 수 있습니다. 저장하면 바로 브라우저 적용됩니다.
<< jsx
import MyButton from './components/MyButton'
function App() {
  return (
    <div>
      <h1>Hello PION79 Friends ~</h1>
      <MyButton />
    </div>
  );
}
>>

■ STEP 2-3 :  CSS 사용
    ⓐ src/App.css
<< CSS
h1 {
  color: #ff4500;
}
>>

    ⓑ App.jsx 에 import하면 바로 저장된다.
>> jsx
  import './App.css'
<< 

---

■ Node 기반 React 프로젝트 예시

my-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   └── main.jsx
├── package.json
├── vite.config.js
└── index.html

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

vite.config.js

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})