크로스 브라우징 관련되어 프론트엔드 개발자에게 webpack과 babel은 필수라고 하는데
react에서 기본적으로 제공되어 잘 모르고 있었습니다. 😭
기본부터 잡기 위해 모듈 번들러에 대해 알아보도록 하겠습니다.
모듈 번들러에 앞서 크로스 브라우징이 뭘까요?
크로스 브라우징
개발자마다 사용하는 언어가 다릅니다 . 프론트엔드에서도 주로 사용되는 것은 JS이지만 최신 문법을 사용할 수도 있고, TS를 사용할 수도 있습니다. 그리고 브라우저가 해석할 수 있는 언어 또한 다릅니다. 인터넷 익스플로어가 최신 문법을 지원하지 않아서 문제가 많았었는데, 이젠 사용하지 않아서 다행입니다. 그래도 사파리 같은 경우에는 작년까지 Promise 에서 finally 메소드를 사용할 수 없었다고 합니다.
(자주 사용하는 메소드인데..🙊)
이렇게 여러 브라우저에서 작성한 코드가 정상적으로 돌아갈 수 있게 하는 행위를 '크로스 브라우징을 지원하게 한다' 라고 합니다. 바벨을 통해 크로스 브라우징을 지원하게 할 수 있습니다. 바벨은 ES6 이후 최신 문법으로 작성된 코드와 TS JSX 처럼 다른 언어들을 모든 브라우저에서 동작하도록 호환성을 지켜줍니다.
1. 모듈 번들러란?
여러개로 나뉘어 있는 파일들을 하나의 파일로 묶어주는 것입니다.
js 파일들을 각각 분리해서 로드하면 순서에 따라 에러가 발생하는 등 불편함이 생깁니다.
이런 불편함을 모듈번들러가 해소 시켜줍니다.
2. Webpack
모듈 번들러로 가장 유명한 webpack 입니다.
webpack은 최신 자바스크립트 애플리케이션을 위한 정적 모듈 번들러입니다.
웹팩이 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하고,
하나 이상의 번들을 생성하는 종속성 그래프를 내부적으로 빌드합니다.
웹팩에는 4가지 개념을 이해해야 합니다 .
Entry
자바스크립트가 로딩하는 모듈이 많아질수록 모듈간 의존성이 증가합니다.
종속성 그래프를 구축하기 위한 시작점을 Entry 라고 합니다.
필요한 모듈을 로딩하고 하나의 파일로 묶습니다.
기본값은 ./src/index.js 입니다.
Output
웹팩에게 번들 파일을 어디에 생성할지 어떤 이름으로 할 것인지를 알려줍니다.
main output 파일일 경우 기본값이 ./dist/main.js입니다.
Loader
기본적으로 웹팩은 js 및 JSON만 읽을 수 있습니다.
하지만 Loader를 사용하면 웹팩이 다른 유형의 파일을 처리하고 이를 애플리케이션에서 사용하고
종속성 그래프에 추가할 수 있는 유효한 모듈로 변환할 수 있습니다.
-
babel-loader : ES6 를 ES5로 변환합니다. test:/.js$/ 과 같이 파일을 정규표현식으로 지정합니다.
-
css-loader(style-loader) : 웹팩은 모든 것을 모듈로 다루기 때문에 CSS 파일을 JS로 변환해서 로딩을 해야합니다.
-
test:/.css$/로 작성.
-
styled-loader 는 자바스크립트로 변경된 스타일시트를 동적으로 돔에 추가해야하는 로더입니다.
Plugin
로더가 특정 유형의 모듈을 반환하는데 사용되었다면, 플러그인은 번들된 결과물을 처리합니다.
번들 최적화, asset 관리 및 환경 변수 삽입과 같은 광범위한 작업을 수행합니다.
-UglifyJsPlugin : 로더로 처리된 자바스크립트 결과물을 난독화 처리하는 플러그인입니다.
-ExtractTextPlugin : sass를 style.css파일로 따로 번들링하는 플러그인 입니다.
3. Babel
ES6 에서 ES5로 컴파일 해주는 트랜스 파일러입니다.
🙊 컴파일러와 트랜스파일러의 차이
- 컴파일러 : 한 언어로 작성된 소스 코드를 다른 언어로 바꾸는 것입니다.
트랜스 파일 :
a라는 소스코드 파일을 읽어서 b라는 소스코드 파일로 변환시키는 행위, 컴파일 했을 때 , 추상화 수준이 같은 코드로 변환합니다.
구버전의 소스코드를 신버전에 호환하는 형식으로 바꾸기도 하며, 신버전의 소스를 구버전에 호환되게 하기도 하는것이 목적입니다.
webpack에서 나온 babel-loader 과 babel 의 차이는 뭔가요?
babel-loader 는 웹팩에서 바벨을 로드할 때 쓰이는 것입니다. (그저 웹팩과 바벨을 연결시키는 것이라고 할 수 있습니다.)
Polifill
폴리필은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미합니다.
브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워넣는다는 의미입니다.
- babel-polyfill
바벨은 이 폴리필을 지원해, 최신 함수들을 사용할 수 있습니다 (Promise)
transpiler 역할만 하는 바벨은 컴파일시에 진행되고, bable polyfill은 런타임 시에 실행되는 차이가 있습니다.
바벨 사용법은 아래에서 보시면 됩니다.
