잡동사니/GPT가 알려주는

[GPT가 알려주는] CRA → Vite 마이그레이션

heylo 2025. 4. 15. 10:19
앱 이름 모르겠어 소스는 /src에있어
 

ChatGPT의 말:

좋아, 앱 이름 몰라도 괜찮아!
/src 폴더 안에 React 소스가 있다면, Vite로 마이그레이션하는 건 아주 간단해 😎
너 지금 폴더 구조가 대충 이렇다는 말이지?

 

 

✅ 지금부터 앱 이름 없이도 CRA → Vite 마이그레이션 완전체 순서 알려줄게

 

✅ 1. 기존 CRA 제거 + Vite 설치

npm uninstall react-scripts
npm install --save-dev vite @vitejs/plugin-react

 

✅ 2. vite.config.js 파일 만들기 (루트에)

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

export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('./cert/localhost.key'),
      cert: fs.readFileSync('./cert/localhost.crt'),
    },
    host: true, // 192.168.x.x 접근 허용
    port: 3000
  }
})

🔐 인증서 없으면 https 항목 빼도 됨 → 나중에 mkcert로 추가 가능

 

✅ 3. 루트에 index.html 만들기

❗ 기존 CRA는 public/index.html인데, Vite는 루트(index.html)에 있어야 함

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Vite React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

 

✅ 4. src/main.jsx 만들기 (없다면)

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

 

 

✅ 5. package.json 수정

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

 

✅ 6. App.js 확장자 jsx로 변경하기

 

 

✅ 6. 실행하기

npm run dev

뜨면 ✅ https://localhost:3000
또는 http://localhost:3000 접속 가능

 

🚀 옵션: HTTPS용 인증서 만들기 (Geolocation용)

mkdir cert
cd cert
openssl req -x509 -newkey rsa:2048 -nodes -out localhost.crt -keyout localhost.key -days 365

 

✅ 한 줄 요약

지금 소스가 /src 안에 있다면 Vite로 100% 전환 가능!
위 단계 따라가면 npm run dev만으로 HTTPS + 빠른 dev 서버 완성! 💯