번들링, 트렌스파일러, Webpack, Babel 은 또 뭐야 🥹

호두·2022년 6월 13일
0

React

목록 보기
4/13
post-thumbnail

🔹 번들링(Bundling)

  • 번들링이란 기본적으로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할을 합니다. 초기에는 JS파일들을 하나의 번들 파일로 묶어주는것에 그쳤지만 현재에는 Css Preprocessing과 이미지 최적화 등 다양하게 확장되었다.

🔹 트렌스파일러(Transpiler)

  • 트렌스파일이란 언어 대 언어로 최신 문접을 레거시 문법으로 다시 써주어 구형 디바이스나 브라우저에서도 작동을 할 수 있게끔 해주는 역할을 한다.

🔹 Webpack

Webpack은 현재 제일 많이 사용되는 번들링 도구이다. 웹펙은 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS 심지어 이미지와 같은 프론트엔드 자산들을 변환할 수 있다.

🔹 Babel

  • Babel은 ES6+ 코드를 이전 JS 엔진에서 실행할 수 있는 이전 버전과 호환되는 JS 버전으로 변환하는데 주로 사용되는 트렌스컴파일러이다. Babel를 이용하여 소스코드를 웹 브라우저가 처리할 수 있는 JS버전으로 변환함으로써 새로운 JS언어 기능을 사용할 수 있다.
profile
Front-end

0개의 댓글