Just Do IT!

[React] CRA에서 Vite로 마이그레이션 하기 본문

개발 공부/React

[React] CRA에서 Vite로 마이그레이션 하기

MOON달 2024. 10. 16. 15:04
728x90
반응형

 

Vite란?

  • 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구
  • 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공
  • 번들링 시 Rollup 기반의 다양한 빌드 커맨드 사용 가능
    • 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게 미리 정의된 설정을 제공
  • 미리 bundle을 만든다
  • 필요한 소스코드만 건드린다.

 

공식 문서

https://ko.vitejs.dev/

 

Vite

Vite, 프런트엔드 개발의 새로운 기준

ko.vite.dev

 

 

 

 

 

 

Create-React-App의 단점

  • node_modules 용량이 크다
    • 빌드 속도가 느리다.
    • UX나 SEO 측면에서도 좋지 않다.
  • bundling이 느리다
  • Webpack을 사용하는데 이는 라이브러리가 많은 경우 번들링이 오래 걸린다.

 

CRA는 더이상 React에서 권장하지 않는 방법이다.

그리고 이번에 Vite로 마이그레이션 하는 이유는, CRA로 만들어진 프로젝트에 어떤 라이브러리가 적용이 안되기 때문이다. 빠르고 좋다는데 안 쓸 이유는 없으니까 아래 방법으로 마이그레이션 했다.

 

 

 

 

 

 

 

 

 

Vite로 마이그레이션 하기

1. Vite, React Vite 플러그인 설치

npm install -D vite @vitejs/plugin-react

 

 

2. vite.confing.js 파일 생성

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

export default defineConfig({
  plugins: [react()],
});

 

Vite 프로젝트의 설정 파일로, Vite의 동작 방식을 조정하는 데 사용한다.

이 파일에서는 여러 가지 설정을 할 수 있다.

 

 

  • defineConfig
    • Vite의 설정을 정의하기 위한 헬퍼 함수
    • 설정을 더 명확하게 하고, IntelliSense 지원을 제공
  • react
    • React에 대한 Vite 플러그인입니다.
    • 이 플러그인을 사용하면 React의 JSX 문법을 지원하고, 관련 최적화 및 변환을 자동으로 처리
  • Vite의 설정을 내보내기한다.
  • plugins
    • Vite의 플러그인 배열
    • 이 배열에 추가된 플러그인은 Vite의 빌드 프로세스에 통합되어, 추가 기능을 제공
  • [react()]
    • React 플러그인을 배열에 추가
    • 이를 통해 React 관련 기능을 사용할 수 있게 된다
    • 이 플러그인은 JSX를 JavaScript로 변환하고, HMR(Hot Module Replacement)을 지원

 

 

3. index.html 파일 이동 [중요]

public 폴더 안에 있는 index.html 파일을 프로젝트 최상단에 위치하도록 이동해야 한다.

Vite는 CRA와 다른 메커니즘으로 assets를 다루기 때문에 index.html 파일에 포함된 %PUBLIC_URL% 경로는 모두 지워준다.

그리고 body 부분에 <script> 코드를 추가한다.

 

아래가 수정한 index.html 파일이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

 

 

4. JSX 파일 확장자명 변경

CRA에서 .js 였던 JSX 파일을 .jsx 확장자로 변경한다.

  • index.js > index.jsx
  • App.js > App.jsx

 

 

5. CRA 삭제 & package.json 파일 수정

npm uninstall react-scripts

 

기존의 scripts를 삭제하고 아래 코드로 package.json 파일을 수정한다.

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },

 

 

6. node_modules 삭제 및 재설치

npm install

 

마지막으로 node_modules 폴더를 삭제하고 재설치하면 된다.

 

7. npm start로 확인해보기

vite로 마이그레이션 된 걸 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

이전에 하던 것처럼 CRA로 리액트 프로젝트를 생성했는데, vite가 요즘 많이 쓰인다고 한다.

그리고 이번에 react activity calendar 라는 라이브러리를 써야 하는데, vite로 생성해야 된다는 조건이 있어서

마이그레이션에 관해 찾아보고 지금 진행하는 프로젝트의 프론트를 vite로 구성해주었다.

 

앞으로 리액트 프로젝트를 생성할 일이 생긴다면 vite로 진행해야겠다.

 

 

 

참고

https://medium.com/@peterdtitan/create-react-app-is-dead-what-next-f05aec3dd2d5

 

728x90

'개발 공부 > React' 카테고리의 다른 글

useContext 사용해서 전역에서 유저 정보 가져오기  (0) 2024.10.31
[React] 재사용 가능한 검색창 UI component 만들기  (0) 2024.10.20
react-quill로 text-editor 만들어보기  (0) 2024.06.26
[React] 카카오 우편번호 서비스 API (react-daum-postcode)로 주소 입력받기  (1) 2024.06.19
[React] useTooltip으로 재사용되는 tooltip 만들기  (2) 2024.03.18
'개발 공부/React' Related Articles more