IE11 크로스브라우징_Polyfill의 적용과 SVG의 스타일링 이슈

국내 브라우저 점유율 ( 2021 -2 )

---

 

언제 이렇게 내려갔지? 이제 IE는 국내에서도 거의 바닥에 붙을 만큼 미미한 점유율을 보인다!
그러나 최근에 은행권에서 사용하는 어드민을 서비스하게 되었고, 사용자 대부분이 edge, IE11을 사용중이라 지원할 일이 생겼다.

 

Polyfill

---

ES문법은 브라우저마다 지원 범위가 다르다. 그 중 구형 브라우저인 IE11은 ES6 이상 최신 문법을 지원하지 않는다. 

Polyfill은 브라우저가 이해할 수 없는 코드를, 이해할 수 있게 코드 소스를 제공한다.

 

사실 선배가 폴리필 지원을 할 때, '트랜스파일러를 쓰는데 왜 별도의 폴리필이 필요할까?' 생각했다.
이유는, 트랜스파일러로 변환할 수 있는 경우와 없는 경우가 있기 때문이다.

 

Javascript에서는 코드 실행 이전에 Global Object라는 최상위 객체가 생성된다. 여기에는

• 표준 빌트인 객체(Object, String, Number, Array...)
• 호스트 객체(Web API...)
• var 키워드로 선언된 전역 변수(NaN, Infinity...)
• 전역 함수(parseInt, isNaN)

등이 포함되며, 이 전역 객체는 환경에 따라 window, self, this, frames, global, globalThis 등으로 불린다.

트랜스파일러는 최신 ES문법을 구형 브라우저가 읽을 수 있는 문법으로 변환해주지만, 기존의 전역 객체에 존재하지 않던 것이 새로 나온 경우는 변환하지 못한다.

우리는 Async/Await (Promise객체 반환), Array.prototype.includes (새로운 메서드) 등을 사용했기 때문에 별도로 폴리필 설정이 필요했던 것이다.

 

 

변환할 수 있는 경우

 

새로운 문법

• const, let
• spread operator
• arrow function
• class
• destructuring

 

변환할 수 없는 경우

 

ES5의 전역객체에 존재하지 않는 새로운 객체, 메서드, 함수

• 새로운 객체 : Promise, IntersectionObserver, Set, Map …
• 기존 객체의 새로운 메서드 : Array.prototype.includes, Object.entries …
• 새로운 함수 : fetch ...

 

React에서의 Polyfill

---

npm install react-app-polyfill

 

package.json

 

"browserslist": {
    "production": [
      "ie 11",
      ...
    ],
    "development": [
      "ie 11",
      ...
    ]
  }

 

src/index.tsx

 

import는 반드시 index 파일의 첫번째 줄에

 

import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'

 

node_modules/.cache

 

위에서 package.json의 development에 ie11을 추가해 주었는데, 이 변경 사항을 babel-loader가 바로 감지하지 못할 수 있다.
이 때 node_modules/.cache 파일을 삭제하고 터미널에서 다시

 

npm start

 

 

를 하면 해결할 수 있다.

 

CSS 지원

---

SVG가 보이지 않는 이슈

 

 

Can I Use 에는 IE11도 SVG는 지원한다고 써있었는데, SVG로 만든 파이차트가 IE11 브라우저에서 뜨지 않는 이슈가 있었다.

 

 

AS-IS

 

기존에는 스타일링된 component에 props로 값을 전달해 CSS를 주고 있었다. 

 

const MiniPie = () => {
  ...
  return (
    <$radiusGauge>
      <$svg width={size} height={size}>
        <$track
          width={center}
          height={center}
          radius={radius}
          strokeWidth={strokeWidth}
          strokeColor={trackCircleColor}
          fill={'transparent'}
        />
        <$indication
          width={center}
          height={center}
          radius={radius}
          ...
        />
      </$svg>
      <strong>{percentage}%</strong>
    </$radiusGauge>
  )
}
  
  
  const $track = styled.circle<{ ... strokeColor: string }>`
      ...
      stroke: ${(props) => props.strokeColor};
  `

  ...

 

 emotion에서 부여한 className 안에 스타일 요소들이 들어가 있다. IE11에서는 이 방식으로 SVG에 스타일링을 할 경우 반영되지 않는 것 같다.

 

 

 

TO-BE

 

그래서 직접 SVG의 attribute를 설정하는 방식으로 변경했다.

 

  return (
    <$radiusGauge>
      <$svg width={size + 'px'} height={size + 'px'}>
        <$track
          cx={center + 'px'}
          cy={center + 'px'}
          r={radius > 0 ? radius + 'px' : 0}
          ...
        />
        <$indication
          cx={center + 'px'}
          cy={center + 'px'}
          r={radius > 0 ? radius + 'px' : 0}
          strokeDasharray={arcLength + 'px'}
          strokeDashoffset={arcOffset + 'px'}
          strokeWidth={strokeWidth + 'px'}
          stroke={color}
          ...
        />
      </$svg>
      <strong>{percentage}%</strong>
    </$radiusGauge>
  )

 

이번에는 circle 요소의 style attribute에 직접 적용되었고, SVG가 화면에 잘 나왔다.

 

 

 

 

 

 

참고

---

https://www.npmjs.com/package/react-app-polyfill

react-app-polyfill

https://create-react-app.dev/docs/supported-browsers-features

Supported Browsers and Features | Create React App

https://happysisyphe.tistory.com/m/49

컴파일과 폴리필의 차이점 분석 (babel, polyfill)