이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹 구성요소 업데이트 - v1 API로 업그레이드할 시간이 더 많음

Jonathan Bingham

Arthur Evans

Web Components v1 API는 Chrome, Safari, Firefox, (곧) Edge에 제공되는 웹 플랫폼 표준입니다. v1 API는 말 그대로 수백만 개의 사이트에서 사용되고 매일 수십억 명의 사용자에게 도달합니다. 초안 v0 API를 사용하는 개발자는 사양에 영향을 미치는 귀중한 의견을 제공했습니다. 하지만 v0 API는 Chrome에서만 지원되었습니다. 상호 운용성을 보장하기 위해 Google은 이러한 초안 API가 지원 중단되었으며 Chrome 73부터 삭제될 예정이라고 발표했습니다.

충분한 수의 개발자가 이전에 더 많은 시간을 요청했기 때문에 해당 API는 아직 Chrome에서 삭제되지 않았습니다. 2020년 2월경에 v0 초안 API가 Chrome 80에서 삭제될 예정입니다.

v0 API를 사용하고 있다고 생각되는 경우 알아야 할 사항은 다음과 같습니다.

v0 API를 사용 중지한 상태로 사이트 테스트 사이트가 정상적으로 작동한다면 완료되었습니다. 자세한 내용은 나중에 돌아가기: v0 API 사용 중지를 참고하세요.
Polymer 라이브러리 v1 또는 v2를 사용하는 경우 Polymer팀에서 이전에 게시한 안내를 따르세요.
shadow DOM v0, 맞춤 요소 v0 또는 HTML 가져오기를 사용하는 경우 일부 polyfill을 로드해야 합니다. v0 polyfill 사용을 참고하세요.
무엇을 사용하고 있는지 잘 모르더라도 걱정하지 마세요. 도움말 어떤 API를 사용하고 있는지 모르겠습니다.

향후 문제: v0 API 사용 중지

v0 API가 사용 중지된 상태에서 사이트를 테스트하려면 명령줄에서 다음 플래그를 사용하여 Chrome을 시작해야 합니다.

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

명령줄에서 Chrome을 시작하려면 먼저 Chrome을 종료해야 합니다. Chrome Canary가 설치되어 있다면 이 페이지가 Chrome에 로드된 상태를 유지하면서 Canary에서 테스트를 실행할 수 있습니다.

v0 API를 사용 중지한 상태로 사이트를 테스트하려면 다음 단계를 따르세요.

Mac OS를 사용 중인 경우 chrome://version으로 이동하여 Chrome 실행 경로를 찾습니다. 3단계의 경로가 필요합니다.
Chrome을 종료합니다.
명령줄 플래그를 사용하여 Chrome을 다시 시작합니다.

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

플래그로 Chrome을 시작하는 방법은 플래그로 Chromium 실행을 참고하세요. 예를 들어 Windows에서는 다음을 실행할 수 있습니다.
```
chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
```
브라우저를 올바르게 시작했는지 다시 확인하려면 새 탭을 열고 DevTools 콘솔을 연 후 다음 명령어를 실행합니다.
```
console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));
```
모든 것이 예상대로 작동하면 다음과 같이 표시됩니다.
```
Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false
```
브라우저에서 이러한 기능 중 일부 또는 전부에 대해 true라고 보고하는 경우 문제가 있는 것입니다. 플래그를 사용하여 다시 시작하기 전에 Chrome을 완전히 종료했는지 확인하세요.
마지막으로 앱을 로드하고 기능을 살펴봅니다. 모든 것이 예상대로 작동하면 완료된 것입니다.

v0 폴리필 사용

Web Components v0 polyfill은 네이티브 지원을 제공하지 않는 브라우저에서 v0 API를 지원합니다. v0 API가 사용 중지된 상태로 Chrome에서 사이트가 작동하지 않는다면 폴리필을 로드하지 않았을 가능성이 높습니다. 다음과 같은 방법이 있습니다.

폴리필을 전혀 로드하지 않고 있습니다. 이 경우 사이트는 Firefox 및 Safari와 같은 다른 브라우저에서 실패합니다.
브라우저 스니핑에 따라 조건부로 폴리필을 로드하고 있습니다. 이 경우 사이트가 다른 브라우저에서 작동하게 됩니다. polyfill 로드로 건너뜁니다.

이전에는 Polymer 프로젝트팀과 다른 팀에서 기능 감지를 기반으로 조건부로 polyfill을 로드할 것을 권장했습니다. 이 접근 방식은 v0 API가 사용 중지된 상태에서도 정상적으로 작동합니다.

v0 폴리필 설치

Web Components v0 폴리필은 npm 레지스트리에 게시된 적이 없습니다. 프로젝트에서 이미 Bower를 사용 중인 경우 Bower를 사용하여 polyfill을 설치할 수 있습니다. 또는 ZIP 파일로 설치할 수 있습니다.

Bower로 설치하는 방법:

bower install --save webcomponents/webcomponentsjs#^0.7.0
ZIP 파일에서 설치하려면 GitHub에서 최신 0.7.x 출시 버전을 다운로드하세요.

https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

ZIP 파일로 설치하는 경우 다른 버전이 제공되면 polyfill을 수동으로 업데이트해야 합니다. 코드에서 polyfill을 확인하는 것이 좋습니다.

v0 polyfill 로드

Web Components v0 polyfill은 별도의 두 번들로 제공됩니다.

`webcomponents-min.js`	모든 폴리필을 포함합니다. 이 번들에는 다른 폴리필보다 훨씬 큰 Shadow DOM 폴리필이 포함되어 있으며 성능에 큰 영향을 미칩니다. Shadow DOM 지원이 필요한 경우에만 이 번들을 사용합니다.
`webcomponents-lite-min.js`	Shadow DOM을 제외한 모든 폴리필을 포함합니다. 참고: Polymer 1.x 사용자는 이 번들을 선택해야 합니다. Shadow DOM 에뮬레이션이 Polymer 라이브러리에 직접 포함되어 있기 때문입니다. Polymer 2.x 사용자는 다른 버전의 폴리필이 필요합니다. 자세한 내용은 Polymer Project 블로그 게시물을 참고하세요.

또한 웹 구성요소 폴리필 패키지의 일부로 사용할 수 있는 개별 폴리필이 있습니다. 개별 polyfill을 개별적으로 사용하는 방법은 고급 주제이며 여기에서 다루지 않습니다.

폴리필을 무조건 로드하려면 다음 단계를 따르세요.

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

또는

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

GitHub에서 직접 polyfill을 설치한 경우 polyfill을 설치한 경로를 제공해야 합니다.

기능 감지에 따라 조건부로 polyfill을 로드하면 v0 지원이 제거되어도 사이트가 계속 작동합니다.

브라우저 스니핑을 사용하여 조건부로 폴리필을 로드하는 경우 (즉, Chrome이 아닌 브라우저에서 폴리필 로드) Chrome에서 v0 지원이 제거되면 사이트에 오류가 발생합니다.

도와주세요. 어떤 API를 사용하고 있는지 모릅니다.

v0 API를 사용 중인지 또는 사용 중인 API를 사용 중인지 모르는 경우 Chrome의 콘솔 출력을 확인하세요.

이전에 v0 API를 사용 중지하는 플래그로 Chrome을 시작한 경우 Chrome을 닫고 정상적으로 다시 시작합니다.
새 Chrome 탭을 열고 사이트를 로드합니다.
Control+Shift+J (Windows, Linux, ChromeOS) 또는 Command+Option+J (Mac)를 눌러 DevTools 콘솔을 엽니다.
콘솔 출력에서 지원 중단 메시지를 확인하세요. 콘솔 출력이 많은 경우 필터 상자에 '지원 중단'을 입력합니다.

사용 중인 각 v0 API에 대한 지원 중단 메시지가 표시됩니다. 위의 출력은 HTML 가져오기, 맞춤 요소 v0, shadow DOM v0에 대한 메시지를 보여줍니다.

이러한 API 중 하나 이상을 사용하는 경우 v0 polyfill 사용을 참고하세요.

다음 단계: v0에서 이전

v0 polyfill이 로드되도록 하면 v0 API가 삭제되어도 사이트가 계속 작동합니다. 광범위하게 지원되는 Web Components v1 API로 이전하는 것이 좋습니다.

Polymer 라이브러리, X-Tag 또는 SkateJS와 같은 웹 구성요소 라이브러리를 사용하는 경우 첫 번째 단계는 v1 API를 지원하는 라이브러리의 최신 버전을 사용할 수 있는지 확인하는 것입니다.

자체 라이브러리가 있거나 라이브러리 없이 맞춤 요소를 작성한 경우 새 API로 업데이트해야 합니다. 다음 리소스가 도움이 될 수 있습니다.

요약

Web Components v0 초안 API가 지원 중단됩니다. 이 게시물에서 한 가지 유의할 점은 v0 API를 사용 중지한 상태에서 앱을 테스트하고 필요에 따라 polyfill을 로드해야 합니다.

장기적으로는 최신 API로 업그레이드하고 웹 구성요소를 계속 사용할 것을 권장합니다.