송민준의 개발노트

바벨과 폴리필 본문

웹/환경설정(setting)

바벨과 폴리필

송민준 2023. 2. 5. 20:54

바벨이란?

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

 

똑똑하게 브라우저 Polyfill 관리하기

현대적인 JavaScript를 쓰면서도 넓은 범위의 기기를 지원하기 위한 Polyfill을 어떻게 똑똑하게 설정할 수 있는지 소개합니다.

toss.tech

https://developer.mozilla.org/ko/

 

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

 

'웹 > 환경설정(setting)' 카테고리의 다른 글

Github으로 간단한 멀티모듈 구성하기(nexus 대신에...)  (0) 2023.04.08
spring - vue 통합개발환경 셋팅  (2) 2021.04.24
Git 커밋 작성자 수정  (0) 2021.02.23
intellij 정적리소스 바로 반영되게 하는 방법(eclipse - without publishing)  (0) 2020.11.28
Spring 에러(lambda expressions are not supported in -source 1.6)  (0) 2020.02.04
'웹/환경설정(setting)' Related Articles more