[Web] WebPack 과 Babel

Bundler (번들러)

번들(Bundle)은 "묶다"라는 개념으로, 번들러는 자바스크립트 파일을 하나의 파일로 묶어주는 것을 의미

• 장점 : 여러 파일을 하나의 파일로 묶어주기 때문에 네트워크 접속 부담을 줄여 더 빠른 서비스를 제공할 수 있다.
• 번들러 대표적인 종류
  • WepPack (가장 인기있는 번들러)
  • broserify
  • parcel

ES6(ECMAScript6)

다양한 웹 브라우저에서 자바스크립트가 잘 동작할 수 있도록 하는 규격

• 기능 (나중에 더 자세하게 공부)
  • 변수 선언 방법 변화 (let, const)
  • 화살표 함수 (Arrow Function)
  • 클래스
  • etc

모듈

애플리케이션의 크기가 커짐에 따라 파일을 여러개로 분리하게 되었고, 이 때 분리된 파일 각각이 모듈이다. (ES6부터 모듈 사용)

WebPack (웹 팩)

필요한 모든 파일(모듈)을 하나의 파일(모듈)로 묶어두는 것 (모듈 번들러)

• 하나의 자바스크립트 파일에 CSS, 이미지 등과 같은 여러 모듈들을 몰아서 넣을 수 있다.
• 필요하다면 모아둔 모듈을 다시 분리하는 것도 가능하다.

Babel (바벨)

ES6(현 규격)를 ES5(구 규격)로 바꿔주는 것

웹 팩을 이용해 모듈을 묶으면서 브라우저가 ES6를 이해하지 못하는 상황이 발생했다 (모든 브라우저가 ES6 기능을 제공하는 것이 아님). 이를 해결하기 위해 바벨이 탄생했다.