webpack? babel?

웹팩(webpack)

정의

개발환경에서 원할한 작업을 위해 만들어진 모듈 파일들을 하나의 파일로 묶어서 한번만 불러올 수 있게 해주는 기능을 '모듈 번들러' 라고 한다. 이 모듈 번들러는 종류가 아주 다양하지만, 프론트엔드에서 가장 인기 있는 것이 바로 '웹팩'이다.

 

우린 이것을 어디서 접하고 있었을까?

웹팩을 사용하기 위해서는 프로젝트가 npm에 의해 관리가 되어야 한다. 프로젝트에 'npm init'을 하면 package.json이 생기는데, 여기서 webpack을 설치하면 package.json에 'dependencies' 키가 생긴다. 웹팩을 설치하면 나오는게 바로 이 키이다.

프론트에서 리액트 프로젝트를 진행할 때 이것이 꼭 있었는데, 우리가 웹팩을 사용하고 있다는 것이였다!!

 

컨트롤 하는 법

1. 프로젝트 최상단에 'webpack.config.js'를 만들어서 

2. 공식 홈페이지에서 웹팩 설정코드를 가져와 넣는다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  // mode: 'production' or 'development' 설정 가능
};

3. 터미널에 npx webpack을 실행하면 'entry'에 설정한 경로 안에 번들링 된 모듈 파일이 생성된다.

 

---

바벨(babel)

정의

ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 한다.

바벨을 사용하는 이유

스마트폰 화면이나 IE/크롬/사파리 등 각 브라우저의 렌더링 엔진의 차이로 보이는 모습이 다른 경우가 있는데, 최적화 작업을 통해 기존에 의도한 대로 보이도록 하는 작업을 말한다.

개발을 진행하면서 간혹 최신 브라우저에서 동작하는 기능을 다른 브라우저나 이전 버전의 브라우저에서 구현해야 하는 경우, 기능 자체를 생략하거나 단순화해야 하는 상황이 발생한다. 이런 이슈는 코드의 일관성을 해칠 수 있으며, 협업 과정에서 또 다른 문제를 야기할 수 있습니다. 바벨은 이런 문제점들을 보완하고 해결하기 위해 등장했다.

플러그인 ? 프리셋 ?

바벨에서 플러그인(plugin)이나 프리셋(preset)을 통해 문법 변환 규칙을 알려줄 수 있다.

플러그인 : 어떤 코드를 어떻게 변환할 지 규칙 하나하나를 세밀하게 적용할 때 사용한다. 플러그인은 직접 만들어서 커스텀 플러그인을 사용해도 되고, 이미 잘 만들어진 플러그인을 가져다가 써도 된다.

module.exports = {
  plugins: [
    "@babel/plugin-transform-block-scoping", // const, let을 var로 바꿈
    "@babel/plugin-transform-arrow-functions", // 화살표 함수를 일반 함수로 바꿈
    "@babel/plugin-transform-strict-mode",  // 엄격 모드를 적용하여 ES6+를 ES5로 변환
}

 

프리셋 : 필요한 플러그인들을 목적에 따라 세트로 묶어놓는 것이다. 프리셋도 마찬가지로 직접 모듈을 만들어서 설정할 수도 있고, 바벨에서 제공하는 프리셋을 가져와서 사용할 수도 있다.

module.exports = {
  presets: [
    '@babel/preset-env' //대표적인 프리셋으로 ES6+를 변환
  ]
}

만약에 특정 브라우저 버전 이상을 지원해야 할 경우 바벨 설정파일에서 targets 속성 값으로 지정해 주면 된다. 예를 들어서 크롬 79 이상, IE 11 이상을 지원해 주는 코드로 변환하고 싶다면 아래와 같이 바벨 설정 파일을 바꾸어 주면 된다.

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '79', // 크롬 79까지 지원하는 코드를 만든다
          ie: '11' // ie 11까지 지원하는 코드를 만든다
        }
      }
    ]
  ]
}

 

 

 

(바벨 폴리필도 배우자...)