WEB 크로스 브라우징과 바벨, 그리고 폴리필 개념 요약 정리
목차 펼치기
크로스 브라우징 (Cross Browsing)
크로스 브라우징 (Cross Browsing)
브라우저 별 렌더링 엔진이 다르고 일부 사용자마다 브라우저 버전이 다르기 때문에 모든 사용자 환경에서 동일한 UI와 동일한 기능을 온전히 보장할 수 없다. 이 때
브라우저간 상호 호환성을 보장하는 웹사이트를 제작하는 기법을 크로스 브라우징이라고 하며, W3C 웹표준을 따르는 것을 기본으로 한다.
단, 중요한 점은 모든 화면과 기능이 동일하게 보여지는 동일성을 보장하는 것보다 사용자가 정보 소외감을 느끼지 않도록 동등한 수준의 정보와 기능을 제공하는 동등성이 우선이라는 점이다. 브라우저 별 렌더링 엔진이 다르다는 것에서 오는 한계를 극복하기에는 현실적으로 불가능하기 때문이다.
일부 브라우저 환경에서 기능이 정상적으로 동작하지 않거나, 크로스 브라우징을 지원하기 위해 기능을 축소하거나, 추가 코드를 개발하는 등의 이슈를 크로스 브라우징 이슈라고 한다. 이를 해결하여 크로스 브라우징을 지원하기 위해 트랜스파일링이 필요해지게 되었고 대표적으로 등장한 것이 트랜스파일러 ‘바벨(Babel)’이다.
바벨 (Babel)
바벨 (Babel)
엔진과 버전이 다른 여러 브라우저 환경에서 ES6+ JavaScript, TypeScript, JSX 등의 언어들에 대한 호환성을 보장해주기 위해 코드를 변환해주는 트랜스파일러다. 크로스 브라우징 이슈를 해결할 수 있다.
ES6 문법이 표준으로 채택되기 전인 2014년에 릴리즈 되었고, 이후 2015년에 ES6 문법이 표준으로 승인되었다.
문법 변환
폴리필 (Polyfill)
core-js와 같은 3-party 라이브러리를 이용한다.
소스 코드 변환
파싱 (Parsing)
코드를 읽고 추상 구문 트리(AST)로 변환
변환 (Transforming)
바벨 플러그인(Babel Plugin)을 통해 추상 구문 트리를 변경
출력 (Printing)
변경된 결과물 출력
파싱과 출력 단계는 바벨이 진행하지만, 변환 단계는 바벨 플러그인이 실제로 진행한다.
바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타내고 있으며, 이 플러그인들의 집합을
프리셋(Preset)이라고 한다.
폴리필(Polyfill)
폴리필(Polyfill)
하위 버전의 브라우저에서 변경된 표준을 지원할 수 있도록 기존 함수의 동작 방식을 수정하거나 새롭게 구현한 코드를 폴리필이라고 한다. 대표적인 라이브러리는
core-js,
Polyfill.io가 있다.