크로스 브라우징 (IE, Babel)

---

🌐 크로스 브라우징이란?

크로스 브라우징은 웹사이트의 브라우저 호환성을 최적화 하는 것이다.

크롬, 인터넷 익스플로러, 엣지, 파이어폭스, 사파리 등등… 브라우저는 널리고 널렸다. 근데, 우리가 만든 웹사이트가 모든 브라우저 상에서 동일하게 기능하고 보여질까?

그랬다면 정~말 좋겠지만 아쉽게도 아니다. 각 브라우저들은 저마다 사용하는 렌더링 엔진이 다르다. 구글(크롬)의 경우 블링크(Blink)라는 렌더링 엔진을 사용하고, IE는 트라이던트라는 엔진을 사용한다고 한다. 이렇듯, 모든 브라우저가 우리의 웹사이트와 코드를 동일하게 이해하고 처리하지 않는다는 점을 이해해야 한다.

그럼 모든 브라우저에 대한 호환성을 고려해야 할까?

물론 그건 아니다, 향후에 기술이 비약적으로 발전하여 그러한 세상이 올 수도 있겠지만, 현재로썬 가장 사용률이 높은 브라우저들을 추려낸 뒤, 이에 대응하는 것이 효율적인 방법이라고 할 수 있다.

Browser Market Share Worldwide | Statcounter Global Stats

우선 statcounter의 데이터로 봤을 때, 세계에서 가장 점유율이 높은 브라우저는 감사하게도 구글 크롬이다. 그리고 2위는 사파리, 그 이외에는 거의 유의미한 차이가 드러나지 않는 수준으로 Firefox, Edge, 삼성 인터넷 등의 순이다. 이렇게만 봤을 때는 “어? 크롬에 집중하되, 사파리랑 파이어폭스, 엣지 정도만 호환성에 신경써주면 되겠는데?” 할 수도 있다. 하지만…

전세계 브라우저 사용 점유율 (출처 : statcounter)

우리 대한민국은 IT 강국일 뿐만 아니라, IE 강국이기도 한 것 같다…

대한민국 브라우저 사용 점유율 (출처 : statcounter)

IE가 거의 25% ~ 30%대를 점유하고 있는 모습이다. 이 때문에 대한민국의 개발자들은 IE와의 씨름을 해왔어야 했다.

심지어 IE는 버전도 너무 다양하다. IE8, 9, 10, 11… 다른 브라우저들 처럼 자체적으로 업데이트가 되는 것이 아니라, 사용자가 직접 필요하면 업데이트를 진행하는 방식을 취하고 있다.

이를 조금 더 비극적으로 설명하면, 어디선가는 아직도 IE8, 그리고 IE9를 사용하고 있는 유저들이 있을 수 있다는 것이다 🤦‍♂️

Goodbye IE!

정말 말 그대로 ‘Good’ ‘Bye’다.

IE(인터넷 익스플로러)는 2022년 6월 15일에 서비스가 전면 종료된다. 이후 Microsoft Edge가 윈도우의 브라우저를 공식적으로 대체한다. 근데 뭐 마이크로소프트가 개발자들의 편의를 생각한 것은 아니고, 주요인은 IE의 보안 취약성 때문이라고 한다.

한국인터넷진흥원에 의하면, 2020년 하반기 우리나라에서 사이버 공격에 쓰인 소프트웨어 취약점 중 인터넷 익스플로러의 취약점이 100%를 차지했다고 하니… 정말 이제는 IE를 역사 속으로 묻어줘야 할 때가 오지 않았나 싶다.

물론, 재야에는 윈도우 XP를 사용하고 있는 사용자들이 존재할 수도 있다. 하지만 아래의 통계자료를 확인해보자. (XP는 IE8까지만 지원된다)

이 **0.12%**를 위해서 우리가 개발 단계에서 골머리를 앓아야 하는걸까…? 시대는 변하고 기술은 그보다 더 빨리 격변한다..!

따라서 이제는 크롬, 사파리, 파이어폭스, 엣지에 대응하여 개발을 하는 것이 크로스 브라우징의 기본이자 정석이 되지 않을까 싶다.

---

🏋️ Babel이란?

트랜스파일러? (Transpiler)

compiler는 우리가 작성한 코드를 바이트 코드로 변환한다.
그리고 transpiler는 코드를 같은 레벨의 다른 언어로 변환한다.

즉, 바벨은 자바스크립트 코드를 자바스크립트 코드로 변환해주는 트랜스파일러다. “엥? JS → JS라고?” 할 수도 있는데, 물론 똑같은 것을 똑같이 변환해준다는 것이 아니라, ES6 문법으로 쓰인 JS코드를 ES5로 변환해주는 것이다.

그럼 ES5와 ES6는 무엇일까?

ES5와 ES6

ES5와 ES6는 ECMAScript5, 6를 의미한다.

ECMAScript는 ECMA라는 기관에서 만들어낸 script 언어로, 하나의 언어이자 표준이다. 이는 ECMA-262라는 표준을 따르고 있다고 한다. 특히, 2015년 6월부터 매 년 꾸준히 버전을 업그레이드 하고 있는데, 이 2015년에 배포된 버전이 ES6다.

근데 위의 표를 보면… ES12까지 출시가 됐는데 왜 우리는 ES6를 여전히 최신 기술로 여기며 이를 공부하고 있는 것일까?

이는 ES5에서 ES6로의 업데이트에는 큰 변화가 있었고, 이미 ES6에서 이전에 존재했던 많은 문제점들과 가독성, 그리고 효율성 등의 개선이 이루어졌기 때문이다. 그럼에도 우리는 코딩을 하여 ES6 이상의 기능들을 사용하고 있기도 하다.

async await, 제곱연산자(**), String.padStart 등등 ES6를 기반으로 새로운 기능들을 추가해 사용하고 있는 것이다. 따라서 이제는 ES6가 추후 출시된 버전들의 기반이 되는 것이라고 볼 수 있기에 ES6를 공부하는 것이 우리에겐 중요하다.

그럼 이제 Babel을 설치하는 법과, 기본 활용법에 대해서 알아보도록 하자.

설치 및 기본 템플릿

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/polyfill

설치가 완료됐다면? → 루트 디렉토리에 .babelrc 파일을 생성하고, 아래와 같이 코드를 붙여 넣는다.

{
  "presets": [
    [
      "@babel/preset-env"
      {
        "targets": {
          "edge": "17", // 엣지 17버전 까지 커버를 할 수 있도록 트랜스파일링 할 것이란 뜻
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
					"ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

CLI를 통한 트랜스파일링 실행

./node_modules/.bin/babel [변환 대상 폴더 또는 파일] --out-dir [변환 결과를 담을 폴더]

## npx가 설치되어 있다면 이렇게 간단한 형태로도 트랜스파일이 가능하다.
$ npx babel [타겟 폴더 또는 파일] --out [결과를 담을 폴더]

이를 터미널에서 입력해 주면, 변환할 폴더의 JS파일들이 트랜스파일 되어 설정한 디렉토리에 저장된다.

또는 npm build를 커스텀해도 된다. 이하와 같이 하면, npm run build만으로도 바벨 커맨드를 실행할 수 있다.

// package.json

{
  "scripts": {
    "build": "babel src -d dist"
  }
}

Polyfill

“충전 솜” 이라는 뜻이다.

물론 Babel에서 ES6 → ES5로 트랜스파일링 할 때, 거의 대부분을 대응해주기는 하지만, 아예 없던 기능이 새로 추가된 경우 등에는 추가적인 대응이 필요하다.

따라서 Babel만을 사용해서 완전한 트랜스파일링을 기대하는 것은 힘들고, 폴리필(Pollyfill)을 통해 arrow Function이라던지, Set이라던지, 이러한 새로운 기능들이 트랜스파일링 될 수 있도록 해야 한다.

하지만 Babel 7.40 버전부터 babel 자체에서 지원하던 babel/polyfill이 지원종료 되었기 때문에 다른 대안을 활용해야 한다.

이 때 사용하는 것이 core-js다.

core-js 설치

$ npm install core-js@3

// .babelrc
presets: [
	[
      '@babel/preset-env',
    {
      useBuiltIns: 'usage', // 필요한 폴리필만 추가
      corejs: 3,
    },
  ],
],

또는, @babel/plugin-transform-runtime 을 사용할 수도 있다.

$ npm i --save-dev @babel/plugin-transform-runtime @babel/runtime-corejs3

// webpack.config.js
options: {
    presets: ['@babel/preset-env'],
    plugins: [
      [
        '@babel/plugin-transform-runtime',
        {
          corejs: 3,
          proposals: true,
        },
       ],
    ],
  },

---

🎨 CSS 크로스 브라우징

CSS작업을 할 때 IE 크로스브라우징 대응을 하며 정말 경악을 금치 못했다…
설마…? 하고 Can I Use에 들어가 검색을 해보면 IE에서 지원하지 않는 것들이 너무나도 많았다.

따라서 프로젝트 진행 중, 크롬에서는 헤더 하단에 box-shadow가 보여지게 하고, IE에서는 그에 대한 대안으로 border를 주기로 결정했었다.

근데 문제는 chrome에서는 border가 보여지지 않고, box-shadow만 적용되게 하고 싶었다.

CSS Hack

이 때 필요한 것이 CSS Hack이다. 아래의 코드를 스타일 뒤에 붙여주면 된다.

IE 8, IE9, IE8+9 hack

\0/IE8 : IE8 에서 적용

\0/IE9 : IE9에서 적용

\0/IE8+9 : IE8과 IE9 모두 적용

.gnbNav.scrolled {
  box-shadow: 0px 1px 3px 0px rgba(255, 202, 67, 0.7);
  border-bottom: 1px solid $mainColor \0 / IE8 + 9;
  border-bottom: none;
}

/* IE10 이상에만 적용하고 싶을 때 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* CSS를 여기부터 작성 */
}

/* 또는 */
@media all and (-ms-high-contrast: none) {
  /* CSS를 여기부터 작성 */
}

IE8 이하에선 시멘틱 태그가 사용 불가능 하다.

굉장히 충격적이었다…

이 때문에 모든 시맨틱 태그들을 div태그 또는 ul태그로 변환하는 작업을 했다…

정말 이번 프로젝트를 하며, 선배 개발자 분들에게 경의를 표하고 싶었다. IE가 미워졌다…

---

🏀 결론 및 요약

1. 내가 만든 웹사이트는 모든 브라우저에서 동일하게 보여지고 기능하지 않기에 크로스 브라우징을 해야 한다.
2. IE는 버전별로 자동 업데이트가 되지 않기에, 버전별 대응을 해줘야 한다.
3. 하지만, IE는 2022년 6월 15일에 서비스가 전면 종료된다.
4. Babel을 통해 ES6로 작성한 코드를 ES5로 트랜스파일 할 수 있다.
5. CSS 또한 크로스 브라우징에서 꼼꼼하게 검토되어야 한다. (Can I Use 사용)

---

포스팅에 참조한 자료

Babel · The compiler for next generation JavaScript

지금 바로 시작하는 ES6 : NHN Cloud Meetup

Can I use… Support tables for HTML5, CSS3, etc

---