크로스 브라우징 해결법.

면접 질문에서 제대로 대답을 못해 많이 아쉬웠던 질문이었습니다.

 

해당 답변을 짧게 정리해보겠습니다.

 

1) 전반적으로 css, javascript, html 요소를 mozilla 등의 web docs 사이트에 검색하여 호환성을 알아내는 방법입니다.

 

예를 들어 flex를 mozilla에 검색해본다면,

 

 요렇게 브라우저별 호환 유무와 버전별 어디까지 기능을 제공하는지 알려줍니다.

 

 

2) polyfill, underscore.js 등의 라이브러리를 사용합니다.

 

먼저 underscore.js의 예시입니다.

 

docs를 보니 jquery와 유사하게 이 라이브러리만의 문법을 제공하네요.

 

물론 기존 vanillascript 문법보다 더 편리하게 사용가능하고 브라우저별 호환성도 잡아 유용할 수도 있겠습니다만,,

 

저같은 주니어들은 저거 익힐 시간에 다른 공부를 하는게 더 낫지 않을까 생각됩니다.. 😥

 

 

두 번째는 pollyfill 입니다.

 

ES6 이상의 문법을 지원하지 않는 구형 브라우저나 IE의 경우에는 ES5 문법으로 트랜스파일링이 필요합니다.

 

이를 위해 일반적으로 React.js 개발자들은 CRA에서 자동으로 설정해주는 babel을 사용하거나,

 

별도의 설정을 통해 babel을 설치합니다.

 

하지만 babel이 만능은 아니라는걸 이제서야 알게 되었습니다.

 

ES6 이상에서 제공하는 set, map, promise 등과 특정 빌트인 객체의 프로토타입 메소드 등은 babel로 트랜스파일링을 거쳐도 ES5 문법으로 표현될 수 없어 문제가 발생합니다!

 

이 문제가 발생하는 틈을 메꿔주는 것이 pollyfill 입니다.

 

폴리필 (javascript.info)

폴리필

pollyfill에 대한 더 자세한 개념은 위의 링크에서 확인 가능합니다.

 

pollyfill 문제의 해결 방법으로 core-js, regenerator-runtime 이 두 라이브러리가 가장 많이 사용되며,

 

다른 방법으로는 mozilla의 해당 문서 맨 밑에

 

이렇게 pollyfill 로써 사용할 수 있는 코드를 제공합니다. 

 

그럼 React 프로젝트를 배포할 때 이 코드들을 같이 번들링하든가 또는, cdn으로 전달하면 문제가 해결되지 않을까 생각됩니다.

 

 

3) vendor prefix를 사용합니다.

 

css 파일에 스타일을 정의할 때, 브라우저별로 css의 속성을 다르게 정의할 수 있는 방법입니다.

 

출저 코딩의 시작, TCP School

코딩교육 티씨피스쿨

 

 

4) 특정 브라우저를 차단하는 방법입니다.

 

브라우저 최상위 객체인 window에는 브라우저의 정보를 알려주는 navigator라는 프로퍼티가 있습니다.

 

이 navigator는 브라우저에 대한 여러 정보를 가진 하위 객체입니다.

 

출저 코딩맛집 :: 자바스크립트 브라우저 버전 감지(navigator.userAgent) (tistory.com)

 

그 중에서 appName과 userAgent로 브라우저의 이름과 버전 정보를 파악할 수 있습니다.

 

콘솔창에 해당 브라우저의 정보가 잘 출력이 되네요!

 

위 사진처럼 현재 브라우저가 특정 기피되는 브라우저라면 사용자에게 다른 브라우저를 사용해달라는 요청을 알리는 로직을 넣으면 되겠습니다.