vite

⚡ CRA  vs  Next.js  vs  Vite

CRA

- 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었다.

- 오랫동안 React 생태계에서 프로젝트를 생성하는 표준처럼 여겨졌다.

- 하지만 CRA는 2022년 4월 이후로 업데이트가 전혀 없으며, React 공식 문서에서도 사라지면서 사실 상 폐기(deprecated) 수순을 밟고 있다.

 

Next.js

- React 프로젝트를 만들기 위해서 많이 사용되는데, Next.js는 프로젝트 생성 뿐만 아니라 라우팅, 데이터 패칭(fetching), Server-Side Rendering(SSR), Static Site Generation(SSG), 이미지 최적화 등 온갖 부가 기능을 지원하는 메타 프레임워크이다.

- 제대로 활용하려면 배워야할 것도 많고 CRA처럼 간단하게 React 프로젝트를 만들어 보는데는 적합한 도구가 아니다.

 

Vite
- 최근에 Vite가 CRA의 대안 기술로 부상하고 있다.

- CRA처럼 간편하게 React 프로젝트를 만들 수 있을 뿐만 아니라, CRA보다 훨씬 빠르고 쾌적한 개발 서버를 사용할 수 있다.
- Vite는 소규모 프로젝트부터 대규모 프로젝트까지 범용적으로 쓸 수 있도록 설계되어 있다.

---

⚡Vite

- 프랑스어로 "빠르다"는 뜻으로, Vue.js의 창시자인 에반 유(Evan You)가 개발한 프론트엔드 빌드 도구이다

- 현대 웹 개발에서 더욱 빠르고 효율적인 개발 환경을 제공하기 위해 설계되었다.

 

주요 특징:
- 빠른 개발 서버 시작:   Vite는 브라우저의 네이티브 ES 모듈 기능을 활용하여 개발 서버를 즉시 시작한다. 초기 로딩 시간을 크게 단축시킬 수 있다

- 향상된 HMR(Hot Module Replacement):   코드 변경 시 전체 페이지를 새로 고치지 않고, 수정된 모듈만 빠르게 교체하여 즉각적인 피드백을 제공한다. 개발 생산성이 향상된다
- 최신 JavaScript 및 CSS 기능 지원:   Vite는 최신 브라우저 환경을 대상으로 하여, 최신 JavaScript와 CSS 기능을 기본적으로 지원한다.  별도의 트랜스파일러나 폴리필 없이 최신 기능을 활용할 수 있다. 
- 간단한 설정과 유연성:   기본 설정이 간단하며, 필요에 따라 플러그인 시스템을 통해 기능을 확장할 수 있다. 또한, React, Vue, Svelte 등 다양한 프레임워크와의 통합을 지원한다. 

Vite의 동작 방식:
- Vite는 개발 단계에서 브라우저의 네이티브 ES 모듈을 활용하여 필요한 모듈만을 동적으로 로드한다.

- 번들링 없이도 빠른 개발 서버 시작과 HMR을 구현한다.

- 프로덕션 빌드 시에는 Rollup을 기반으로 코드를 번들링하여 최적화된 결과물을 생성한다

Vite의 장점:
- 성능 향상:   기존 번들러에 비해 개발 서버 시작 시간과 HMR 속도가 빠르다
- 간편한 설정:   복잡한 설정 없이도 프로젝트를 쉽게 시작할 수 있다.
- 유연한 플러그인 시스템:   필요에 따라 기능을 확장하거나 커스터마이징할 수 있다.

---

⚡Vite로 React 프로젝트 생성하는 방법

 

설치, 버전 확인:

📗 node -v
📙 npm -v
📘 yarn -v

 

Vite를 사용하여 React 프로젝트 생성:

📙 npm create vite@latest `프로젝트이름`
📘 yarn create vite

 

 

의존성 설치:

📙 npm install
📘 yarn create vite

 

 

개발 서버 실행:

📙 npm run dev
📘 yarn dev

브라우저에서 http://localhost:5173으로 접속하면 초기 React 애플리케이션이 실행되는 것을 확인할 수 있다.

---

⚡ .jsx => .js

 

Vite와 같은 최신 도구는 JSX 구문을 포함하는 파일을 올바르게 처리하기 위해 .jsx 확장자를 사용하는 것이 일반적이다. 이는 도구가 파일을 올바르게 인식하고 처리할 수 있도록 돕기 위한 것이다.

기존의 .js 확장자를 사용하면서도 Vite가 이를 올바르게 처리하도록 설정할 수 있다.

이를 위해 Vite 설정 파일을 수정하여 .js 파일에서도 JSX를 인식하도록 할 수 있다.

🗂️ vite.config.js
esbuild 옵션을 추가하여 .js 파일에서도 JSX를 인식하도록 설정한다.

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

export default defineConfig({
  plugins: [react()],
  esbuild: {
    loader: 'jsx',
    include: /src\/.*\.js$/,
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
});

 

optimizeDeps.esbuildOptions.loader 설정을 통해 Vite의 의존성 최적화 단계에서도 .js 파일을 JSX로 처리하도록 한다.

 

의존성 설치:

(만약 설치하지 않았다면 다음 명령어 수행)

npm install @vitejs/plugin-react --save-dev

---

⚡

오류 해결 안될 시, 프로젝트의 캐시를 삭제하고 개발 서버를 강제로 재시작하여 문제를 해결할 수 있다.

|  Vite 캐시 삭제 및 개발 서버 강제 재시작:
Vite는 개발 중 디펜던시를 사전 번들링하여 캐시에 저장한다

이 캐시가 손상되었거나 오래된 정보로 인해 문제가 발생할 수 있다.

이를 해결하기 위해 개발 서버를 --force 옵션과 함께 재시작하여 캐시를 삭제하고 디펜던시를 다시 번들링할 수 있다.

npm run dev -- --force

 

|  Node.js 및 패키지 매니저 캐시 삭제:
만약 위 방법으로 문제가 해결되지 않는다면,

Node.js와 패키지 매니저(npm 또는 yarn)의 캐시를 삭제하고 의존성 모듈을 재설치 해볼 수 있다.

( npm과 yarn의 캐시를 삭제하고, node_modules 폴더를 제거한 후 의존성 모듈을 재설치 )

📙 npm을 사용하는 경우:

npm cache clean --force
rmdir /s /q node_modules
npm install

/s → 하위 디렉토리까지 모두 삭제
/q → 삭제 확인 없이 강제 삭제

 

📘 yarn을 사용하는 경우:

yarn cache clean
rm -rf node_modules
yarn install

 

 

 

 

 

---

refer to

https://www.daleseo.com/vite-react/