[카테고리:] 미분류

작성일자

#GWC UI Library : Label

웹 UI 라이브러리인 GWC에서 제공하는 Label 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.panel {
    display: flex;
    gap: 0.4em;
    flex-direction: column;
    padding: 1em;
}

.vcenter {
    display: flex;
    align-items: center;
    gap: 0.2em;
}

실행 결과는 다음과 같습니다.

속성의 text-align을 지정할 수 있으며 값은 left, center, right입니다. 예시는 다음과 같습니다.
작성일자

#GWC UI Library : Switch

웹 UI 라이브러리인 GWC에서 제공하는 Switch 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3em;
}

#switch1 {
    margin-right: 5em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const switch1 = document.querySelector("#switch1");
    switch1.addEventListener("change", (event) => {
        if(event.target.on) {
            switch1.label = "맑은 날~";
        } else {
            switch1.label = "비가 오나요?";
        }
    });

    const switch2 = document.querySelector("#switch2");

    document.querySelector("#button1").addEventListener("click", () => {
        alert(`switch1: ${switch1.on} / switch2: ${switch2.on}`);
    });

    document.querySelector("#button2").addEventListener("click", () => {
        switch1.on = !switch1.on;
    });

    document.querySelector("#button3").addEventListener("click", () => {
        switch2.disabled =  !switch2.disabled;
    });
};

실행 결과는 다음과 같습니다.

작성일자

#GWC UI Library : Button

웹 UI 라이브러리인 GWC에서 제공하는 Button 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const button1 = document.querySelector("#button1");
    button1.addEventListener("click", () => { 
        alert("안녕하세요~! GWC 라이브러리입니다.") 
    });

    const button2 = document.querySelector("#button2");
    button2.addEventListener("click", () => {
        if(button2.title === "버튼2") button2.title = "Button2";
        else button2.title = "버튼2";
    });

    const button4 = document.querySelector("#button4");
    button4.addEventListener("click", () => {
        alert("버튼4를 클릭했습니다.");
    });

    const button3 = document.querySelector("#button3");
    button3.addEventListener("click", () => {
        button4.disabled = !button4.disabled;
    });
};

실행 결과는 다음과 같습니다.

작성일자

HTMLElement를 통한 사용자 정의 컴포넌트 개발시 자식 접근

먼저 다음과 같이 HTMLElement를 상속받아 사용자 정의 컴포넌트를 생성합니다. 이 소스는 외부 js 파일에 존재합니다.

class TEST extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        console.log(this.querySelectorAll("div"));
    }
}

customElements.define("my-test", TEST);

이제 위의 코드가 담긴 js 파일을 다음 웹 페이지에 포함시킬 수 있습니다.

웹 페이지에서 다음처럼 정의한 사용자 컴포넌트를 태그를 통해 추가할 수 있구요.

종국에는 TEST 클래스 코드의 7번 줄에 의해 my-test 태그의 자식 div가 2개이므로 콘솔에 아래처럼 출력되어야 합니다.

NodeList(2) [div, div]

하지만 NodeList []로 표시됩니다. 즉, 자식을 발견할 수 없다가 됩니다. 이유는 웹페이지의 모든 DOM 구성 트리가 완성되지 않은 상태에서 js 파일이 실행되었기 때문인데요. 정상적으로 처리하기 위해서 js 파일의 실행을 DOM 구성 트리가 완성되기 전까지 지연(defer)시켜줘야 합니다. 아래처럼 js 파일을 웹 페이지에 포함시키는 코드를 수정하면 됩니다.

동기화 문제인데.. 이런 동기화 처리를 위한 defer 사용은 껄끄럽습니다만.. 여튼 이렇게 하면 자식 요소에 접근 가능하게 됩니다.