ES6의 호환성 해결방법은?

브라우저 별로 구동원리 또는 JS엔진 등의 차이가 있기 때문에 브라우저 호환성 이슈가 발생하는데, 이러한 차이를 최소화해 런타임 환경에 맞게 최적화 하는 작업을 크로스 브라우징이라고 하는데, Javascript의 호환성에 따른 충돌이나 부작용을 줄이기 위한 방법으로는 Babel이라는 도구를 사용하면 됩니다. 바벨은 주로 ES5 이상 버전의 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 사용되는 도구로, IE나 다른 브라우저에서 동일한 기능을 제공하고 side-effect를 최소한으로 줄일수 있습니다.

 

그렇다면 바벨에서 코드를 변환하기 위한 규칙은 어떻게 설정하나

바벨을 사용한다고 코드를 변환할 수 있다고 할수는 없으며 변환하기 위한 규칙이나 브라우저 버전을 설정해야 하는데 이 작업은 바벨 플러그인 이 담당합니다. 바벨 플러그인 이란, 바벨이 변환할 코드에 대한 규칙으로 custom으로 Javascript의 기능에 따라 각각 설정하기에는 까다롭고 매우 많기 때문에, preset 이라는 플러그인을 사용해 손쉽게 변환규칙을 설정해줄 수 있습니다. preset 이란 필요한 플러그인들을 목적에 따라 세트로 묶여 있는 플러그인으로 대표적인 프리셋 플러그인으로 preset-env 이 있으며 프로젝트가 지원하고자 하는 환경에 기반해 빌드 타임에 동적으로 결정하는 프리셋으로 ES6 이상의 코드를 변환합니다.

 

크로스 브라우징 이슈를 해결하기 위해 플러그인을 설정해 호환가능한 버전으로 변환하지만 빌트인 메서드나 JS 기능이 없는 경우에는 어떻게 해결할 수 있는가?

빌드 과정에서 Babel을 통해 트랜스파일링 과정을 거쳤더라도 Promise와 같은 빌트인 또는 Array.prototype.includes 등의 인스턴스 메소드가 코드에 남아있을 수 있다. 해당 빌트인 또는 메서드를 지원하지 않는 환경에서는 에러를 유발하거나 어플리케이션이 멈추는 이슈가 발생하는데, 이를 해결하기 위한 기술이 폴리필 (Polyfill) 입니다. Babel 설정에서 폴리필을 설정하면, 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인 메서드 등을 추가해줍니다.

폴리필 전체를 빌드에 포함하면 번들 사이즈가 너무 커질수 있기 때문에, preset-env 의 useBuiltIns 옵션을 사용하면 빌드 타임에 babel-polyfill import를 꼭 필요한 폴리필 import로 대체해 번들의 사이즈를 줄일 수 있습니다.

 

결론

• create react-app 이 얼마나 우리의 삶을 간편하게 하는지 알아볼수 있었다...!

출처: https://joontae-kim.github.io/