국내 브라우저 점유율 ( 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
https://create-react-app.dev/docs/supported-browsers-features
'WEB' 카테고리의 다른 글
Token의 구조부터 Access, Refresh Token까지의 간략한 정리 (0) | 2023.01.13 |
---|---|
Next SEO (0) | 2023.01.12 |
검색창에 https://www.google.com 입력 후 일어나는 일 (URL, DNS 중심) (1) | 2022.12.25 |
[WEB] REST API (0) | 2020.08.20 |
[WEB] Cookie와 Session으로 HTTP의 비연결성, 비상태성 보완하기 (0) | 2020.08.19 |
댓글