이 페이지는 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부터 삭제될 예정이라고 발표했습니다.

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

v0 API를 사용하고 있다고 생각되면 다음 사항을 알아야 합니다.

v0 API를 사용 중지한 상태에서 사이트를 테스트합니다. 사이트가 예상대로 작동하면 축하드립니다. 완료되었습니다. 자세한 내용은 과거로 돌아가기: v0 API 사용 중지를 참고하세요.
Polymer 라이브러리 v1 또는 v2를 사용하는 경우 Polymer팀에서 이전에 게시한 안내를 따르세요.
shadow DOM v0, 맞춤 요소 v0 또는 HTML 가져오기를 사용하는 경우 일부 폴리필을 로드해야 합니다. v0 폴리필 사용을 참고하세요.
어떤 계정을 사용하고 있는지 잘 모르겠다면 걱정하지 마세요. 도와주세요! 사용 중인 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 폴리필은 네이티브 지원을 제공하지 않는 브라우저에서 v0 API를 지원합니다. v0 API가 사용 중지된 Chrome에서 사이트가 작동하지 않으면 폴리필을 로드하지 않고 있는 것일 수 있습니다. 다음과 같은 몇 가지 가능성이 있습니다.

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

이전에는 Polymer 프로젝트팀과 다른 팀에서 기능 감지를 기반으로 폴리필을 조건부로 로드하는 것이 좋습니다. 이 접근 방식은 v0 API가 사용 중지된 경우에도 제대로 작동합니다.

v0 폴리필 설치

Web Components v0 폴리필은 npm 레지스트리에 게시된 적이 없습니다. 프로젝트에서 이미 Bower를 사용하는 경우 Bower를 사용하여 폴리필을 설치할 수 있습니다. 또는 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 파일에서 설치하는 경우 다른 버전이 출시되면 폴리필을 수동으로 업데이트해야 합니다. 코드에서 폴리필을 확인하는 것이 좋습니다.

v0 폴리필 로드

Web Components v0 폴리필은 다음 두 가지 별도의 번들로 제공됩니다.

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

웹 구성요소 폴리필 패키지의 일부로 제공되는 개별 폴리필도 있습니다. 개별 폴리필을 별도로 사용하는 것은 고급 주제이며 여기서는 다루지 않습니다.

폴리필을 무조건 로드하려면 다음을 실행합니다.

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

또는

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

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

기능 감지를 기반으로 polyfill을 조건부로 로드하면 v0 지원이 삭제되더라도 사이트가 계속 작동합니다.

브라우저 스니핑을 사용하여 폴리필을 조건부로 로드하는 경우 (즉, Chrome 이외의 브라우저에서 폴리필을 로드하는 경우) Chrome에서 v0 지원이 삭제되면 사이트가 실패합니다.

도와주세요. 사용 중인 API를 모르겠습니다.

v0 API를 사용 중인지 또는 사용 중인 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 폴리필 사용을 참고하세요.

다음 단계: v0 지원 중단

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

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

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

요약

Web Components v0 초안 API가 지원 중단됩니다. 이 게시물에서 한 가지 기억해야 할 사항은 v0 API를 사용 중지한 상태로 앱을 테스트하고 필요에 따라 폴리필을 로드해야 한다는 것입니다.

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