Webpack과 Babel

리액트를 사용하려면 Webpack 과 Babel이라는 것을 알아야한다.

Webpack

Webpack은 오픈소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러지만 호환 플러그인을 포함하는 경우 HTML, CSS, IMAGE와 같은 프론트엔드 자산들을 변환할 수 있다. Webpack은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생산한다. HTML 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 즉, 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어주는 것을 Webpack이라고 한다. 

이전에는 페이지마다 html을 요청해서 뿌려주는 방식이었지만 요즘은 SPA라는 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함된다. 연관 되어 있는 자바스크립트 종속성이 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리는 점을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. 하나의 자바스크립트 파일로 만들어서 웹페이 성능을 최적화해준다.

Babel

Babel은 ECMAScript 2015+ 코드를 이전 자바스크립트 엔진에서 실행할 수 있는 이전 버전과 호환되는 자바스크립트 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 자바스크립트 트랜스 컴파일러다. 즉, 최신 ES6 버전을 구 버전인 ES5로 변환해준다.

ES6는 인터넷 익스플로러11을 사용하는 비율이 11% 정도가 되지만 지원을 해주지 않는다. 그러므로 ES5버전으로 바꿔줘야하 한다. 따라서 개발환경을 설정할 때, Webpack과 Babel로 기초 환경 설정을 잡고 개발해야한다.

 

참조 : https://velog.io/@yon3115/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%95%84%EC%88%98-Webpack%EC%9D%B4%EB%9E%80

프론트엔드 필수 Webpack이란?