[TIL; 1d] Polyfill / User-Agent / console

Polyfill

• 오래된 브라우저에서도 최신 자바스크립트 기능을 지원(채워)해주는 스크립트
• Polyfill은 브라우저에 포함되어 있는지 체크하고, 없으면 값을 채워주는 형태로 동작함

/* Array.prototype.at에 대한 자체 구현 */;
Array.prototype.at = Array.prototype.at ??

 

• 이것을 알아본 이유: 팀 코드를 보는데 core-js: 3이라는 부분을 봐서 그렇다.
  • 표준적으로 사용하는 Polyfill들은 이 core-js 리포지토리에 모여있다.
  • import 'core-js/actual'을 실행하면 대부분의 ECMAScript 기능을 사용할 수 있다.

Polyfill의 장단점

• 장점: 폭넓은 브라우저 지원 가능
• 단점: 로드해야 하는 JS 코드가 많아짐 => 웹 성능 악화를 야기

선택적으로 필요한 Polyfill 스크립트만 불러오는 방법

• @babel/preset-env 사용: smart preset(core-js를 import 하더라도 이미 정의된 브라우저 목록에 따라 필요 없는 Polyfill 제거) 

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { ie: 11 } }],
  ],
  /* 그 외의 설정 */
};

 

• User-agent에 따라 동적으로 스크립트 생성하기
  • 1번의 경우 어쨌든 불필요한 스크립트를 내려 받는 문제는 동일
  • 브라우저의 User-agent에 따라 동적으로 생성하면 됨
    • User-agent: 웹/앱 등 클라이언트가 서버와 통신할 때 자신을 식별하기 위해 HTTP 요청 헤더에 포함하는 문자열
      • 이를 통해 서버는 요청을 보낸 클라이언트의 종류, 운영 체제, 브라우저 버전 등을 파악할 수 있음

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

 

Mozilla: 레거시 호환성을 위한 표준 문구,

Window ~ x64: 운영 체제와 아키텍처 정보(64비트)

AppleWebKit ~ 36: 브라우저가 사용하는 렌더링 엔진

Chrome ~ 0.0.0: 브라우저와 버전 정보

Safari ~ .36: Safari 엔진과 호환 정보

 

이런 정보들을 포함하고 있는데, 여기서 브라우저 정보를 얻어 필요한 Polyfill만을 포함한 스크립트를 생성하는 것이다.

또는 자체적으로 Polyfill 서비스를 구축하는 방법도 있다.

참고: https://toss.tech/article/smart-polyfills

똑똑하게 브라우저 Polyfill 관리하기

 

 

---

 

console의 다양한 기능

참고: https://developer.mozilla.org/ko/docs/Web/API/console

console - Web API | MDN

 

• 이것을 알아본 이유: console과 관련한 헬퍼 유틸 중 console.groupCollapsed가 있어서 찾아봤다.

collapsed가 노션에서 토글인 걸로 알고 있는데 콘솔에서 이게 어떻게 찍히는 건지 보다 다른 기능들도 알아봤다.

어려운 내용은 아니고 console.log, console.error만 사용해봤기 때문에 신기해서 정리했다.

 

MDN이 아닌 실제 코드 예시를 보고 싶다면 참고(김범식님 velog)

 

---