웹 구성 요소를 작성하는 전통적인 방법은 SSR(서버 측 렌더링)에 그다지 친숙하지 않습니다. 이 게시물에서는 SSR 및 JavaScript 프레임워크(Vue, React, Svelte, Solid, Brisa) 또는 Vanilla JS와 작동하는 반응형 웹 구성 요소를 구축하는 방법을 보여줍니다.

• 소개
• Brisa로 웹 구성 요소 작성
• 웹 구성 요소 구축
• 바닐라 JS 프로젝트에서 웹 구성 요소 로드
• 웹 구성 요소의 SSR
• 브리사에 대해 더 알려주세요... 제발...
• 웹 구성 요소 라이브러리 작성자를 위한 참고 사항
• 예
• 결론

소개

Brisa Web Component Compiler를 사용하겠습니다. Brisa는 Next.js 또는 Nuxt.js와 같은 다른 프레임워크와 유사할 뿐만 아니라 JSX 및 SSR을 사용하여 반응성을 위한 신호로 작동하는 반응형 웹 구성 요소를 구축할 수 있는 웹 프레임워크입니다.

이를 위해서는 웹 컴포넌트를 작성할 때 Brisa의 구문만 알면 됩니다. Brisa는 현재 v0.1 경로 맵의 95.48%이므로 아직 공개되지 않았지만, 1개월 안에 출시 준비가 완료되어 모든 사람이 액세스할 수 있을 것으로 예상됩니다. 그러나 전혀 공개되지 않더라도 이미 이를 사용하여 자신만의 웹 구성 요소 라이브러리를 만들 수 있습니다.

Brisa를 사용하여 웹 구성 요소 작성

예를 들어, 항상 그렇듯이 전형적인 예인 카운터의 웹 구성 요소를 작성하겠습니다.

counter-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

Brisa는 선택기를 알기 위해 파일 이름을 사용합니다. 여기서 선택기는 counter-wc입니다.

팁: Brisa는 아직 공개되지 않았지만 TypeScript 유형을 사용하여 웹 구성 요소 작성 방법을 안내할 수 있습니다.

위의 예에서 상태는 신호를 생성하는 데 사용된 다음 .value를 사용하여 JSX 내에서 반응하도록 만듭니다. props는 읽기 전용이기 때문에 특수 신호이기도 합니다. .value는 더 쉽게 사용하고 기본값을 더 쉽게 정의하는 데 사용되지 않습니다. 이는 React와 유사하게 빌드 시간 최적화를 통해 수행됩니다. 신호를 사용하고 있다면 그 반대입니다.

CSS 템플릿 리터럴을 사용하면 색상 속성의 경우 반응적 변경 사항에 반응할 수 있습니다. 이 예제 이외의 CSS 템플릿 리터럴은 반응형 애니메이션을 쉽게 만드는 데 매우 유용합니다. 웹 구성 요소가 Shadow DOM과 함께 작동하므로 CSS가 페이지의 나머지 부분에 영향을 미치지 않는다는 점을 기억하는 것이 중요합니다.

웹 구성 요소 구축

웹 구성 요소를 빌드하려면 다음 명령을 실행해야 합니다.

brisa build -w counter-wc.tsx

이 명령은 2개의 파일을 생성합니다:

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

이 파일은 웹 구성 요소가 아니며, 빌드 시 최대한 가볍게 최적화된 웹 구성 요소의 렌더링 기능일 뿐입니다. (나오는 바이트는 gzip이 없음).

그럼 웹 구성요소를 어떻게 로드하나요?

바닐라 JS 프로젝트에서 웹 구성 요소 로드

이렇게 하려면 brisa/client를 사용하여 HTML에 importmap을 추가한 다음 counter-wc.client.js 파일을 가져와야 합니다.

여기서 렌더링 부분만 각 웹 구성 요소 파일에 포팅되며, 신호와 Shadow DOM을 사용하여 웹 구성 요소를 생성하는 역할을 담당하는 importmap에 정의된 동일한 Brisa 래퍼를 모두 사용합니다.

웹 구성 요소의 SSR

이제 Declarative Shadow DOM 덕분에 웹 구성 요소의 SSR을 수행할 수 있습니다. counter-wc.server.js 파일은 이미 이 동작으로 컴파일되었으므로 이를 서버에서 가져와서 HTML로 렌더링하고 서버 프레임워크에 적용하기만 하면 됩니다.

다음은 JSX를 사용하지 않고 Bun.js 또는 Node.js를 사용한 예입니다.

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `


    
    
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    

`;

console.log(html);

그런 다음 bun run ssr.js를 실행하면 Declarative Shadow DOM을 사용하여 렌더링된 웹 구성 요소가 포함된 HTML을 볼 수 있습니다.

브리사에 대해 더 알려주세요... 제발...

이러한 웹 구성 요소 라이브러리와 Brisa의 통합은 구성 파일을 통해 수행됩니다.

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

이런 방식으로 SSR 및 TypeScript 유형이 프로젝트에 자동으로 통합됩니다. 그리고 모든 서버 구성 요소 또는 다른 웹 구성 요소 내에서 웹 구성 요소를 사용할 수 있습니다.

더 자세한 내용을 알고 싶으시면 브리사 뉴스레터를 구독하여 브리사에 대한 최신 뉴스와 업데이트를 받아보세요. 9월말쯤에는 출시 준비가 완료될 것으로 예상됩니다.

웹 구성 요소 라이브러리 작성자를 위한 참고 사항

Brisa를 사용하여 자신만의 웹 구성 요소 라이브러리를 만들어 보시기 바랍니다. "made with Brisa" 뱃지를 붙이시면 브리사 페이지에 라이브러리 링크를 올려드립니다.

예

이 문서에서 설명한 카운터 예제의 GitHub 저장소를 보려면 이를 살펴보고 자신의 창작물에 대한 참조로 사용할 수 있습니다.

• https://github.com/aralroca/counter-wc

결론

이 게시물에서 우리는 SSR, JavaScript 프레임워크 또는 Vanilla JS와 함께 작동하는 반응형 웹 구성 요소를 구축하는 방법을 살펴보았습니다. 우리는 Brisa를 사용하여 웹 구성 요소를 구축했으며 Vanilla JS 프로젝트에서 이를 로드하는 방법과 SSR을 수행하는 방법을 살펴보았습니다.

이 게시물을 즐기시고 새로운 것을 배우셨기를 바랍니다. 궁금한 점이 있으시면 주저하지 말고 아래 댓글로 문의해 주세요. 기꺼이 도와드리겠습니다.

즐거운 코딩하시고 남은 여름 잘 보내세요! ??