폴리필(Polyfill), 심(Shim) 이란? + WebRTC에서 adapter.js를 쓰는 이유

폴리필(Polyfill) 정의

• 최신 기능을 지원하지 않는 이전 브라우저에서 최신 기능을 사용할 수 있게 도와주는 코드 모음
• HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 함

 

심(Shim) 정의

• 이미 존재하는 코드의 동작을 바로잡는 데 사용하는 코드 모음
• 폴리필이 브라우저가 지원하지 않는 신규 API를 구현하기 위해 존재한다면 심은 문제를 일으키는 신규 API에 대응하기 위해 존재

 

폴리필(Polyfill)과 심(Shim)의 목적

• 브라우저가 달라도 같은 기능을 할 수 있게 만드는 것이 목적
• 즉, 원활한 크로스 브라우징을 위해 존재

 

adapter.js 정의

• 서로 다른 웹 브라우저에서 구현된 WebRTC 코드들의 호환성 문제를 해결해주는 JavaScript 코드 모음
• 폴리필(Polyfill)과 심(Shim)을 사용하여 다양한 플랫폼에서 WebRTC 구현 간의 차이점을 없애 줌

 

WebRTC에서 adapter.js가 필요한 이유

• WebRTC를 지원하는 브라우저 종류가 다양하기 때문에 브라우저 종류와 버전에 따라 지원하는 기능에 제한이 있거나 문법의 차이가 존재
• adapter.js를 사용하면 브라우저 종류와 버전에 맞게 일일이 코드를 수정할 필요가 없음 

 

사용법

Github에 있는 Script URL 참조

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

• 최신 버전의 adapter.js를 참조해서 사용할 수 있음
• 하지만 참조 스크립트 내용이 변경되면서 어떠한 문제가 생길지 모르니 다운 받아서 사용하는 것을 권장

 

npm install 해서 사용하기

$ npm init -y
$ npm install --save webrtc-adapter

• 정확한 버전을 package.json에 명시해서 버전 변경 시 발생하는 문제를 방지

const adapter = require("webrtc-adapter");

 

참조

https://github.com/webrtc/adapter

webrtc/adapter

https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API/adapter.js

Improving compatibility using WebRTC adapter.js - Web API | MDN