바벨과 폴리필
바벨이란?
Babel은 개발자가 최신 버전의 JavaScript를 사용하여 코드를 작성할 수 있도록 하는 JavaScript 컴파일러이며 해당 코드를 이전 브라우저와 호환되는 버전으로 컴파일합니다. 최신 JavaScript를 작성하고 모든 곳에서 실행할 수 있도록 도와줍니다.
-> 바벨로 es6+ 스크립트들을 es5 스크립트로 트랜스파일링 함. 배포 전에 트랜스파일링도 가능하고 <script>태그에 babel을 적용해서 브라우저에서 트랜스파일링도 가능함.
* webpack 기반 프로젝트면 깔끔하게 처리가 가능한데 레거시 프론트면 별도 처리가 필요(ex. jsp)
* 프로덕션에서는 성능상 배포 전에 작업하는게 좋음.
폴리필이란?
폴리필은 최신 코드를 실행할 수 있도록 대상 환경(예: 이전 브라우저)에서 누락된 필요한 기술을 제공하는 코드 조각입니다. 누락된 기능을 채워서 이전 브라우저에서 최신 기능을 사용할 수 있도록 합니다. 본질적으로 polyfill은 이전 브라우저에서 실행되는 방식으로 최신 JavaScript API를 구현하는 도구입니다.
-> es6+ 에서 추가된 객체나 함수를 지원 안되는 브라우저에서 사용이 가능하게 구현됨.
* 구식 브라우저를 지원하기 위해서는 좀 더 많은 스크립트들이 추가되면서 초기 속도가 느려짐.
* user-agent에 따른 동적인 polyfill 추가가 가능함.(https://polyfill.io/v3/)
* IE11 지원종료에 따라 대부분의 PC 브라우저에서는 es6 까지는 무난하게 사용 가능한 것 같다. 다만 정말 과거의 구형 휴대폰에서 구버전 브라우저, 웹뷰를 사용하면 지원이 안되는 케이스가 있다.
** 바벨과 폴리필이 적용이 안된다면 상용에서는 es6 정도가 간당간당하고 그 이상의 경우는 안쓰는게 좋겠다.
참고
https://toss.tech/article/smart-polyfills
https://developer.mozilla.org/ko/