Babel과 Webpack의 적용

[KimKwon]

Babel & Webpack

왜 Babel과 Webpack을 사용할까?

• 현대 브라우저(크롬61 ~, 파이어폭스60 ... 등)는 ES6을 지원하고 있다.
  하지만 IE와 같은 구형 브라우저에서는 ES6을 지원하지 않고, ES6을 지원하는 브라우저라도 몇가지 이슈가 있다.
  때문에 Babel과 Webpack을 통해 여러 브라우저에서 문제없이 구동시킬 수 있는 개발환경을 구축하기 위함이다.

Babel

Babel은 transfiler이다. 파일의 번역(?)을 돕는 역할을 한다고하면 이해가 쉽겠다.

Babel을 사용하면 다음과 같은 이점이 있다.

// ES6
sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

// ES5 이하의 버전
"use strict";

sayHello = function sayHello(name) {
  return console.log('Hello', name);
};

setTimeout(function () {
  return console.log('Loaded');
}, 2000);
list.forEach(function (item) {
  return console.log(item);
});

위와 같이 ES6를 ES5 이하의 버전으로 변경해준다.

Webpack

웹팩을 사용하게 되면 여러 파일들을 여러가지의 로더들을 사용하여 하나의 파일로 출력해준다.
이게 가장 큰 강점인데, 파일이 분할이 가능하다는 것이고 다양한 로더가 사용이 가능하다는 것이다.

주로 우리가 사용하는 react 고유의 문법인 jsx로 작성된 파일을 js로 변환할 때 사용한다.

• babel-loader을 사용하게 되면 babel이 적용된 하나의 파일이 출력될 것이고,
• eslint-loader을 사용하게 되면 eslint를 이용해 파일들을 분석할 수 있게 된다.
• css-loader을 사용하게 되면 css를 사용할 때 고민하던 클래스 이름의 중복성을 고려하지 않아도 된다.
  • css-loader가 알아서 import하는 모듈과 연관지어 클래스 네임을 정의해준다.
• 이 외에도 여러가지 로더가 존재하고 잘 사용하게 되면 많은 이점을 가져올 수 있다고 생각한다.

웹팩과 바벨을 사용하여 프로젝트의 구조를 다시 재설정 해 볼 필요가 있다.