바벨(Babel)과 웹팩(webpack)

바벨이란?

모든 실행 환경에서 자바스크립트가 정상적으로 동작할 수  있도록 변환해주는 자바스크립트 트랜스파일러.

간혹 오래된 브라우저에서는 최신 문법을 지원하지 않는 경우가 있는데,

사용자가 이런 브라우저를 통해 접속 했을 경우

최신 문법으로 작성된 코드도 읽을 수 있도록 (ex : ES6코드를 ES5코드로 변환) 해주는 것이다.

(Transpile : 한언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것.)

 

웹팩이란?

프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 번들로 묶고 브라우저에서 사용할수있도록하는 모듈번들러이다.
모듈번들러(Module bundler)란?

웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이를 조합해서 병합(압축)된 하나의 결과물을 만드는 도구를 의미한다.