프로젝트를 처음 시작할때에는 CRA(Create React App)로 하였다.
그러나 CRA로 프로젝트를 진행하면서 문제가 생겼고 craco를 추가 설치하여 해결한 경험이 있다.
CRA프로젝트를 진행하면서 프로젝트가 로드 될 때마다 느린걸 체감하게 되었고 이것이 Vite로 마이그래이션 하는 큰 이유가 되었다.
내 프로젝트는 레이아웃을 잡아놓고 일부 기능도 구현해놓아서 프로젝트의 초반이지는 않았다.
다행히 브랜치에서 작업하고 있었기에 브랜치를 종료하고 새 브랜치를 만들어 Vite로 마이그래이션을 했다.
main(master)브랜치에서 바로 Vite로 마이그래이션 하지 않은 이유
- 작업 중인 코드의 안정성을 위해서
- main(master)브랜치는 보통 안정된 코드만 유지하는것이 좋다.
- Vite로 전환하는 작업은 코드베이스에 큰 영향을 줄 수 있기 때문에 테스트가 필요하다.
- 문제가 발생하면 기존 코드로 되돌릴 수 있어야한다.
- 마이그래이션이 잘 되었는지 우선 확인해야한다.
- 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에 변경 사항을 저장
ㅇ