프론트엔드 개발의 필수 기술: 컴파일러와 번들러 이해하기

React의 등장 이후 프론트엔드 개발 환경은 급격한 변화를 겪고 있습니다. 초기의 Webpack과 Babel에 이어서 Vite, Rollup, Rolldown, Esbuild 등 다양한 컴파일러와 번들러 그리고 통합된 패키지들이 등장하고 있는데요.

프론트엔드 프로젝트에서 컴파일러 번들러는 필수적인 기술이기 때문에 이런 패키지들을 이해하려면 컴파일러와 번들러가 무엇인지 개념을 명확히 알아야 하는데요.

컴파일러(트랜스파일러)

• 코드의 변환을 담당합니다.

• 자바스크립트가 실행되는 곳은 브라우저 외에도 서버, 웹뷰 등 다양한 곳에서 실행이 될 수 있기 때문에 호환성을 고려해서 변환해줍니다.

• 대표적으로는 Babel, TypeScript, esbuild, SWC등이 있습니다.

번들러

• 개발 중에 작성된 여러 파일을 트리 쉐이킹, 코드 스플리팅, 모듈 연결 등을 통해 최적화 및 여러 개의 파일로 결합하는 작업을 합니다.

• 개발자가 작성한 수많은 파일과 라이브러리를 효율적으로 하나의 파일 또는 여러 파일로 분할합니다.

• 대표적으로는 Webpack, Rollup, Vite, esbuild, SWC 등이 있습니다.

그런데 흥미로운 점은 esbuild, SWC가 컴파일러와 번들러 두 가지 역할을 모두 수행한다는 것인데요.. esbuild는 번들러 이지만 Babel과 같이 자바스크립트 버전 간 호환성을 위해 코드를 변환하는 컴파일러 기능도 제공합니다.

SWC 역시 컴파일과 번들링 모두 지원하며 "Rust 기반의 웹 플랫폼" 으로 소개되고 있는데요. 이는 컴파일과 번들러의 기능이 점차 통합되는 추세를 보여줍니다.

하지만 아직까지는 esbuild는 0.2버전으로 정식 출시되지 않았고, 트랜스파일 기능이 Babel 만큼 세밀하지 않은 상황입니다. 또, SWC는 일부 복잡한 설정에서 안정성 이슈가 있어 주로 개발 환경 에서 사용되고 있는데요.

이러한 컴파일러와 번들러의 차이를 이해하고, 이들이 통합된 라이브러리의 발전 과정을 관찰하는 것은 꽤 흥미로운 일인것 같습니다. 이런 발전 동향을 주시하면서, 적절한 시점에 새로운 기술을 도입해서 개발 생산성 향상과 더 나은 개발 환경을 구축의 도입을 추천드립니다.