장용석 블로그
돌아가기
•
2 min read
블로그

Astro 4.0

Astro 4.0이 릴리즈 되었다는 소식을 들었다. 블로그도 업데이트 할겸 겸사겸사 업데이트를 했다. 아일랜드 아키텍쳐.. 기타 … 등등.. Astro가 가진 장점들에 대해서는 깊게 파악하고 선택한 것은 아니였다. (후에 살펴보려고 미래의 나에게 과제로 남겨두는 것이다.)

당시 Lit에 대한 호기심이 있었고, Astro가 Lit을 지원한다는 것이 가장 큰 이유였다. (Lit은 딱히 구애를 받지 않고 사용할 수 있으나, 모체가 되는 편한 프레임워크가 있으면 좋겠다는 생각이 있었다.) 아마 23년 추석 부근… Lit과 3D에 큰 관심이 있었고, 새 맥북과 함께 블랜더도 공부할겸, 블랜더로 만든 오브젝트를 Lit으로 렌더링하는 것을 목표로 했었다.

그 결과로 열심히 만든 것이 회전하는 픽셀화된 도넛이었다.

하지만 블로그 업데이트를 하고나니, 모두 동작하지 않았다. 아마도 같이 올린 Lit 3.0의 탓일 것이다. 원인을 알고 싶지만, 알고 싶지 않아져 버렸다. 아마 이번 추석쯤 되어야 다시 고칠 마음이 생길 지도 모른다 이 포스트 위에 현재 보이지 않고 공허한 공간이 있다면 아직 고쳐지지 않은 것이다.

2024.01.16 - 문제의 원인은 하드웨어 가속을 꺼둔 탓이였음.

Lit

애증의 Lit. 가랑비에도 덜덜 떨고 있는 강아지 마냥 느껴져 컴포넌트 하나 만들어 보냈다.

겨울 답지 않게 비가 내리던 날과 같이 듣던 노래.
세상 참.. 기술의 발전으로 집에서 짐레이너의 노래를 들을 수 있다니. 경험의 영역이 넓어지는 것 같다.

코드

컴포넌트 사용법은 아래와 같다.

<YouTube src="https://youtu.be/Yis6ZXu-9pY" ></YouTube>

코드는 여기

import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("youtube-element")
export class YouTube extends LitElement {
  static styles = css`
    // style 코드는 취향에 맞게 넣어보자
  `;

  @property()
  src?: string;

  get videoId() {
    return this.extractVideoId(this.src);
  }

  extractVideoId(url?: string) {
    if (!url) return "";
    const regExp = /^https:\/\/youtu\.be\/([a-zA-Z0-9_-]+)/; // 정규식은 귀찮아 chatgpt에게 일임
    const match = url.match(regExp);
    return match ? match[1] : "";
  }

  render() {
    return html`
      <iframe
        class="aspect-video"
        src="https://www.youtube.com/embed/${this.videoId}"
        title="YouTube Video Player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      ></iframe>
    `;
  }
}
RSS 구독