webpack-babel.md

Webpack과 Babel

모듈 번들러 (Module Bundler)

현대의 프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이다. 즉, 모듈은 서로 의존성을 띄고 있는데, 이런 점에서 다음과 같은 문제들이 생긴다.

• 수많은 모듈들의 순서를 어떻게 처리할 것인가?
• 모듈이 많아질수록 HTTP 요청이 많아질텐데, 이로 인한 오버헤드는 어떻게 해결할 것이가?
• ES6+ 스펙의 코드를 어떻게 처리할 것인가?

위 문제들을 해결하기 위해 등장한 것이 모듈 번들러로 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만듦과 동시에 ES6+ 스펙을 ES5로 변환해주는 도구이다. 이미지 압축, 최소화 등의 여러가지 기능들도 제공하며 유명한 번들러로는 Webpack, Parcel, Rollup 등이 있다.

트랜스파일러 (Transpiler)

트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하며 이를 해주는 것이 트랜스파일러이다. 트랜스파일러가 필요한 이유는 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5 코드로 변환시키는 과정이 필요하다.

사실 ES6+의 기능 뿐만 아니라 리액트의 JSX를 자바스크립트 코드로 변환시킨다거나 타입스크립트를 자바스크립트로 변환시키는 등의 역할도 트랜스파일러의 기능 중 하나이다. ES6+나 JSX를 변환시키는 트랜스파일러로는 바벨(Babel) 이 있으며 타입스크립트를 변환시키는 도구로는 타입스크립트 트랜스파일러가 있다. 보통 프론트엔드 프레임워크 및 라이브러리를 사용해 개발할 때 모듈 번들러에 트랜스파일러를 추가해서 사용하는 방식을 사용한다.

Webpack

웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.

Webpack에서의 모듈

웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 제작하려면 HTML, CSS, JavaScript, Images, Font 등 많은 파일들이 필요한데, 이 파일 하나하나가 모두 모듈이다.

아래 그림과 같이 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 한다.

💡 빌드, 번들링, 변환 모두 같은 의미의 단어이다.

Webpack을 사용하는 이유

✔ 파일 단위의 자바스크립트 모듈 관리

변수 유효 범위의 문제점을 해결할 수 있다.

✔ 웹 개발 작업 자동화

웹 서비스를 배포할 때 아래와 같은 작업들을 해야 했다.

• HTML, CSS, JS 압축
• 이미지, 폰트 파일 압축
• CSS 전처리기 변환

이러한 일들을 자동화해주는 도구가 웹팩이다.

✔ 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

서버로 요청하는 파일의 숫자를 줄이기 때문에 초기 로딩 속도를 높일 수 있다. 또한, 웹팩을 이용해 여러 개의 파일을 하나로 합치면 브라우저별 HTTP 요청 숫자의 제약을 피할 수 있다.

Babel과 Polyfill

바벨

바벨은 구형 브라우저에서도 최신 자바스크립트 문법을 제대로 동작하도록 변환해주는 트랜스파일러이다. 바벨은 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경된다. 변경된 코드는 웹사이트 형태로 사용자에게 전달된다.

바벨은 컴파일 타임에 코드를 구형 브라우저에서 사용 가능하게 변환하지만, ES6 이상에서 새롭게 추가된 Promise, Map, Set 같은 전역 객체들이나 String.padStart 등 전역 객체에 추가된 메서드 등은 컴파일 타임의 코드 변환으로는 해결하기 어렵기 때문에 폴리필이 필요하다. 즉, 구형 브라우저에서 최신 자바스크립트 코드를 사용하기 위해 바벨을 이용했지만, 일부 기능들은 폴리필로 추가해줘야 한다.

폴리필

폴리필은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는데 필요한 코드 조각이다. 폴리필은 말 그대로 구현이 누락된 새로운 기능을 매꿔주는(fill in) 역할을 한다.

폴리필은 런타임에 필요한 기능을 주입하는 것이다. 즉, 브라우저에서 실행되는 시점에 필요한 기능을 주입한다.

폴리필 사용하기

@babel/preset-env 사용하기

지원할 브라우저 정보와 일부 옵션을 지정하면 자동으로 필요한 기능들을 주입해준다.

// .babelrc
{
    "presets": [
        ["@babel/preset-env",{
            "targets": ">= 0.25%, not dead" // 시장점유율이 0.25%이상, 업데이트가 종료되지 않은 브라우저를 대상
        }]
    ]
}

참고

• 캡틴판교 | 웹팩 핸드북
• Blog | Webpack 개념잡기
• Github | 모듈 번들러와 트랜스파일러
• JavaScript.info | 폴리필
• velog | Babel, 폴리필(polyfill) - @babel/preset-env