자바스크립트 프레임워크 동작 원리 - 모듈 번들러(Webpack, Vite), 트랜스파일러/컴파일러(Babel, Polyfill), Typescript

 

자바스크립트 라이브러리를 종합해서 제공하는 프레임워크는 많은 수의 자바스크립트 파일을 가집니다

한 자바스크립트 프레임워크 내에 워낙 다양한 기능을 제공하는 파일들이 많기 때문입니다

 

여기서 해결해야 하는 문제는,

이 많은 모듈들의 순서는 어떻게 처리할 것인가?

모듈이 많아질수록 늘어나는 HTTP 요청으로 인한 오버헤드는 어떻게 해결할 것인가?

등이 있습니다

 

유저가 웹 브라우저에서 하나의 웹 페이지를 볼 때 마다  수많은 파일들의 전체를 다 다운 받는다면

컴퓨터는 과부하가 오게 되는데, 이럴때 번들러를 사용하면 됩니다  

번들러: Bundle - 묶다

번들러는 다수의 JS 파일을 하나의 JS 파일로 압축해 줍니다

번들러를 사용하면 웹 페이지를 보여줄 때 다수의 JS 라이브러리 파일들을 하나의 JS 파일로 압축해서 보여줄 수 있고,

한번의 요청만으로 파일을 받아오게 되므로, 로딩 속도가 빨라집니다

번들러의 종류

• Webpack
• Rollup
• Esbuild
• Vite

Webpack

Webpack은 자바스크립트 정적 모듈 번들러 중 하나로, 주로 웹 애플리케이션을 위해 사용됩니다. Webpack의 주 기능은 의존성이 있는 모듈(JavaScript, CSS, 이미지 파일 등)을 모아서 브라우저에서 사용할 수 있는 하나의 JS 파일로 묶는 것입니다

기능

•  Common JS ,AMD, ES6 Module 포맷 지원
• JS 뿐만 아니라 CSS Image 등의 복잡한 의존성도 관리
• 성능 최적화: 사용하지 않는 코드 제거(Tree Shaking 최적화), HTTP 요청 수 감소 (네트워크 비용 감소)
• Code Spliting: 메인 페이지마다 묶어서, 매 페이지 접근 시마다 전체 번들링 JS를 가져오는 것을 막음

Webpack의 장점은 네트워크 비용이 감소되고, 모듈단위 개발로 인해 가독성이 올라가고 유지보수 쉽다는 것입니다

Vite

Vite는 최신 웹 개발을 위한 빌드 도구이며, 빠른 개발 서버 시작과 빠른 HMR(Hot Module Replacement)을 제공하는 것이 특징입니다. Vite는 기존 번들러와 다르게, 개발 중에는 모듈을 번들링하지 않고 필요한 모듈만을 빠르게 변환하여 제공합니다.

기능

• 빠른 콜드 스타트: 개발 모드에서 전체 애플리케이션을 번들링하지 않고, 페이지 별로 꼭 필요한 모듈만 실시간 요청에 따라 반환하여 제공합니다
• ESM 기반: ES 모듈을 사용하여 브라우저가 직접 코드를 해석할 수 있도록 합니다(브라우저가 곧 번들러. 매우 빠름)
• Code Spliting = Dynamic Import : 메인 페이지 내 서브 페이지마다 필요한 라이브러리만 번들링
• 복잡한 설정 없이 Typescript, CSS로더, Hot Module Replacement 제공

Vite의 장점은 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합하기 대문에 중복을 제거해서 가볍고 빠르게 로드하는 것입니다

 

Webpack은 소스 코드와 모든 종속 관계의 모듈을 번들링 한 후 서버가 준비되는 반면,

Vite는 esbuild 로 미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동됩니다

 

참고: 

https://enjoydev.life/blog/frontend/4-module-bundler

*다른 글도 참고해보자

 

 

개발자는 최신 ES6 문법을 쓰고 싶고, 모든 유저가 이 문법을 지원하는 웹 브라우저로 업데이트를 할 수 없는 상황이라면, 트랜스파일러를 사용합니다

트랜스파일러/ 컴파일러 : 고버전 JS / TS -> 저버전 JS

특정 버전의 자바스크립트가 다양한 ES 버전의 웹 브라우저에서 동작 되기 때문에 JS 버전 호환성 문제가 발생합니다

다양한 버전의 웹 브라우저에서 모두 동작하게 하고 싶으면 제일 낮은 버전 을 지원하면 된다

Babel과 Polyfill

Babel : 저버전 ES 버전으로 변환

Babel은 자바스크립트 코드를 변환하는 트랜스파일러입니다. 주로 최신 버전의 JavaScript (ES6 이상) 코드를 오래된 버전의 자바스크립트 (ES5)로 변환하여 구형 브라우저에서도 실행할 수 있도록 하는 데 사용됩니다. 이 과정을 통해 개발자는 최신 언어 기능을 사용하여 개발할 수 있으며, 코드는 널리 호환 가능하게 변환됩니다.

Polyfill : 트랜스파일링으로 전환할 수 없는 로직은 polyfill로 처리

브라우저가 지원하지 않는 최신 자바스크립트 내장 함수와 메소드들을 구현해주는 코드를 추가합니다.
예를 들어, Promise, Map, Set 등의 ES6 기능을 ES5 코드에 포함시켜줍니다

 

바벨은 폴리필을 제공해주며 폴리필은 저버전 ES 문법에 대치되지 않을때 별개의 구현체로 대체해 줍니다

이를 통해 개발자가 최신 문법을 사용해도 구형 브라우저에서도 코드가 동작할 수 있게 됩니다

Typescript : 정적 타입을 통한 JS 안정성 보장

타입스크립트는 자바스크립트에 타입이라는 확장 문법을 제공해 줍니다

결국 자바스크립트 런타임에 구동되기 위해서는 변환이 필요합니다

• 타입스크립트 로더 : 타입스크립트로 작성된 TS 파일을 자바스크립트 파일 JS 로 변환합니다

그런데 바벨을 통해 컴파일을 수행한 뒤, 이에 타입스크립트 로더로 추가로 컴파일하게 되면, 매우 느려집니다

• TS → Typescript Loader (Transpiler) → JS → Babel (Transpiler) → JS

💡 이를 해결하기 위해 일부 프로젝트에서는 타입스크립트의 `tsc` 컴파일러가 바벨과 유사한 역할을 수행하도록 설정하여 바벨을 건너뛰고 타입스크립트 컴파일러만 사용하기도 합니다. 또는 `@babel/preset-typescript` 같은 바벨 프리셋을 사용하여 타입스크립트와 바벨의 변환 과정을 하나로 통합할 수도 있습니다. 이러한 접근 방식은 빌드 과정을 단순화하고 성능을 향상시킬 수 있습니다.