Webpack과 Babel
Webpack
Webpack은 자바스크립트 애플리케이션을 위한 번들링과 컴파일을 결합한 정적 모듈 번들러입니다. Webpack에서는 자바스크립트 모듈 뿐만 아니라 웹 앱을 구성하는 모든 리소스(html, stylesheet, img, font 등)를 모듈로 취급합니다.
React에서는 주로 Webpack을 번들러로 많이 사용하는데 그 이유는 다음과 같습니다.
1. 사용하지 않는 리소스의 제거와 같은 최적화 작업을 수행하여 웹 앱의 성능을 향상시킵니다.
2. 번들링을 통해 웹 브라우저의 HTTP 요청 횟수의 제약을 피할 수 있도록 해 줍니다.
3. Webpack의 Code Splitting 기능을 사용하면, 웹 앱의 로딩 속도를 개선할 수 있습니다.
따라서 Code Splitting 기능을 통해 코드를 분할하고, 사용자가 당장 필요로 하지 않는 리소스는 지연 로딩(Lazy Loading)함으로써 애플리케이션의 성능을 향상 시킬 수 있습니다.
CRA(Create-React-App)을 사용하여 React 개발 환경을 설정하면 Webpack은 자동으로 설치됩니다.
Webpack 공식 홈페이지에서 좀 더 자세한 내용을 확인할 수 있습니다.
◎ Webpack 공식 홈페이지 (https://webpack.kr/)
Babel
Babel은 일종의 자바스크립트 컴파일러로, 최신 자바스크립트 문법(ES6)이나 실험적인 자바스크립트 문법으로 작성된 코드를 이전 버전인 ES5 문법의 자바스크립트 코드로 변환해 주는 툴 체인입니다.
다른 프로그래밍 언어와 달리 자바스크립트는 정말 다양한 종류와 버전의 웹 브라우저에서 실행됩니다. 대부분의 최신 웹 브라우저에서는 최신 자바스크립트 문법을 바로 실행시킬 수 있지만, 구 버전의 웹 브라우저에서는 특정 코드가 실행되지 않을 수도 있고 특정 브라우저에서만 실행되지 않는 코드들도 있을 수 있습니다
따라서 Babel과 같은 트랜스파일러(transpiler)을 사용하여 작성한 자바스크립트 코드가 어떤 환경에서도 정상적으로 동작할 수 있도록 이전 버전의 자바스크립트 문법(ES5)으로 변환해 주는 것입니다.
React에서 사용하는 JSX 문법도 표준 자바스크립트 문법이 아니므로, Babel을 통해 ES5 문법의 자바스크립트 코드로 변환되어야만 웹 브라우저가 정상적으로 인식할 수 있습니다.
Babel 공식 홈페이지에서 좀 더 자세한 내용을 확인할 수 있습니다.
◎ Babel 공식 홈페이지 (https://babeljs.io/docs/en/)
