카테고리 없음

CRA를 Vite로 마이그래이션하기 (ts설정X)

반갑조? 2025. 1. 22. 20:58

프로젝트를 처음 시작할때에는 CRA(Create React App)로 하였다. 

그러나 CRA로 프로젝트를 진행하면서 문제가 생겼고 craco를 추가 설치하여 해결한 경험이 있다.

CRA프로젝트를 진행하면서 프로젝트가 로드 될 때마다 느린걸 체감하게 되었고 이것이 Vite로 마이그래이션 하는 큰 이유가 되었다.

 

내 프로젝트는 레이아웃을 잡아놓고 일부 기능도 구현해놓아서 프로젝트의 초반이지는 않았다.

다행히 브랜치에서 작업하고 있었기에 브랜치를 종료하고 새 브랜치를 만들어 Vite로 마이그래이션을 했다.

 

main(master)브랜치에서 바로 Vite로 마이그래이션 하지 않은 이유

  1. 작업 중인 코드의 안정성을 위해서
    • main(master)브랜치는 보통 안정된 코드만 유지하는것이 좋다.
    • Vite로 전환하는 작업은 코드베이스에 큰 영향을 줄 수 있기 때문에 테스트가 필요하다.
    • 문제가 발생하면 기존 코드로 되돌릴 수 있어야한다.
  2. 마이그래이션이 잘 되었는지 우선 확인해야한다.
    • Vite로 전환 후 모든 기능이 정상적으로 작동하는지 확인해야한다.
    • 테스트 후 문제가 없을 때 main(master)브랜치로 병합하는것이 안전하다.

 

 

마이그래이션 순서!

A. 현재 상태를 확인하고 브랜치를 사용하자!

1. 작업 중인 브랜치 보호

- 현재 작업중인 브랜치의 변경 사항이 있다면 먼저 커밋한다.

git add .
git commit -m '커밋 메시지 작성'

 

2. 브랜치 확인

- 현재 브랜치가 작업중인 브랜치가 맞는지 확인한다.

- 표시된 브랜치 앞에 ' * (별표) ' 표시가 있어야 한다. 

git branch

 

3. Vite로 변환하기 위해 새 브랜치를 생성한다.

- 'feature/chage-to-vite' 대신 알맞은 브랜치 이름을 적으면 된다.

- ' -b ' 명령어는 브랜치 생성과 함께 생성된 브랜치로 이동하는 명령어이다.

git checkout -b feature/change-to-vite

 

B. CRA 프로젝트의 초기 설정을 변경하자!

 

(순서대로 하면 된다는 의미에서 숫자는 이어간다.)

4. 기존 CRA 관련 패키지 제거

- CRA 프로젝트에서 사용되는 'react-scripts'와 관련된 패키지를 제거한다.

npm uninstall react-scripts

 

5. Vite 설치 및 설정 초기화

- Vite 관련 패키지를 설치한다.

npm install vite

 

7. Vite 기본 설정 파일 추가

- 프로젝트 루트에 'vite.config.js' 파일을 생성하여 다음 코드를 추가한다.

- Vite에서 기본 port는 5173이다. CRA에서 사용한 port 3000을 사용하고싶다면 아래에 'port: 3000'을 추가하면 된다.(선택사항임)

// 프로젝트 루트에 vite.config.js 파일 생성 후 해당 파일에 코드 추가

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

export default defineConfig({
    plugins: [react()],
    server: {
        open: true,
        port: 3000, // 선택사항
    },
});

 

프로젝트의 구조를 변경하자!

 

 

8. 'index.html' 수정

- CRA에서 사용하던 'public/index.html'을 Vite용으로 수정한다.

- 'public/index.html'을 루트로 이동하고 'public/'폴더는 삭제한다.

- 본문 코드를 수정한다.

    - ' %Public_URL% '가 쓰여진 코드를 삭제한다.

    - '<script type="module" src="/src/main.jsx"></script>' 를 추가한다.

    - 아니면 아래 코드를 사용한다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite React App</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>
</html>

 

9. 엔트리 파일 변경

- 기존 CRA에서 사용하던 'src/index.js' 또는 'src/index.jsx'대신 Vite에서는 'src/main.jsx'를 사용한다.

- 'src/main.jsx' 파일을 생성하거나 수정한다. (기존의 index.js를 수정하였다.)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

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

 

패키지를 변경하고 실행하여 확인하자!

 

10. 기존 스크립트 제거 후 Vite 스크립트 추가

- 'package.json' 파일의 'scripts' 부분을 다음 코드처럼 수정한다.

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

 

11. 필요한 의존성 추가 설치

- Vite로 마이그래이션 한 후 일부 의존성이 누락되었을 수 있으니 다시 설치한다.

npm install @vitejs/plugin-react

 

12. 개발 서버 실행 확인

- Vite 개발 서버를 실행한다.

npm run dev

 

 

실행 후 아무 문제 없다면 Vite로 마이그래이션이 잘 된 것이다!

 

 

하지만 순순히 잘 되면 그것도 이상하지..... 역시나 에러메시지가!!!!

 

에러메시지 1: [vite] Pre-transform error: Failed to load url /src/main.jsx (resolved id: /src/main.jsx). Does the file exist? (x5) 

설명과 해결: 'main.jsx'를 찾지 못했다는 것을 다섯번이나 알려줌.... 에러메시지에는 늘 답이 있다!

'main.jsx'가 아닌 'main.js'로 수정을 했다는 점! 바로 발견하고 'main.jsx'로 수정했다.

 

에러메시지 2: [vite] (client) Pre-transform error: Failed to load url (생략) /src/pages/MainPage.js) in url (생략) /src/App.jsx. Does the file exist?

설명과 해결: 에러메시지1과 같다. 모든 ' .js ' 파일을 ' .jsx ' 파일로 변경했다.

 

생각보다 에러메시지가 해결하기 쉬운것이여서 다행이였다.

 

이 다음은 CRA를 사용하면서 설치한 아래의 패키지들을 삭제해주었다.

- @emotion/babel-plugin

- @babel/plugin-proposal-private-property-in-object

- @emotion/babel-preset-css-prop

npm uninstall @emotion/babel-plugin @babel/plugin-proposal-private-property-in-object @emotion/babel-preset-css-prop

 

이렇게 명령어로 삭제하는것이 안전하다.

 

혹시나 'package.json'에서 해당 패키지들을 키보드 백스페이스를 사용하여 직접 삭제를 했다면

1. node_modules 폴더 삭제

2. package-lock.json폴더 삭제

3. npm install하기

의 방법을 하면 된다.

하지만 package-lock.json을 삭제하는 방법에는 특히 협업에서는 주의해야할 사항이 있다.

1. pacage-lock.json을 삭제하면 이전에 사용하던 정확한 패키지 버전을 보장 받지 못할 수 있다.

   - npm install로 새로 설치된 패키지 중 일부가 이전 버전과 다를 수 있으므로 프로젝트 테스트가 필수이다.

2. 모든 패키지를 최신으로 설치하는 과정에서 의존성 간 충돌이 발생할 수 있다.

3. 팀원들과 동일한 package-lock.json 파일을 사용하지 않으면 다른 환경에서 작동 방식이 달라질 수 있다.

그러므로 부득이하게 package-lock.json을 삭제 후 npm install을 해야한다면 반드시 프로젝트의 모든 기능을 테스트 하여 의존성 문제나 버전 차이에 따른 동작 차이가 없는지 확인해야한다.

 

가능하면 패키지 업데이트는 package-lock.json을 유지하면서 필요한 때만 개별적으로 진행하는것을 추천한다.

 

Git에 변경 사항을 저장


 

ㅇ

저작자표시 비영리 변경금지