Vite, Webpack / VueJS, React

1. 번들러

1-1. Webpack

CRA는 React 애플리케이션의 초기 설정을 간단히 해주는 툴로,
리액트 프로젝트 생성 시 기본적으로 Webpack과 Babel을 사용해 번들링과 트랜스파일링을 처리함

Webpack은 번들러로, 다양한 JavaScript, CSS, 이미지 파일 등을 하나 또는 여러 개의 최적화된 파일로 묶어주는 도구

• 번들링 : JavaScript뿐 아니라 CSS, 이미지, 폰트 등을 포함한 모든 리소스를 하나의 번들로 묶음
• 플러그인 시스템 : 다양한 플러그인으로 기능 확장 가능
• Hot Module Replacement (HMR) : 변경된 파일만 브라우저에 업데이트해 빠른 개발 경험 제공
  

1-2. Vite

Vite는 빠른 개발 환경을 제공하기 위한 번들링 및 빌드 도구
기존 도구인 Webpack과 같은 역할을 하지만, 더 빠른 속도와 효율성을 목표로 설계되었음

• 빠른 서버 시작: JavaScript 모듈을 ESM(ECMAScript Modules) 방식으로 브라우저에서 직접 로드
• HMR(Hot Module Replacement): 코드 변경 시 빠르게 업데이트
• 프레임워크 독립적: Vue, React, Svelte 등 다양한 프레임워크를 지원
• Vue와의 관계: Vue 팀에서 개발한 도구라 Vue와 특히 잘 통합됨. 하지만 Vue에 한정되지 않고 React나 다른 프레임워크에도 사용 가능

2. Vue.js

Vue는 프론트엔드 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 프레임워크
React와 비슷하게 컴포넌트 기반으로 동작하며, 선언적 방식으로 UI를 구축할 수 있음

• 양방향 데이터 바인딩: Vue의 v-model로 간단하게 데이터와 UI를 동기화
• 템플릿 기반: HTML 템플릿 문법으로 코드 작성
• Reactivity 시스템: 데이터 변경 시 자동으로 UI 업데이트
  # 3. React 

React는 Facebook(현재 Meta)에서 개발한 UI 구축을 위한 JavaScript 라이브러리
프레임워크처럼 사용되지만, 본질적으로는 View 계층을 담당하는 라이브러리

• 컴포넌트 기반: 작은 UI 단위로 쪼개어 재사용 가능
• JSX: JavaScript와 HTML을 섞어 쓸 수 있는 문법
• 단방향 데이터 흐름: 데이터가 한 방향으로만 흐르도록 설계
• React Hooks: 함수형 컴포넌트에서 상태와 생명주기 로직을 쉽게 구현
  

3-1. React, Webpack, Vite의 관계

1) Webpack 또는 Vite 없이 React 사용
React는 HTML과 JavaScript를 결합한 JSX를 사용하므로, 브라우저가 JSX를 바로 이해할 수 없음.
React 자체로는 브라우저에서 실행할 수 없기 때문에, 이를 위해 Webpack, Vite와 같은 번들러가 필요

• JSX -> 일반 JavaScript 코드로 변환(Babel 같은 도구 사용).
• 모든 파일을 하나로 묶어 브라우저가 이해할 수 있는 형태로 만듦.

2) React + Webpack
React 프로젝트를 Webpack으로 구성하는 전통적인 방식

• Webpack이 React 코드(JSX)를 읽어들임
• Babel과 같은 로더로 JSX와 최신 JavaScript 문법을 변환
• 결과물을 하나의 번들 파일로 묶어 브라우저에 전달

  npx create-react-app

3) React + Vite
Vite는 Webpack의 복잡함을 줄이고 성능을 개선한 도구로, React와 더 자주 사용되고 있음

• 개발 서버에서는 번들링 없이 모듈을 직접 로드
• 빌드 단계에서 필요한 경우만 번들링 수행
• React와 TypeScript 설정이 기본 제공되어 초기 설정이 간단

  npm create vite@latest my-react-app --template react

3-2. 어떤 조합을 선택할까?

• React + Vite
  최신 React 프로젝트에서는 Vite가 더 선호됨. 초기 설정이 간단하고 개발 속도가 빠름
• React + Webpack
  복잡한 환경이나 오래된 프로젝트에서는 여전히 Webpack이 사용될 수 있음