Webpack이란 ?
- Webpack = 모듈 번들링이라고 한다.
- html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다.
- 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다.
그럼 Webpack을 왜 사용해야 할까 ?
옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.
바벨이 무엇인지?
1. 바벨(Babel) 이란 무엇일까?
공식홈페이지의 설명에 따르면 자바스크립트 컴파일러라고 한다.
- 바벨 공식 홈페이지 : https://babeljs.io/
※ 컴파일러(compiler, 순화 용어: 해석기, 번역기)는 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 프로그램을 말한다.
(위키 백과 참고 : https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC)
그렇다면 왜 자바스크립트 컴파일러인 바벨을 사용할까?
2. 바벨의 사용이유
바벨에 대해 알아본 결과 2가지 사용이유를 발견했다.
1) 최신 자바스크립트 문법을 모든 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다.
※ 브라우저 별 ECMAScript ES6 지원 현황 테이블 : https://kangax.github.io/compat-table/es6/
=> 위의 페이지에 접속하여 확인해보면 최신 문법을 지원하지 않는 브라우저가 존재하기 때문에 이전 버전의 문법을 적용하여 코드를 작성할 필요가 있다.
2) Babel 사용시 ES6, ES7 과 같은 최신 문법을 사용해서 코딩 후 브라우저 호환성을 위해 코드를 다시 작성할 필요가 없다.
=> 이미 ES6를 통해 코드를 작성하였는데 브라우저 호환성을 고려해 코드를 변경할 경우가 생긴하면, 모든 코드를 변경해주어야 하는 번거로움이 생긴다. 그럴때 바벨을 사용해서 자동으로 변경되게 해주면 되는것이다.
