Pollyfill이란? Babel이란?

21.11.22 내용 수정 && 프로젝트 내용 추가 

 

Polyfill?

웹 접근성과 Web Vitals에 대한 공부를 하다가 이해가 안 가는 개념이 있었다. First Input Delay(FID)라는 최초 입력 지연의 최적화를 공부하면서 Total Blocking Time(TBT)의 시간을 줄여야 FID도 줄일 수 있는데, 그 최적화 방법 중에서 사용하지 않는 polyfills를 줄여야 한다는 말이 있었다. 전혀 감이 오지 않아서 pollyfill에 대한 검색을 해봤다.

아래는 pollyfill.io의 공식 레퍼런스이다. 해당 사이트에선 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스 사이트이다. 아래 글은 해당 사이트에서 Pollyfill에 대해서 말해주고 있다.

세계적으로 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다릅니다. 이것은 브라우저용 개발을 어려운 작업으로 만들 수 있습니다. 인기 있는 브라우저의 최신 버전은 이전 브라우저에서 할 수 없는 많은 작업을 수행할 수 있지만 여전히 이전 브라우저를 지원해야 할 수도 있습니다. Polyfill.io를 사용하면 누락된 기능을 polyfill로 다시 생성하여 다양한 브라우저를 더 쉽게 지원할 수 있습니다. 지원하는 브라우저와 지원하지 않는 브라우저에서 최신 기능을 사용할 수 있습니다.

 

즉, 정리하자면 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있게 작업할 수 있다. 이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(polyfill)"이라 부른다. 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 한다.

 

그렇다면 Polyfill이 왜 필요한가?

브라우저마다 지원할 수 있는 기능이 다르기 때문이다. 자바스크립트의 역사를 읽어보면 왜 이런 이슈들이 발생하는지 이해할 수 있다. 즉, 크롬에서는 동작하는 기능들이 인터넷 익스플로러에서는 동작하지 않는 현상이 있다.

이를 크로스 브라우징이라고 한다.

한 가지 예로 object-fit이라는 CSS 속성은 크롬과 파이어폭스 같은 최신 버전의 엔진에서는 정상적으로 적용이 된다. 하지만 IE에서는 적용이 되지 않는다. can i use 사이트를 확인해보면, 내가 사용할 기능들을 브라우저 별로 지원 여부를 알려준다. 굉장히 고마운 사이트...

can i use

 

 

내가 팀 프로젝트를 진행하면서 겪은 문제는 다음과 같다. 왼쪽 화면은 크롬에서의 실행 화면인데, 화면에 꽉 찬 비디오가 재생이 되고 있다. 반면에 오른쪽 IE 환경에서는 왼쪽과 오른쪽에 검정 여백이 생긴 것이 보인다. 이는 IE에서는 object-fit 속성을 지원하지 않기 때문이다. 

project

 

하지만 지원을 하지 않는다는 것을 알아도 내가 진행하고 있는 프로젝트에서 object-fit과 비슷한 기능을 어떻게 구현할지 굉장히 어려웠다. 여러 Reference를 참고해도 내 프로젝트 상황과는 달랐기에 적용하기가 쉽지 않았다. 이럴 때 polyfill을 사용해서 간단하게 해결할 수 있었다. 기존의 IE 문법으로 object-fit이란 문법을 구현한 것이다. 

이 github에서 내가 필요한 object-fit의 pollyfill을 제공하고 있었다. 아래 그림처럼 내가 사용할 태그에 맞게 상황에 따른 버전을 선택해서 Usage에 설명된 대로 해주면 된다. 다만 처음 pollyfill을 사용해 본 경험상 내 프로젝트에 적용하는 것도 생각보다 쉽지는 않았다. 모듈을 설치했는데도 적용이 되지 않아 한참 헤맸다. 해당 모듈을 import를 제대로 못한 문제였는데, 간단한 문제였지만 처음 접하다보니 어려웠다.

처음에는 폴리필 사용을 고민했다. 익숙하지 않기도 했고, 프로젝트에서 Object-fit 속성이 한 번밖에 사용되지  않았기 때문에. Pollyfill을 사용하는 것은 성능 관점에서 비효율적인 것 아닌가 생각했다. 하지만 프로젝트 사이트 특성상 이미지를 많이 사용하기에 추후에 사이트의 확장성과 재사용성 관점에서 Object-fit-pollyfill을 사용해도 괜찮다고 생각해서 사용했다.

 

Babel이란?

pollyfill을 공부하면서 바벨이라는 개념과 굉장히 많이 헷갈렸다. 바벨이란 다음과 같다.

Babel은 트랜스파일러이다. ES6에서 쓰이는 최신 문법을 쓸 수 없기 때문에 ES5로 문법을 바꿔주는 역할을 한다. 하지만 Pollyfill은 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나 새롭게 구현을 해서 누락된 새로운 기능을 메꿔주는 역할을 한다.

하지만 ES6에서 새롭게 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우엔 에러가 발생하기 때문에 이 경우엔 Pollyfill이 사용된다. (예제를 보고 싶다면 reference에 pollyfill 예제라 메모한 사이트들을 참고해 보길 바란다.)

내 프로젝트의 경우에서는 다음과 같은 화살표 함수가 사용됐다. 이는 ES6 문법인데 IE에서는 지원을 하지 않는다. 따라서 ES6 문법을 ES5로 변환해주어 동작하게 만들어 준다. 이를 Babel이 담당한다.

// ES6
const removeClassName = () => {
  btn.classList.remove('is-active');
  list.classList.remove('is-active');
  title.classList.remove('is-active');
};

// ES5

var removeClassName = function () {
  btn.classList.remove('is-active');
  list.classList.remove('is-active');
  title.classList.remove('is-active');
};

 

정리

정리한 내용들이 막상 프로젝트를 진행하면서는 생각이 잘 나지 않았다. 구현에만 힘을 쓰다보니 생각을 잘 못했던 것 같다. 굉장히 안좋은 버릇이고, 더 좋은 방법들을 생각해보는 연습을 하려고 노력하고 있다. 또한 Pollyfill을 공부하면서 Babel과 헷갈렸는데, 결국은 Babel과 Pollyfill과는 하는 역할이 다르지만 웹의 호환성을 관점에서 바라보면 큰 차이가 없는 기능들이라는 것이다. 

크로스 브라우징을 해결해보는 경험은 이전에 없었는데 한번 쯤은 꼭 필요한 것 같다. 크로스브라우징을 해결하면서 polyfill과 babel에 대해서 알게 됐고, IE가 왜 문제가 많은지 알 수 있었다. IE를 왜 아직도 사용하고 있는지는 아직도 모르겠지만, 생각보다 IE를 쓰는 곳은 많았다. ** 증권의 입사지원 페이지가 IE에서만 접속이 되던 기억이 있다.. 웹 팩이라는 개념도 정리하면서 Postcss와 Package.json에 대한 개념들도 정리해볼 계획이다.

 

 

혹시 틀리거나 잘못된 내용이 있다면 댓글로 알려주세요. 감사합니다. :)

 

📕 Reference:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

https://polyfill.io/v3/

https://ko.javascript.info/polyfills

https://okchangwon.tistory.com/3

https://velog.io/@kwonh/Babel-%ED%8F%B4%EB%A6%AC%ED%95%84polyfill-babelpreset-env (pollyfill 예제)

https://iancoding.tistory.com/175 (pollyfill 예제)