위코드 기업협업 중간에 한창 면접을 보러다닐 때의 일이다.
크로스 브라우징이 뭔지 아는지, 폴리필이 뭔지 아는지에 대해 물어본 회사도 있었지만
ES6 문법을 미지원하는 브라우저의 경우 어떻게 할 것인가에 대한 질문이 있었고
급하게 면접을 준비하던, 아무것도 모르던 나의 대답은…
Modal창을 만들어서
“죄송합니다. 크롬 브라우저를 이용해주세요”
라는 메시지를 띄운다고 패기있게 말했다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
면접관들이 얼마나 당황스러웠을까 ㅋㅋㅋ
그래서 오늘은!!!
면접 단골질문이자 프론트앤드 개발자라면 꼭 알아야하는 이 개념에 대해 정리해보고자 한다!
나같이 바보같이 대답하는 사람들이 이제는 없기를 바라며.. ㅠㅠ
크로스 브라우징(Cross Browsing)
크롬, 파폭, 사파리 등등 어떤 브라우저에서 봐도 내가 만든 웹페이지의 뷰가 동일한 것을 말한다. 크로스 브라우징을 위해 우리가 해줘야 하는게 바로 폴리필인데…
폴리필이 무엇인지 알아보기 전에!
크롬에선 넘나 정상적으로 보이는 웹 페이지가 IE에서 어떻게 보이는지 살펴보자..
원래의 페이지는…
이렇게 멋지게 뙇!
위코드 3기에서 Stayfolio를 클론한 작품인데…
IE에서는…
(이 당시 우분투/윈도우 듀얼부팅을 하던 내 노트북 화면을 TV에 연결한 모습)
깨지는 것도 정도껏이지.. 부분 부분 안 보일줄 알았는데
아예 하얀 화면에 아무것도 뜨지 않는다!!!
모달창을 띄우니 마니 했던 나의 면접 대답이 정말 창피해지는 순간이었다 ㅋㅋㅋㅋ
해결책은 폴리필!
폴리필(polyfill)
단어 그대로의 뜻은 충전솜을 의미한다.
IE 같은 구형 브라우저에선 최신 자바스크립트 문법이나 CSS 성질들이 먹히지 않는다.
공들여 쓴 코드가 화면상 깨져보이지 않게 몇 가지 코드를 덧붙이는 작업이 바로 폴리필!
위에서 설명한 크로스브라우징을 체크하기 위해 우린 폴리필이란 작업을 해줘야한다!
순서
(여기에서의 순서는 window에서 git clone받은 이후의 작업 순서이다!)
npm install로 먼저 개발 환경 세팅쓰- core.js 설치
- index.js의 첫 줄에 import 하기
내가 코드 치느랴 캡쳐하느라 사진찍느라 정신없어서 글로 제대로 정리를 못했는데 이보다 더 간단한 방법도 있다..!
바로 facebook에서 권장하는 react-app-polyfill를 설치하는 것
(위의 이미지는 package.json 캡쳐. 지금은 버전이 더 올라갔으려나 ㅋㅋ)
index.js의 첫줄에 import 'react-app-polyfill/ie9'; 붙여넣기
그럼 간단히 해결쓰~
글을 마치기 전…
그밖에 추천할만한 사이트
둘 다 들어가보면 권장하는 태그, api 등의 정보들을 알려준다.