Vite

npm create vite@latest

이를 사용해서 vite 프로젝트를 초기에 구성할 수 있다

만약 이처럼 사용하게 되면 기존에 package.json파일 내부에 scripts에 작성하던 명령어들이 자동적으로 설정된다

참고로 잠시 후 Lit에 대해 알아보기 위해 Lit framework를 선택했다

그리고 package.json 파일의 내부를 살펴보면 다음과 같다

자연스럽게 dependecies에는 Lit과 Vite가 포함되어있고 scripts에는 Vite를 실행하는 명령어가 적용되어있다

이후 npm i 를 사용하여 패키지를 설치하고 원하는 명령어를 실행할 수 있다

실행한 화면은 위와 같다

주의할 사항이 있다

본인의 버전에 맞게 설정해야함을 인지하자

Lit

Lit은 웹 컴포넌트를 구성하기 편하게 해주는 library이다
이는 기존의 HTMLElement를 LitElement로 대체하며 여러 가지를 내장한다

기본 틀

import { LitElement } from "lit";

class TestElement extends LitElement {
  constructor() {
    super();
  }

  render() {}
}

customElements.define("test-element", TestElement);

app.append(document.createElement("test-element"));

기존의 HTMLElement에서 conneted될때 disconnected될때 그리고 값이 변할때 모두 분리하여 함수를 작성하던 것과 달리 이는 constructor와 render만 있어도 자동적으로 인식한다

이때 기존에 HTMLElement에선 this.attachShadow({mode:'open'}); 을 사용하여 shadow DOM에 접근 가능하도록 설정했지만 Lit에서는 그럴 필요가 없어진다

이번엔 직접 태그를 생성하여 붙여보도록 하자

import { LitElement, html } from "lit";

class TestElement extends LitElement {
  constructor() {
    super();
  }

  render() {
    return html` <div>hello</div> `;
  }
}

customElements.define("test-element", TestElement);

app.append(document.createElement("test-element"));

렌더링 결과는 다음과 같다

이때 특이한 점은 render()에서 바로 return을 하여도 정상적으로 태그가 생성된다는 점이다
하지만 이는 Lit에서 제공하는 html 메서드가 존재하기에 가능하다
html 을 작성하고 그 뒤에 `` literal template 을 작성하게 되면 원하는 태그를 생성하고 반환할 수 있다

이번엔 이미지를 삽입해보겠다

    return html`
      <div>hello</div>
      <img src="/src/assets/lit.svg" />
    `;

정상적으로 작동이 된다

변수와 이벤트

이번엔 변수와 이벤트에 대해 살펴보자
우선 변수는 class내부에서 static properties를 사용하여 선언이 가능하다
단, 최초 설정은 반드시 constructor내부에서 해야한다

  static properties = {
    checked,
  };
  constructor() {
    super();

    this.checked = false;
  }

이때 static은 observer의 역할을 하여 상태가 변경되면 자동으로 리렌더링된다

다음으로는 이미지 태그에 클릭 이벤트를 부여하여 정상적으로 값이 할당되었는지 살펴보자

그 동안 JS에서 이벤트는 addEventListener를 사용하여 명령형으로 부여했었다
하지만 Lit에서는 이벤트를 선언형으로 할당이 가능하다
사용법은 @이벤트종류 를 사용해서 어떤 이벤트를 할당할지 정하고 뒤에 실행할 함수를 속성값으로 부여하는 것이다

static properties = {
    checked: { type: Boolean },
  };

  constructor() {
    super();

    this.checked = false;
  }

  render() {
    return html`
      <div>hello</div>
      <img src="/src/assets/lit.svg" @click=${this.handleClick} />
    `;
  }

결과는 다음과 같다

다양한 표현식

만약 태그를 생성할 때 id값 혹은 속성 값을 줄 때 여러 가지 방법이 존재한다

1. ?variable
   이는 boolean으로 표시할때 주로 사용한다
   대표적인 예로 hidden과 disable이 있다

2. .variable
   이는 태그 내부에 변수 값을 설정할때 사용한다
   대표적인 예로 value와 같은 값이 있다

return html`
    <div>hello</div>
    <img src="/src/assets/lit.svg" @click=${this.handleClick} .id={'hello'} />
	<input type="checkbox" ?disabled=${true} />
`;

이와 같이 사용하는 이유는 만약 일반적으로 disabled를 'true'로 설정하게 되면 이를 문자열로 사용하지만 ?disabled를 사용하게 되면 온전히 boolean값으로 할당할 수 있다는 장점이 있다

표현식이 자주 사용되는 곳에는 5가지 주요 위치가 존재한다
1. child nodes
2. attribute
3. boolean attribute
4. property
5. eventListener

리스트 렌더링

변수명 앞에 \_(under score)를 사용하면 내부적으로만 사용하겠다고 암시한다

하지만 static 내부에 state:true를 사용하여 내부에서만 사용하도록 설정할 수 있다

리스트 렌더링은 렌더링할때 배열을 순회하며 특정 태그들을 생산하는 것을 의미한다
예를 들어 class 내부에 배열을 지정하고 이를 순환하게 명령한 후 순환 과정에서 태그를 생산한다면 배열의 length만큼 태그가 생성되는 것이다

this.arr = [
      { id: 1, alpha: "a", kor: "가" },
      { id: 2, alpha: "b", kor: "나" },
      { id: 3, alpha: "c", kor: "다" },
      { id: 4, alpha: "d", kor: "라" },
      { id: 5, alpha: "e", kor: "마" },
];

<ul>
  ${this.arr.map((item) => {
          return html` <li>id : ${item.id} / alphabet : ${this.alpha} / korean : ${this.kor}</li> `;
    })}
</ul>

결과는 다음과 같다

참고로 리스트 렌더링을 할때도 map으로 순회하여 html을 return해주어야 정상적으로 작동된다
forEach로 순회하면 return이 되지 않기에 정상적인 렌더링이 불가능하다

참고로 lit은 immutable해서 배열에 직접적으로 push하는 것은 불가능하다
따라서 이를 해결하기 위해 spread syntax를 사용해서 재할당한다

만약 특정 태그를 추출하고 싶다면 shadowRoot에 접근하는 것이 아닌 renderRoot에 접근하여 추출할 수 있다

const tag = this.renderRoot.querySelector('li')

css

위의 return html `` 과 같이 static style = css `` 를 사용해 기본적인 CSS를 지정할 수 있다

만약 초기 static에 들어있는 값이 아니라면 값이 바뀌어도 리렌더링이 일어나지 않는다