[frontend] Cross Browser Testing

eunji hwang·2020년 3월 30일
0

Cross Browser Testing

크로스 브라우저 테스팅은 어떤 브라우저(종류 or 버전), 디바이스에서도 같은 결과물이 나오도록 확인하고 코드수정하는 것을 말한다. 다양한 브라우저 브라우저 인터넷익스플로러(IE), 크롬(chrome), 사파리(Safari), 네이버 웨일, 오페라, 모바일(카톡웹뷰, 네이버 웹뷰등등)에서도 확인한다.
대부분 크로스브라우징 테스트는 프로젝트 막바지에 작업하게 되는데 이미 알고있는 문제될 부분이라면 미리 작업(특히 CSS)하기도 한다.


1. macOS 작업물 IE에서 보기

macOS에서 작업한 뒤 IE에서 확인하려 한다면, 작업한 것을 모두 WINDOW로 옴겨야 하는데 할일이 많고 귀찮을 수 있다..! 그럴땐 macOS에서 서버를 열고 mac ip로 접속하는 방법으로 IE에서 확인 할 수 있다.

1)ifconfig

먼저 Mac의 IP주소를 확인하기 위해 터미널에 아래 명령어를 입력한다.
$ ifconfig
위 명령어를 입력하면 주르륵 설정들이 나오는데 여기서 macOS의 ip주소를 확인한다.

2) Window에서 보기

윈도우로 IE를 열고 IP:포트로 접속한다. (e.g. http://111.222.33.444:3000)

3) 개발자도구 확인

IE로 접속한 상태에서 개발자 도구를 확인하게 되면 구문오류등 문제되는 것을 콘솔로그를 통해 확인 할 수 있다.


2. CSS 수정하기

css는 손으로 한땀 한땀 수정해야 한다.. 정말이지~이녀석! css는 작성하면서 어떻게 지원하는지 체크해 두고 쓰면서 바로바로 적용하는 것이 ..맴이 편할듯 하다.

auto prefixer

Post CSS autoprefixer 깃헙페이지 바로가기
css 자동 수정해주는 라이브러리

  • 장점 : 편하게 수정할 수 있다는 것
  • 단점 : 필요 없는 부분까지 모조리 바꿔버려서 코드가 지저분~

can i use

이고잉 형님이 매 강의마다 알려주던 can i use 사이트에서 html, css, js의 태그, 프로퍼티, 새로운 문법을 검색하여 어느 버전의 브라우저에서 지원하는지에 대한 정보를 얻을 수 있다.


3. JS 수정하기

1) Polyfills

신 기술이나 문법을 이전 코드를 사용해서 동일변수 할당하여 새로운 문법이 재현되도록 코드를 작성하는 것?! 나는 react로 프로젝트를 진행 했기 때문에 리액트관련 polyfills를 기준으로 작성하겠다~

참고 사이트
create-react-app.dev
Polyfills npm install github

2) 설치

npm i react-app-polyfill 명령어를 통해 설치한다.

3) IE 버전 확인

내가 진행하는 프로젝트에서 지원할 최하 ie버전을 정하자. 만약 ie9를 지원한다면 ie9에 해당하는 설정을 해주면 ie10, ie11은 자동 지원된다. 만약 설정을 ie11 버전으로 한다면 ie9와 ie10은 지원되지 않는 것이 있을 수 있다.

ie9 버전 폴리필

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

// ...

ie11 버전 폴리필

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

// ...

기타 폴리필

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

// ...

ie + 기타 폴리필

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

// ...

ie를 폴리필 해야 할 때는 ie에 대한 코드 1줄이 필요하고 그밖에 폴리필에 대해서는 공통 1줄이 필요하다.

4) 캐쉬지우기

위 과정 까지 진행했다면 node_modules에 있는 .cache를 지우자
$ -rf node_modules/.cache 명령어를 통해 지워도 되며 IDE에서 바로 지워도 되고 프로젝트폴더로 이동해서 지워도 된다. 편한방법으로 지우자.

5) package.json 내용추가

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

6) 서버 다시 열고 확인하기


참고 : Create React App IE11 : SCRIPT1002: Syntax Error How to get rid of it.

profile
TIL 기록 블로그 :: 문제가 있는 글엔 댓글 부탁드려요!

0개의 댓글