Babel, Webpack

Babel

Babel: 어떤 코드의 형태를 변환시키는 컴파일러

예를 들어 ES6의 arrow function을 아래와 같이 일반 함수 선언으로 변경해주는 것이 있다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

JSX

JSX

• React 코드를 작성하기 위한 문법
• JavaScript 표준이 아니기 때문에 브라우저가 읽지 못함
  => Babel이 브라우저가 JSX를 읽을 수 있도록 변환해줌

Webpack

webpack: 분리된 JavaScript와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합하는 번들러

HMR

HMR(Hot Module Replacement)
모듈을 새로고침할 필요 없이 런타임에 업데이트 가능하게 해줌