[web] webpack, babel, polyfill, react에 대하여

Webpack

webpack은 frontend프레임워크에서 가장 많이 사용되는 Module Bundler이다.

webpack은 모듈(js모듈, 이미지 폰트 등 전부)의 의존성을 분석하여 하나로 묶어, 병합 및 압축해준다.

여러라이브러리를 하나로 만들어준다고 생각하면 된다.

 

Babel

Babel은 코드 변환기이다. javascript는 계속 발전한다. 추가될 기능에 대한 "제안"(proposal)이 정기적으로 등록되고, 가치가 있다고 판단되면 https://tc39.github.io/ecma262/에 추가된다. 그리고 궁극적으로 ECMA명세서(specification)에 추가되는 것이다. 하지만, 엔진(브라우저)이 항상 표준 전체를 지원하지는 않는다.(대표적으로 IE...) 바벨은 transpiler로 이러한 최신 코드를 구 표준에 맞도록 변환해준다.

 

Polyfill

어떤 경우에는 명세서의 새로운 정의에 대한 함수를 직접 구현해야 할 수도 있다. 이렇게 스크립트가 최신 표준을 준수할 수 있게 기존 함수를 수정하거나, 새로 구현한 함수를 폴리필(polyfill)이라고 부른다. 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할이다. core js, polyfill.io 등이 있다.

 

모던 자바스크립트를 이용하려면 이러한 기능들은 필수이다.

 

React

React는 페이스북에서 만든 프론트엔드 개발 라이브러리이다. 컴포넌트 단위로 개발한다는 특징이 있다. 이 리액트를 개발할 때 웹팩과 바벨없이도 가능하지만, 권장하지 않는다. 하지만, 이걸 처음부터 매번 설정하는 일은 너무 복잡한 일이다. 그래서 페이스북은 쉽게 React project를 세팅할 수 있는 도구인 create-react-app을 만들었다.

 

 

 

 

 

 

 

 

참고

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

https://ko.javascript.info/polyfills