[JavaScript] 모던 자바스크립트와 바벨 그리고 웹팩

배경

바벨과 웹팩은 웹프론트엔드 어플리케이션을 제작할 때 없어서는 안되는 기반 기술이되었다. 

테스트 프레임워크를 도입할 때, 별도의 빌드 과정이 필요할 때, 서버사이드 렌더링을 위해서 서버 측 코드를 빌드해야 할 때 등

바벨과 웹팩을 활용해야 한다. 

 

엔진이 표준 전체를 지원하지 않고 일부만 지원하는 건 흔한 일이다. 

특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우가 있다. 명세서 내 모든 기능을 모든 (브라우저)엔진이 구현하고 있지 않기 때문이다. 

 

바벨이란?

• 자바스크립트 컴파일러이다.(공식 홈페이지 번역, 컴파일러보단 트랜스파일러에 가깝다 생각한다. ) 

📚컴파일러  - 한 언어를 다른 언어로 변환 e.g.) Java -> bytecode
✅트랜스파일러 - 한언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환 e.g) ES6 -> ES5

• 바벨(Babel)은 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 변환하는 트랜스파일러(transpiler)이다. 
• 코드 변환기라고 생각하면 쉽다.
• ES6 -> ES5로 변환해줄 뿐만 아니라, JSX문법, 타입스크립트, 코드 압축, 제안 단계에 있는 문법들을 사용할 수 있다. 
• 자바스크립트 파일을 변환해주는 작업은 플러그인 단위로 이뤄진다. 플러그인을 하나의 집합으로 묶으면 그것을 프리셋(preset)이라고 부른다. 

Babel · The compiler for next generation JavaScript

바벨(babel)의 주요 역할

개발자의 컴퓨터에서 돌아가며, 바벨이라는 트랜스파일러 프로그램을 실행하면 구 표준을 준수하는 코드로 변경된다.

변경된 코드는 웹사이트 형태로 사용자에게 전달된다. 빌드 시점에 새로운 자바스크립트 문법을 해당 문법을 지원하지 않은 브라우저에서 해석 할 수 있도록 코드를 변환시켜 준다.

 

1. 트랜스파일러 - JS 신 문법을 구 표준을 준수하는 코드로 변경해준다.
2. 폴리필(Polyfill) -오래된 브라우저를 지원하기 위해 바벨로 문법을 변환하는 동시에 폴리필도 사용해야한다.
   • 폴리필이란 런타임에 기능을 주입하는 것 (런타임에 기능이 존재하는 지 검사하여 기능이 없는 경우에만 주입한다.)
   • 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트
   • 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할. 
   • 주목할 만한 폴리필 종류: core js / polyfill.io

폴리-필(Polyfill) 이란?
브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환한 코드를 의미한다. 즉, 최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드를 의미함.

폴리필 예시) 바벨의 경우 ES5 문법으로 변환해주지만 ES5에 존재하지 않는 Map, Promise, Set, Object.assign()등을 변환해줄 수 없는데 이 기능들을 폴리필을 통해 런타임에 주입한다.

✅모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수이다. 

 

웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스 파일러를 동작시켜준다. 이러한 과정이 없으면 개발이 끝난 코드를 통합하는데 어려움이 있을 수 있다.

 

웹팩(webpack)이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.  

-> 여러 개로 나눠진 자바스크립트 파일을 html이 실행할 수 있는 하나의 자바스크립트 파일로 합쳐준다.

모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈
로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미

 번들러는 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구

[모듈 번들러의 장점]

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용 절감효과
2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.
3. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜준다.

 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있다(우려사항). 하지만 웹팩에서는 청크, 캐시, 코드 스프릿 개념들을 도입하면서 해당 문제들을 해결하고 있다. 

 

웹팩 구성요소

• Entry
  • 웹팩이 빌드할 파일의 시작 위치를 나타낸다.
  • entry 지점으로부터 import되어 있는 다른 모듈과 라이브러리에 대한 의존성을 찾는다.
  • 디폴트로 설정된 값은 ./src/index.js

module.exports = {
  entry: ' ./src/index.js'
};

• Output
  • output은 웹팩에 의해 생성되는 번들을 내보낼 위치와 파일의 이름을 지정한다.
  • 디폴트 값은 ./dist/main.js  

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

• Loader
  • loaders를 통해 자바스크립트 파일이 아닌 파일들도 유효한 모듈로 변환시켜준다.
  • loaders의 설정은 싱글 모듈에 대한 rules 프로퍼티를 정의해야 하며, rules 프로퍼티는 test와 use를 필수 프로퍼티로 가지고 있다.
  • test 프로퍼티는 변환해야 하는 파일 또는 파일들을 식별하는 역할
  • use 프로퍼티는 변환되어야 하는 파일에 대하여 어떤 로더를 사용해야하는 지 설정한다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

• Plugins
  • 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
  • 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용 가능하다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

• Mode
  • mode는 웹팩을 세팅함에 있어서 development, production, none 중 하나를 파라미터로 사용한다.
  • production - 최적화되어 빌드
  • development - 빠르게 빌드
  • none - 아무 기능 없이 웹팩으로 빌드

module.exports = {
  mode: 'production'
};

 

 

 

[웹팩의 동작원리]

웹팩은 entry로 설정된 시작점에서 의존성을 가진 모든 파일을 압축하여 output 지점에 하나의 자바스크립트 파일을 만들어 준다. 이때, 자바스크립트가 아닌 파일은 loaders를 이용하여 자바스크립트에서 이용 가능한 모듈로 만들어 주며, plugins를 이용하여 번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하는 역할을 한다. mode는 웹팩의 사용 목적에 따라 설정을 지정하는 역할을 한다. 

 

[요약 정리]

웹팩은 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드 과정을 통해 하나의 파일로 만들어준다. 바벨은 코드 변환기이다. 유저가 다양한 종류의 버전의 브라우저를 사용하고 있기 때문에 특정 버전을 맞추기 어렵다. 이러한 이유로 개발자들이 최신 코드를 쓰면서 최대한 많은 사람들이 사용하는데 불편함없이 만들어주기 위해 바벨을 사용하여 코드 자체를 변환시켜 사용한다.

 

 

참고 자료:

[JS][WEBPACK] 1. 웹팩이란 무엇인가

https://ko.javascript.info/polyfills

폴리필

https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/webpack-mode

Webpack 모드 - Webpack 러닝 가이드