(Javascript) 나의 학습 여정: 웹 컴포넌트

13746 단어 tutorialjavascriptbeginners
아무 것도 놓치고 싶지 않다면 팔로우를 클릭하고 댓글과 토론을 환영합니다.

더 이상 고민하지 않고 여기에 오늘의 메모 요약이 있습니다.

웹 컴포넌트란?



웹 페이지 및 웹 앱에서 사용할 사용자 정의되고 재사용 가능하며 캡슐화된 html 태그를 생성할 수 있는 웹 플랫폼 API 세트입니다.

웹 구성 요소에는 특별한 자바스크립트 라이브러리나 프레임워크가 필요하지 않습니다.

웹 구성 요소에는 3가지 주요 빌딩 블록이 있습니다.
  • 맞춤 요소
  • 섀도우 DOM
  • HTML 템플릿

    • 맞춤 요소:



    사용자 정의 HTML 태그, 사용자 정의 클래스 및 라이프사이클 메소드 생성

    // class inherits from HTMLElement
class customButton extends HTMLElement {
  ...
}

// To bind the new custom element
window.customElements.define('x-button', customButton)


    라이프사이클 방법:
  • constructor(): 요소의 인스턴스가 생성될 때 호출됩니다
    • .
  • connectedCallback(): 요소가 DOM에 삽입될 때마다 호출
  • disconnectedCallback(): 요소가 DOM에서 제거될 때마다 호출합니다
    • .
  • attributeChangedCallback(attributeName, oldValue, newValue): 속성이 추가, 제거, 업데이트 또는 대체될 때 호출합니다
    • .

    섀도우 DOM:


  • 자급식 부품에 사용됨
  • 스타일 및 마크업 캡슐화
  • element.attachShadow({mode:open})로 만들기
  • 참조하고 상호 작용할 수 있는 "shadowRoot"를 만듭니다
    • .

    HTML 템플릿:


  • 웹 구성 요소의 캡슐화된 마크업 정의
  • 템플릿 태그가 페이지에 마크업을 저장함
  • 템플릿에 HTML과 CSS를 모두 포함합니다
    • .
  • 슬롯을 사용하여 사용자 정의 텍스트 추가

    • 내 첫 번째 구성 요소



    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Component</title>
</head>
<body>
    <panic-button></panic-button>
    <script src="panicButton.js"></script>
</body>
</html>


    패닉버튼.js

    class panicButton extends HTMLElement {
    constructor() {
        // Call HTMLElement constructor
        super()
        // Add some content to our component
        this.innerHTML = `Hello World`
    }
}

// Bind our component
window.customElements.define('panic-button', panicButton)


    내 첫 번째 구성 요소... 더 잘할 수 있을 것 같아요 :)


    속성 추가
    index.html

    <panic-button message="Women and Children first"></panic-button>


    패닉버튼.js

    class panicButton extends HTMLElement {
    constructor() {
        // Call HTMLElement constructor
        super()
        // use getAttribute to retrieved attribute
        this.innerHTML = `P A N I C - ${this.getAttribute('message')}`
    }
}

// Bind our component
window.customElements.define('panic-button', panicButton)


    ShadowRoot 사용:

    // Create the element with custom CSS and HTML
const template = document.createElement('template')
template.innerHTML = `
<style>
    button {
        color: white;
        background-color: red;
        font-size: 16px;
        padding: 12px;
    }
</style>
<div>
    <button></button>
</div>
`
// Create web component
class panicButton extends HTMLElement {
    constructor() {
        super()
        // Create the ShadowRoot
        this.attachShadow({mode: 'open'})
        // Add our component inside our ShadowRoot
        this.shadowRoot.appendChild(template.content.cloneNode(true))
        // Set attributes        
        this.shadowRoot.querySelector('button').innerText = `P A N I C : ${this.getAttribute('message')}`
    }
}

window.customElements.define('panic-button', panicButton)


    index.html 실행


    슬롯 사용

    <panic-button>Women and Children First</panic-button>




    // Add the <slot /> tag
const template = document.createElement('template')
template.innerHTML = `
<style>
    button {
        color: white;
        background-color: red;
        font-size: 16px;
        padding: 12px;
    }
</style>
<div>
    <button><slot /></button>
</div>
`


    다중 슬롯

    <panic-button>
  <div slot="message">General Alert</div>
  <div slot="image"><img src="alter.jpg"></div>
</panic-button>




    // Add the multiple slot tag by name
const template = document.createElement('template')
template.innerHTML = `
<style>
    button {
        color: white;
        background-color: red;
        font-size: 16px;
        padding: 12px;
    }
</style>
<div>
    <button>
        <slot name="message"/>
        <slot name="image"/>
    </button>
</div>
`


    이벤트

    class panicButton extends HTMLElement {
    constructor() {
      ...
    }
    // Add the event listener inside this lifecycle hook
    connectedCallback() {
        this.shadowRoot.querySelector('button').addEventListener('click', e => {
            alert('This is not a exercice!')
        })
    }
  }


    결론



    오늘은 여기까지입니다. 웹 구성 요소에 대한 자세한 정보가 필요한 경우 여기에서 읽을 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/Web_Components

    내가 쓴 글이 마음에 든다면 내가 Dev.to에 새 게시물을 게시할 때 알림을 받으려면 팔로우를 클릭하세요.
    리스트 왼쪽 좌우 고정, 오른쪽 좌우 스크롤 가능, 좌우 양쪽 리스트 스크롤 시 상하 연동
    div 팝업 가운데 맞춤

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage