[React] SWC, Vite, Babel, Webpack

현대 프론트엔드 개발의 필수 도구: 빌드툴

빌드툴이란 프론트엔드 개발자들이 코드를 더 쉽고 빠르게 만들기 위해 사용하는 도구

빌드툴 종류

• 트랜스파일러
• 번들러
• 등…

1. 트랜스파일러

1.1. 바벨(Babel)

바벨이란?

바벨은 JavaScript 트랜스파일러로, 최신 문법을 구버전 브라우저에서도 실행 가능하게 변환하는 도구

예시: ES6 → ES5 변환

// ES6 문법
const greet = () => console.log('Hello');

// 변환 후 (ES5)
var greet = function () {
    console.log('Hello');
};

바벨의 필요성

• JavaScript는 매년 새로운 버전이 나오지만 모든 브라우저가 최신 문법을 지원하지는 않음. 특히 IE(인터넷 익스플로러)와 같은 구버전 브라우저에서는 최신 문법이 동작하지 않아 변환이 필요함

바벨의 장점

1. 최신 문법을 사용하여 가독성과 유지보수성 향상
2. 브라우저 간 호환성 문제 해결

바벨의 한계

• 빌드 속도 저하: 프로젝트가 커질수록 변환 시간이 증가
• 대규모 프로젝트에서는 병목현상 발생 가능

💡 병목현상: 시스템의 성능이나 처리 속도가 특정 부분에 제한되는 현상

1-2. SWC (Speedy Web Compiler)

바벨의 기능을 대체하면서 Rust 기반으로 설계되어 훨씬 빠른 성능 보유

• 장점
  1. 최고 속도: 병렬 처리를 통해 바벨보다 17배 빠른 코드 변환
  2. Next.js 기본 채택: 최신 프레임워크에서 널리 사용 중
  3. 바벨과 호환 가능: 기존 설정을 쉽게 전환 가능

---

2. 번들러

2-1. 웹팩(Webpack)

웹팩 공홈

웹팩이란?

웹팩은 모듈 번들러로, 다양한 파일과 리소스를 하나의 파일로 묶어주는 도구임

💡 번들링: 여러 개의 파일(CSS, JavaScript, 이미지 등)을 하나로 묶거나 적절한 크기로 나누어 배포하는 과정

왜 번들링이 필요한가?

• 웹 애플리케이션은 CSS, 이미지, 폰트, 아이콘 등 다양한 리소스로 구성됨
• 각 파일마다 서버 요청이 필요해서 네트워크 지연 발생
• 웹팩은 파일들을 하나로 묶어 요청을 최소화하고 성능을 개선함

웹팩 동작 방식

• 개발 서버에서 코드를 수정할 때
  1. 전체 번들링을 다시 실행
  2. 수정된 파일뿐만 아니라 프로젝트 전체를 번들링
  3. 변경 사항을 브라우저에 반영하기 위해 전체 페이지를 새로고침

단점

• 번들링 과정이 오래 걸려서, 큰 프로젝트에서는 개발 중 지연 시간이 길어짐
• 변경된 코드가 적더라도 전체를 다시 번들링해야 하므로 비효율적

2-2. Vite

Vite는 빠르고 효율적인 개발 환경을 제공하는 도구로, 기존 웹팩의 한계를 극복하고자 설계됨

특징: 번들링 없는 개발 서버

1. 브라우저의 ESM(ES Modules) 활용
   • Vite는 브라우저가 JavaScript 파일을 직접 가져올 수 있는 ES Modules 방식을 사용함
   • 브라우저가 필요한 파일만 서버에 요청하므로, 번들링 없이 빠르게 실행됨
2. HMR(Hot Module Replacement)
   • 코드가 수정되면 수정된 파일만 브라우저에 전달하여 실시간 업데이트 가능
   • 전체 페이지를 새로고침하지 않아 더 빠른 개발 경험 제공

Vite와 Webpack의 차이

특징	Webpack	Vite
ESM 처리 방식	번들링 과정에서 ESM을 하나의 파일로 묶음	브라우저가 ESM 파일을 직접 로드
번들링	개발 단계에서도 번들링 필요	개발 단계에서는 번들링 없이 ESM으로 동작
HMR(실시간 반영)	수정된 파일만 번들링 후 브라우저에 전달	수정된 파일만 즉시 브라우저에 전달
개발 속도	번들링 과정 때문에 큰 프로젝트에서는 느릴 수 있음	번들링이 없어서 매우 빠름