크로스 브라우저 테스팅(Cross Browser Testing)

크로스 브라우저 테스팅(Cross Browser Testing)이란?

• 웹 사이트(또는 웹앱)가 어느 버전의 브라우저에서나, 어느 디바이스에서도 원하는 결과물이 나오도록 확인하고 수정하는 단계를 말한다.

• 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 한다.

• 대부분의 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제 되는 경우가 적지만 IE(마이크로소프트 인터넷 익스플로어) 브라우저는 여러 의미에서 표준화하기 쉽지 않은 브라우저임으로 IE에서도 동작하게 하는 것을 크로스 브라우징이라고 부름.

Can I use https://caniuse.com/

CSS 프로퍼티와 자바스크립트가 브라우저의 어느버전까지 지원하는지 확인할 수 있다.

• Tip) 이미지 깨지는 것을 방지 하기위해 가로값과 세로값을 둘다 주지 않기. 이미지는 백그라운드로 주는 것이 좋다.

IE 브라우저 띄우기

1. 터미널에서 ifconfig 입력 후 IP주소를 확인한다.
2. IE를 열고 주소창에 IP주소를 입력해주는데, 이 때 IP 주소 뒤에 사용하는 포트 번호를 입력해준다.

Polyfill 설치하기

폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 한다.
IE에서 사용할 수 없는 fetch, async/await 같은 코드를 사용가능하도록 변환하는 과정.

• 바벨과 다른점? 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 이런애들은 존재하지 않으니 번역을 해줄수가 없다.

$ npm install react-app-polyfill --save

$ npm run start

설치를 완료하고 프로젝트 파일을 열어 다음 코드를 추가해준다.

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

코드를 추가했으면 저장한다음 캐쉬를 지워준다.

$ rm -rf node_modules/.cache/

캐쉬를 지워준 다음, package.json에 다음 내용을 추가해준다.

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

그리고 다시 npm run start로 IE에 띄워지는 지 확인! 그 다음 세부적인 수정을 하도록한다.