Vue.js 적용을 위한 핵심 개념 정리

 

Webpack(웹팩)

애플리케이션 동작과 관련된 html, css, javascript, 이미지 같은 파일들을 하나의 자바스크립트 파일 안에 다 넣어버린다.

웹팩을 통해 하나의 자바스크립트 파일에 다 관리되면서, 기존의 HTTP 통신을 통해 resource를 가져오는 행위가 사라지기 때문에 네트워크 부하를 줄일 수 있다.

 

 

Babel(바벨)

ES6(ES2015) 이상 버전이나 Typescript로 코딩을 한 경우 범용적인 ES5버전으로 자동 전환(트랜스파일)해주는 기술이다.

좀 더 쉽게 설명하자면, ES6와 같은 최신 코드를 모든 브라우저에서 문제 없이 작동될 수 있도록 ES5 형태로 converting 해준다. Babel을 통해 브라우저 호환성 문제를 없앨 수 있다는 뜻이다.

Webpack은 resource를 번들링 해준다고 생각하면, Babel은 실제 빌드를 하는 역할을 한다.