2024. 9. 24. 18:09ㆍDevlog
1. 왜 Vite로 마이그레이션 할까?
2024.09.20 - [Devlog] - CRA(Create React App) vs Vite
CRA(Create React App) vs Vite
CRA(Create React App) vs Vite: 무엇이 더 나을까? React 프로젝트를 시작할 때 대부분은 **CRA(Create React App)**을 사용해 봤을 것이다.나 역시도 CRA3번 Vite2번 정도 사용해 봤다. 하지만 이 역시 프로젝
whatever-ut.tistory.com
저번글에서 충분히 언급했기 때문에 바로 진행해 보겠다.
2. 마이그레이션 전 확인사항
Node.js 버전 확인
Vite는 최신 Node.js 버전이 필요하다. 현재 프로젝트에서 사용 중인 Node.js 버전이 Vite와 호환되는지
먼저 확인해야 한다.
node -vv20.16.0 나는 20.16.0 버전이다.
Node 14 버전 이상이면 된다.
그리고 npm과 yarn둘중 하나를 골라 설치해야 하는데, 결론적으로 나는 npm을 사용하기로 했다.
Npm vs Yarn은 나중에 기회 될 때 작성해보려고 한다.
(분량이 나올지는 의문)
3. CRA에서 Vite로 마이그레이션 하는 단계
1) CRA 의존성 제거
가장 먼저, CRA 관련 패키지를 삭제해야 한다. 아래 명령어를 사용해 react-scripts를 제거하면 된다.
npm uninstall react-scripts
항상 그렇지만 복사하기 편하게 $ << 편의상 뺀 것이다. bash 관련 명령어는 $을 앞에 붙이고 해야 한다.
2) Vite 설치
그다음, Vite와 React 관련 패키지를 설치한다. 아래 명령어로 간단하게 설치할 수 있다.
npm install vite @vitejs/plugin-react
Vite의 React 플러그인은 Vite와 React를 자연스럽게 통합해 주기 때문에 꼭 함께 설치해줘야 한다.
3)★★
Vite 설정 파일 생성
vite.config.js 파일을 프로젝트 루트에 생성해 Vite 설정을 추가해줘야 한다. 설정 파일은 이렇게 작성하면 된다.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});
4)★★
index.html 생성
Vite는 CRA처럼 public/index.html을 사용하는 게 아니라, 프로젝트 루트에 직접 index.html 파일을 만들어줘야 한다. 기존 CRA의 public/index.html 파일을 Vite에 맞게 이렇게 수정하면 된다. (파일을 직접 이동하고 index를 수정해도 된다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
5)★★
package.json 수정
이제 package.json의 스크립트 부분도 수정해야 한다. CRA의 react-scripts 명령어 대신 Vite 명령어로 변경해 주면 된다.
"scripts": {
"dev": "vite",
"build": "vite build",
"start": "vite preview"
}
6) 프로젝트 구조 및 코드 수정
CRA에서는. env 파일로 환경 변수를 관리했는데, Vite에서는 VITE_로 시작하는 환경 변수를 사용해야 한다.
예를 들어, REACT_APP_API_URL은 VITE_API_URL로 변경해줘야 한다.
또한, process.env 대신 Vite에서는 import.meta.env를 사용해야 한다. 아래와 같이 코드에서 수정하면 된다.
REACT_APP_KAKAO_KEY=blahblahblah
REACT_APP_FETCH_URL=http://localhost:3000/나는 이렇게 돼있던 코드를
VITE_KAKAO_KEY=52ke87d146ek29e688e39dkfn8b0ef28
VITE_FETCH_URL=http://localhost:3000/이런 식으로 변경했다.
4. 마이그레이션 후 테스트
이제
npm run dev명령어를 넣고 잘 실행되는지 확인해 보면 된다!
느낀 점.
생각보다 간단했고, 드라마틱하게 속도차이를 느낄 순 없지만 좀 더 빨라진 거 같다.
특히 지금은 코드의 량이 적고 프로젝트 초기라 그렇지만 시간이 지나고 코드가 쌓일수록 빨라진 체감을 더 느낄 수 있을 거 같다.
나도 많은 reference를 참고하여 진행했기 때문에, 잘못된 점이 있을 수 있다.
너그러이 봐주시고 도움이 되셨다면 댓글 남겨주시면 힘이 됩니다!! (아주많이!)
'Devlog' 카테고리의 다른 글
| 라이브러리 적용 방법: CDN, npm 설치, 다운로드 설치의 차이점 (6) | 2024.09.28 |
|---|---|
| CSS로 모든 콘텐츠 75% 축소하기-transform: scale()과 zoom의 활용 (12) | 2024.09.26 |
| CRA(Create React App) vs Vite (4) | 2024.09.20 |
| Git에서 "LF will be replaced by CRLF" 경고 해결하기 (6) | 2024.09.19 |
| styled-components에서 Transient Props 문제 해결하기 (8) | 2024.09.12 |