웹팩(webpack)

웹팩은 오픈소스 자바스크립트 모듈 번들러이다.

여러개로 나누어져 있는 많은 파일들을 하나의 자바스크립트로 압축하고 최적화하는 라이브러리이다.

웹팩을 왜 사용할까?

왼쪽의 엄청 많은 파일들을 모아서 오른쪽처럼 js파일 하나, css파일 하나, jpg파일 하나, png파일 하나 이렇게 만들어준다.

이렇게 모으는 것의 장점은,

1. 여러 파일의 자바스크릡트 코드를 압축하여 최적화 할 수 있어서 로딩할 때의 네트워크 비용을 줄일 수 있다는 것이다.
2. 모듈 단위로 개발이 가능해서 가독성과 유지보수가 쉽다.

바벨(babel)

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법(JSX: Javascript에 XML을 추가한 확장한 문법)을 구형 브라우저에서도 실행될 수 있게 변환시켜주는 라이브러리