[TIL] Babel, Webpack, Polyfill 개념 정리

Babel이란?

바벨은 자바스크립트 컴파일러로 새로운 방식의 자바스크립트로 개발 후, 배포할 때에는 예전 방식의 자바스크립트로 변환해서 배포하려고 쓴다.

• Complie: 언어 => 기계
• Transpile: 언어 => 언어

바벨 홈페이지에 들어가보면 Babel is a JavaScript compiler라고 쓰여있다. 트랜스파일러는 소스를 입력받으면 다시 다른 소스로 반환하는, 컴파일러의 일종이기 때문에 컴파일러라고 부르는 것은 문제가 되지 않는다.

왜 사용할까?

최신 버젼의 자바스크립트가 실행이 안되는 구버젼 웹브라우저를 대응하기 위해서이다.

ES2015 문법은 대부분의 브라우저가 평균 98% 정도로 지원하고, 최근 버전의 크롬 브라우저는 ES2016+ 문법을 제법 지원한다. 크로미움 기반 엣지와 크롬 79버전 기준 무려 92%에 달한다!

그럼에도 바벨이 필요한 이유는

1. 사실상 익스플로러를 고려해야 하고

2. 사용하고 싶은 최신 ECMAScript 문법을 아직 지원하지 않는 모던 브라우저 때문에 필요한 것이다.

이런 측면에서 바벨은 최대한 모든 실행 환경에서 자바스크립트가 실행될 수 있도록 보장해주기 때문에 컴파일러라고 해도 손색이 없다.

ES6 코드를 ES5 코드로 변환해주는 일에서 리액트의 JSX문법, 타입스크립트, 코드 압축, Proposal 까지 처리해준다.

Webpack이란?

웹팩(Webpack)은 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 하는데, 현재 제일 많이 사용되는 번들링 도구이다.

프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통해 하나의 파일로 짠!하고 만들어 주는데, 빌드란 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 과정으로 컴파일, 배포 등의 과정이 있다.

webpack은 JavaScript Application의 모든 코드들을 잘 모아서 합쳐준다.

그리고, 브라우저가 쉽게 이해 할수 있는 형태로 바꾸어 준다. 그렇다면, babel과 하는 일이 비슷할 것 같은데?? 하지만 그 둘은 같지 않다. webpack은 일종의 build system 이라고도 할수 있다.

webpack은 JavaScript Application에 있는 여러 타입의 파일을 설정에 따라서 transpile 한다.

그 대상인 JSX, JavaScript를 transpile하기 위해 webpack은 babel을 사용한다.

또한, webpack은 sass로 작성된 파일도, css로 transpile 한다. (이때는 babel 대신 sass-loader를 사용)

바벨을 사용하려면 Node.js가 되어있어야 하고 터미널에서 웹팩 관련된 것들을 설치해준다.

npm install webpack webpack-cli path --save-dev

Webpack3까지는 Tree Shaking 이 잘 지원되지 않았었는데 v4부터는 개선이 되어 현재도 많이 사용 중입니다.

Tree Shaking이란?

Tree Shanking이란 번들링을 하다보면 실제로 사용하지 않는 함수들이나 모듈들까지 같이 팩킹(Packing)이 되는데, 팩킹 전에 사용하지 않는 함수와 모듈들을 떨쳐내어 최종 결과물을 컴팩트하게 만드는 것입니다. 마치 나무를 흔들어서 죽은 낙엽을 떨쳐내듯 하다고 하여 Tree Shaking(나무 흔들기)라고 합니다.

• 기타 번들링 도구
  • Webpack이 Tree Shaking이 잘 지원이 안되던 시절, Webpack의 단점들을 보완하고 Tree Shaking을 최적하하기 위하여 나온 도구입니다. Webpack 보다 점유율은 조금 떨어지지만 가볍고 빨라서 많이 사용되고 있습니다. 제일 최근에 나온 도구(블로그 2020.10.29.글임) 로써 Webpack, Rollup 등 장단점을 최대한 살려 결합한 형태입니다. 글 쓰는 시점이 아닌 기술 선택 시점에서 기존 레거시 프로젝트들과 호환성이 떨어지고 레퍼런스가 부족하여 선택하지 않았지만 현재 추세나 점유율이 많이 올라가고 있는 상황입니다.기타 번들러로써 grunt나 gulp등이 존재하나 점점 사장되어가는 분위기
  • 기타 : Parcel, Rollup

Polyfill 이란?

MDN 공식문서 : https://developer.mozilla.org/ko/docs/Glossary/Polyfill

• 우리는 웹개발을 하면서 polyfill 이란 용어를 들어봤을거다 무슨뜻일까?
• polyfill : 충전솜이라는 의미를 가지고 있다.
• 솜이 꺼졌을때 충전솜을 채워 메꾸는 역할을 한다. -> 무엇을 메꾸는가?
• 브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미한다.

왜 사용할까?

Polyfill은 IE와 같은 구형 브라우저에서 동작되지 않는 최신 기능을 동작할 수 있도록 도와주는 기술입니다.

Babel에 대해 아시는 분이 계시다면 Babel이 있는데 Polyfill을 왜 사용하지? 라는 생각이 드실겁니다.

Babel은 트랜스파일러로써 최신 ES버전에서 나온 여러 기능들을 구형 브라우저가 읽을 수 있는 문법으로 변경시켜주는 역할을 담당합니다. 하지만 여기서 문제는 이전에 없던 기능들이 새로나온 경우입니다. 대표적인 케이스가 ES6에서 등장한 Promise, Map, Set 등이 있습니다.

Polyfill은 구형 브라우저에서 사용되지 않았던 기술들에 대한 코드 정보들이 담겨있기 때문에 최신 기술들을 사용하더라도 구형 브라우저에서 동작할 수 있게 도와줍니다.

설명

변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)"이라 부릅니다. 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 합니다.

주목할 만한 폴리필 두 가지는 아래와 같습니다.

• core js – 다양한 폴리필을 제공합니다. 특정 기능의 폴리필만 사용하는 것도 가능합니다.
• polyfill.io – 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스입니다.

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

• create-react-app 설치 라이브러리
  1. react: 리액트를 사용하려면 당연히 리액트 라이브러리가 필요하지 않겠는가?
  2. react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔다. react와 DOM 사이에 연결해주는 역할을 한다.
  3. react-scripts: 리액트 프로젝트 초기 셋업을 하는 것은 힘든 일이다. 그걸 보다 쉽고 간편하게 해준다.
  4. babel-cli: 바벨을 터미널에서 사용하기 위해 필요하다. 바벨을 왜 쓰는지는 위에서 설명했다.
  5. babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있다. 딴거 말고 이거 깔면 알아서 해준다.
  6. babel-preset-react: 바벨을 리액트에서 사용하게 해준다. 우리는 리액트를 쓸거니까 이게 필요하다. 달리 말하면 바벨과 리액트는 별개 프로젝트다.
  7. webpack: 웹팩을 쓰기 위해 필요하다.
  8. babel-core: 웹팩용 바벨(?)이다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하는 용도다.
  9. babel-loader: 웹팩에서 바벨을 로드할 때 이 로더를 쓴다.
• 페이스북은 쉽게 리액트 프로젝트를 셋업하고 바로 개발에만 집중할 수 있도록 도구를 만들었는데 그게 npm install create-react-app (yarn 써도 됨)

참고한 글

https://iancoding.tistory.com/175

https://imch.dev/posts/babel-practice/

https://devlog.jwgo.kr/2018/12/03/webpack-babel-react/

https://hianna.tistory.com/665

https://tech.weperson.com/wedev/frontend/bundling-transpiler/

https://velog.io/@katanazero86/polyfill%ED%8F%B4%EB%A6%AC%ED%95%84-%EC%9D%B4%EB%9E%80