바벨과 웹팩, Vite의 역할: 리액트 개발에서의 필수 도구 이해하기

바벨의 유래

바벨(babel)이라는 이름은 고대 '바벨탑' 이야기에서 유래되었어. 이 이야기에서는 전 세계 사람들이 모여서 세상에서 가장 높은 '바벨탑'을 만들려고 했지만, 언어가 달라서 탑을 완성하지 못했지. 프런트엔드 개발에서도 바벨은 서로 다른 언어 규약으로 작성된 파일을 웹 브라우저가 이해할 수 있는 형태로 변환해주는 역할을 해.

 

자바스크립트 생태계의 큰 변화, ES6 등장

자바스크립트는 2009년에 ES5가 출시된 이후로 6년 동안 큰 변화가 없었어. 그러다가 2015년에 ES6(2015)가 등장하면서 자바스크립트 생태계에 큰 변화가 일어났지. ES6는 기존 ES5와 확연히 다른 점이 많아서 새로운 자바스크립트 언어라고 해도 과언이 아니야.

 

브라우저가 지원을 안하네

하지만, ES6가 아무리 훌륭해도 웹 브라우저가 이를 지원하지 않으면 사용할 수 없었어. 당시 IE(Internet Explorer)가 많이 사용되던 시기여서 브라우저별로 ES6 지원이 제각각이었지.

 

6to5

바벨의 원래 이름은 6to5였어. ES6로 작성된 코드를 ES5로 변환해주는 툴이었지. 이를 통해 개발자들은 브라우저 호환성 문제를 해결하면서 ES6를 사용할 수 있었어. 후에 6to5는 바벨(Babel)이라는 이름으로 재탄생하게 돼.

 

바벨

리액트에서도 당연히 바벨을 사용해. 바벨을 사용해서 리액트의 독자 코드 포맷인 JSX로 작성된 코드를 JS로 변환해줘. 바벨 덕분에 리액트에서 JSX를 사용할 수 있는 거야.

<aside> ⛔ 바벨은 파싱(parsing) → 변환(transformation) → 출력(print)의 세 단계에 걸쳐서 코드를 변환해. 파싱은 코드를 읽어서 AST(추상 구문 트리)로 변환하고, 변환 단계에서는 이 AST를 정해진 규칙에 따라 변환해. 마지막으로 변환된 AST를 다시 소스코드로 출력하지. </aside>

 

잠깐, 그럼 웹팩은? 새로나온 마스크팩인가요?

웹팩(Webpack)

웹팩이라는 단어도 많이 들리는데, 웹팩과 바벨은 다른 역할을 해. 웹팩을 가장 잘 설명하는 그림이 웹팩 공식 홈페이지에 있어.

웹팩은 모듈 번들러야

쉽게 말하면, 여러 개의 자바스크립트 모듈(자바스크립트의 기능을 여러 개로 분리하여 작성한 코드)을 하나의 파일로 묶어주는 역할을 해. 이때 실제 코드에서 '사용하는 것만' 자동으로 추려서 묶어주기 때문에 빌드 속도와 성능에 큰 영향을 줘.

 

Vite

웹팩이 1세대 번들러라면, Vite는 2세대 번들러 도구야. 웹팩보다 더 빠른 속도를 자랑하고, 리액트와도 궁합이 좋아서 최근에 가장 많이 사용하는 번들러 도구야.

 

리액트는 바벨과 웹팩(Vite)을 함께 사용

리액트 프로젝트를 개발할 때 여러 개의 에셋 파일, JSX, ES6 문법 등을 사용해. 웹팩을 사용해서 모듈 번들링을 하고, ES6로 작성된 코드를 바벨로 변환해주면 어떤 환경에서도 문제 없이 동작하는 일관된 코드를 작성할 수 있어.

---

이제 바벨과 웹팩의 역할과 중요성을 알게 되었지? 리액트를 사용할 때 왜 이 두 가지 도구가 필수적인지 이해할 수 있을 거야.