Babel, Webpack이란? 쓰는 이유 요약 정리

 

📌 Babel이란?

바벨(Babel)이란, 입력과 출력이 모두 자바스크립트 코드인 컴파일러입니다. 바벨은 최신 버전의 자바스크립트가 실행되지 않는 구 버전의 브라우저에서도 정상적으로 실행되도록 변환해줍니다. (최신 버전의 JavaScript 코드를 ES5버전의 코드로 바꿔주는 Node.js패키지) 현재는 바벨을 이용하여 JSX 문법, 타입스크립트(TypeScript)와 같은 정적타입의 언어와 코드 압축 등의 문법을 사용할 수 있습니다.

 

babel을 쓰는 이유

• 크로스 브라우징
  • JavaScript (ES6) -> JavaScript(ES5)로 변환해줍니다. (브라우저 하위 호환성을 생각)
  • 각 브라우저마다 JavaScript 엔진이 다르지만, 모든 브라우저에서 동작하도록 호환성을 지켜줍니다.
• 폴리필(polyfill)
  • 폴리필은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미합니다.
  • 폴리필은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 합니다.

 

📌 Webpack이란?

Webpack은 모듈 번들러입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Image 등)을 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 의미합니다.

 

Webpack을 쓰는 이유

• 모듈간 의존성 문제 해결
  • 웹팩이 모듈간의 의존성을 계산하여 번들링해줍니다.
• 네트워크 병목을 줄여줌
  • <script> 태그를 여러개 쓰면 네트워크 병목현상이 생길 수 있습니다. 이런 문제를 해결하기 위해 하나의 js파일로 로드하면 됩니다. 그러나 실제로 코드를 하나의 js파일에 작성하면 가독성이나 전역공간의 오염 문제가 발생하게 되므로 웹팩을 써서 여러개의 파일을 하나로 묶어주는 방법을 사용합니다.
• 모듈단위의 개발 가능
  • 가독성, 유지보수 효율을 높입니다. 스코프를 신경쓰지 않고, 라이브러리간 종속 문제를 고민할 필요가 없습니다. (웹팩이 계산)
• 코드 압축, 최적화
• es6+ 스크립트 지원
  • 바벨로더로 바벨 사용

 

 

 

 

참고

 

(프론트엔드의 첫걸음) 바벨(Babel) 이란?

 

[Node.js] Babel (바벨) 이란? / 사용법

 

프론트엔드 필수 Webpack이란?

 

 

웹팩 바벨 요약

 

 

 

TypeScript + Webpack + Babel 을 사용하는 이유