맞춤 구성요소 업그레이드 가이드

맞춤 구성요소를 업그레이드해야 하는 이유는 무엇인가요?

2021년 7월부터 Google Web Designer는 더 이상 v0 맞춤 구성요소를 지원하지 않습니다. 오래된 맞춤 구성요소를 맞춤 요소 v1 사양을 따르도록 업그레이드해야 합니다.

내 맞춤 구성요소가 오래된 버전인가요?

Google Web Designer는 오래된 맞춤 구성요소가 포함된 문서를 열 때 경고 메시지를 표시합니다. 또한 구성요소 이름 옆의 구성요소 패널에 경고 표시기 가 표시되며 다른 아이콘 은 스테이지의 오래된 맞춤 구성요소를 나타냅니다.

구성요소의 소스 파일을 확인할 수도 있습니다. 다음 예제에서는 오래된 버전의 QR 코드 맞춤 구성요소를 사용합니다.

manifest.json

새 맞춤 구성요소의 매니페스트에 customElementsVersion 필드가 있습니다. 이 필드는 구성요소가 작성된 맞춤 요소 사양의 버전을 나타냅니다.

{
  ...
  "customElementsVersion": 1,
  ...
}

오래된 맞춤 구성요소 매니페스트에는 이 필드가 없습니다.

myqrcode.js

오래된 구성요소는 등록 중에 document.registerElement() 메서드를 사용합니다.

오래된 버전(맞춤 요소 v0)

document.registerElement('my-qrcode', {prototype: proto});

업데이트된 구성요소는 customElements.define() 메서드를 사용합니다.

최신 버전(맞춤 요소 v1)

customElements.define('my-qrcode', MyQrcode);

구성요소 파일에 document.registerElement(이)라는 용어가 포함되어 있으면 오래된 파일입니다. 다음 단계에 따라 구성요소를 업데이트할 수 있습니다.

업그레이드 단계

1. 구성요소 매니페스트 업데이트

새 customElementsVersion 필드를 포함하도록 구성요소의 매니페스트를 업데이트합니다. 또한 Google Web Designer에서 구성요소가 변경되었음을 인식할 수 있도록 버전 번호를 높입니다.

manifest.json

{
  "name": "QR Code",
  "type": "my-qrcode",
  "tagName": "my-qrcode",
  "customElementsVersion": 1,
  "version": 2,
  "description": "Generates a QR code image for the specified data.",
  "files": {
    "js": [
      "qr.js",
      "myqrcode.js"
    ]
  },
  "attributes": [
   {
    "name": "data",
    "label": "Data",
    "type": "string",
    "required": true,
    "description": "The data to encode in the QR code image"
   }
  ],
  "events": [
  ],
  "methods": [
  ],
  "nestable": false
}

2. 구성요소 자바스크립트 코드 업데이트

새 구성요소의 자바스크립트는 ES2015 클래스 구문을 사용하여 작성해야 합니다.

자바스크립트 API가 맞춤 요소 v1 사양에서 변경되었습니다. 다행히 이전 v0 API 메서드는 새로운 v1 메서드에 잘 매핑됩니다.

다음은 업데이트된 my-qrcode 구성요소의 작동 예제입니다.

myqrcode.js

/** @fileoverview Implementation of the my-qrcode component. */
if (window.customElements && window.customElements.define) {
  class MyQrcode extends HTMLElement {
    constructor() {
      super();
      this.img = null;
    }

    connectedCallback() {
      this.generateImage();
    }

    static get observedAttributes() {
      return ['data'];
    }

    attributeChangedCallback(attributeName) {
      if (!this.img) {
        return;
      }
      switch (attributeName) {
        case 'data':
          this.generateImage();
          break;
      }
    }

    generateImage() {
      const data = this.getAttribute('data');
      if (data) {
        if (!this.img) {
          this.img = document.createElement('img');
          this.img.style.height = '100%';
          this.appendChild(this.img);
        }
        this.img.setAttribute('src', QRCode.generatePNG(data));
      } 
    }
  }

  customElements.define('my-qrcode', MyQrcode);
}

참고사항:

• 새 구성요소가 HTMLElement를 확장해야 합니다.
• super()는 생성자에서 호출되어야 합니다.
• 속성이 observedAttributes 아래에 있지 않으면 attributeChangedCallback가 트리거되지 않습니다.

새로운 맞춤 요소 v1 사양 및 맞춤 요소 제작에 대해 자세히 알아보세요.

3. ES5로 자바스크립트 코드 변환(권장)

위의 업데이트된 QR 코드 구성요소는 Chrome 및 ES2015(ES6) 클래스 구문을 지원하는 다른 브라우저에서 작동합니다. 이전 브라우저는 이 새로운 자바스크립트 구문을 인식하지 못하므로 변환해야 합니다. 맞춤 구성요소가 모든 브라우저에서 제대로 작동하려면 섹션 2의 자바스크립트 코드를 ES5로 변환하는 변환기를 사용하는 것이 좋습니다.

Babel은 모든 운영체제에서 실행할 수 있는 babeljs.io의 자주 사용되는 변환기입니다. babeljs.io/repl에는 온라인으로 사용할 수 있는 웹 앱 버전도 있습니다.

Babel 웹 앱을 사용할 때 es2015 사전 설정이 선택되어 있는지 확인합니다.

원본 자바 스크립트 코드 대신 변환된 코드를 구성요소 패키지에 포함합니다.

4. 업데이트된 구성요소 설치

Google Web Designer에서 삭제 버튼을 사용하여 구성요소 패널에서 오래된 구성요소를 삭제한 다음 맞춤 구성요소 추가 버튼을 사용하여 zip 파일을 설치합니다.