[React] 바벨(Babel), 웹팩(Webpack), Vite, SWC

• 바벨 (Babel)
• 웹팩(Webpack)
• Vite
• SWC
• 리액트와 바벨, 웹팩, Vite
• 요약

---

- 바벨(Babel)  ==>  언어의 장벽을 허무는 번역기

 

프런트엔드에서 자주 사용하는 바벨(Babel)은 과거 바벨탑 이야기에서 이름을 가져왔다.

 

바벨탑에서 사람들은 언어가 달라 협업에 실패했지만,

바벨은 서로 다른 자바스크립트 언어 규약을 웹 브라우저가 이해할 수 있는 코드로 변환합니다.

 

 

- ES6의 등장과 브라우저 문제

2009년 ES5 이후, 2015년 ES6(ECMAScript 2015)가 등장했다.

 

ES6는 let, const, arrow function 같은 새로운 문법을 도입했지만,

당시 브라우저는 이 최신 문법을 제대로 지원하지 못했다.

 

특히 Internet Explorer(IE) 같은 브라우저는 ES6 문법을 해석할 수 없다는 단점이 있었다.

 

 

- 바벨(Babel)의 탄생

이 문제를 해결하기 위해 등장한 도구가 바로 바벨(Babel)이다.

 

원래 이름은 6to5로, ES6 코드를 ES5로 변환해주는 툴이었다.

 

덕분에 개발자들은 최신 문법을 사용하면서도 브라우저 호환성을 유지할 수 있었다.

 

나중에 6to5는 Babel로 이름을 바꾸게 되었다.

 

 

- 바벨(Babel)의 동작 원리

바벨(Babel)은 코드를 변환하는 세 가지 주요 단계를 거친다.

1. 파싱(Parsing): 소스 코드를 **AST(추상 구문 트리)**로 변환
2. 변환(Transformation): AST를 변환하여 ES6 코드를 ES5로 변환
3. 출력(Print): 변환된 AST를 다시 자바스크립트 코드로 출력

 

 

리액트에서 JSX를 사용할 수 있는 것도 바벨(Babel) 덕분이다.

 

JSX를 일반 자바스크립트로 변환해주기 때문이다.

 

---

- 웹팩(Webpack)  ==>  모듈을 하나로 묶어주는 번들러

 

웹팩(Webpack)은 자바스크립트 모듈을 하나의 파일로 묶어주는 모듈 번들러이다.

 

각 기능을 모듈로 나누어 작성하는 현대 웹 개발에서, 웹팩은 이러한 모듈을 하나의 번들로 만들어준다.

 

 

- 웹팩(Webpack)의 필요성

웹 애플리케이션은 많은 파일(HTML, CSS, JS)로 구성하게 된다.

 

이 파일들을 각각 로드하면 속도가 느려지기 때문에,

웹팩은 사용되는 모듈만 묶어 하나의 파일로 만들어 성능을 최적화한다.

 

 

- 웹팩(Webpack)의 동작 방식

웹팩(Webpack)은 다음과 같은 과정을 통해 번들링한다.

1. 엔트리(Entry): 웹팩이 번들링을 시작할 파일을 지정
2. 로더(Loader): CSS, 이미지 등을 자바스크립트로 변환하는 역할
3. 플러그인(Plugin): 번들링 결과를 최적화하거나 추가 기능을 수행

---

- Vite  ==>  차세대 번들러

 

Vite(비트)는 웹팩의 단점을 보완한 2세대 번들러이다. 아주 핫하다.

 

Vite는 브라우저가 최신 ES 모듈을 지원한다는 점을 활용해, 초기 빌드가 훨씬 빠르다.

 

또한 개발 서버가 빠르게 동작하고, 리액트와의 궁합도 뛰어납니다.

 

 

- Vite의 장점

1. 빠른 초기 빌드 속도: 웹팩보다 훨씬 빠르게 서버를 시작
2. 핫 모듈 리플레이스먼트(HMR): 변경된 부분만 빠르게 업데이트
3. 간단한 설정: 복잡한 설정 없이도 쉽게 시작 가능

---

- SWC  ==>  초고속 트랜스파일러

 

SWC는 바벨과 비슷한 역할을 하지만,

러스트(Rust)로 작성되어 매우 빠른 속도를 자랑하는 트랜스파일러이다.

 

바벨보다 최대 20배 빠르며, 대규모 프로젝트에서 성능 차이가 확연합니다.

 

 

- SWC의 특징

1. 빠른 속도: 바벨보다 훨씬 빠른 코드 변환 속도
2. 바벨과 호환: 바벨 플러그인과 호환 가능, 리액트에서도 사용

---

- 리액트와 바벨, 웹팩, Vite

 

리액트 프로젝트에서는 바벨로 최신 문법을 변환하고, 웹팩이나 Vite로 모듈을 번들링한다.

 

최신 트렌드에서는 더 빠른 Vite와 SWC 조합도 많이 사용된다.

 

나 또한 Vite와 SWC 조합으로 React+TypeScript 개발을 진행할 것이다.

 

이렇게 하면 다양한 브라우저에서 문제없이 일관된 코드가 실행된다.

---

- 요약

• 바벨(Babel): 최신 자바스크립트 코드를 옛 브라우저에서도 실행 가능하게 변환
• 웹팩(Webpack): 여러 파일을 하나로 묶어주는 번들러
• Vite: 웹팩보다 더 빠른 차세대 번들러
• SWC: 바벨보다 빠른 트랜스파일러