웹 컴포넌트 Svelte로 만들고 배포까지 (feat. 사이드 프로젝트)

12월 사이드 프로젝트로 카카오톡 광고에 영감을 받아 Adsense-Popover라는 프로젝트를 진행했습니다. Adsense Popover는 페이지의 우측 하단(또는 원하는 위치)에 구글 애드 센스 광고가 슬라이드 하며 나타나는 프로젝트입니다.

오늘은 해당 프로젝트를 진행하면서 사용한 기술인 웹 컴포넌트에 대한 소개와, Svelte를 통해 직접 웹 컴포넌트를 만들어 배포하는 과정을 다뤄보겠습니다.

웹 컴포넌트란?

웹 컴포넌트는 브라우저 상에서 커스텀 태그 (Custom Elements)를 만들 수 있게 해주는 기술입니다. 브라우저의 div, span과 같은 표준 태그 외에 본인이 만든 커스텀 태그를 사용할 수 있습니다.

<my-component aProp="aProp" ></my-component>

웹 컴포넌트를 왜 사용하나요?

웹 컴포넌트를 사용하면 외부 개발자들에게 쉽게 컴포넌트를 배포할 수 있습니다. React, Vue 등과 같은 라이브러리에 의존하지 않기 때문에, 해당 프레임워크를 사용하지 않는 경우에도 해당 컴포넌트를 사용할 수 있습니다. 티스토리나 Oopy 같은 외부 서비스를 사용하는 경우에 React나 Vue를 직접 사용하는 것은 쉽지 않습니다. 이 경우에 웹 컴포넌트를 이용하면 이러한 플랫폼에서도 만들어진 컴포넌트를 위젯형태로 손쉽게 이용할 수 있습니다.

Adsense-Popover의 경우 아래와 같은 코드만 페이지에 붙여 넣으면 해당 컴포넌트를 바로 이용할 수 있습니다.

<script
    type="module"
    src="https://cdn.jsdelivr.net/gh/sjquant/adsense-popover@v0.1.0/dist/adsense-popover.min.js"
  ></script>
<adsense-popover
  layoutKey="<your-layout-key>"
  client="<your-client>"
  slot="<your-slot>"
  format="<your-format>"
></adsense-popover>

Svelte로 웹 컴포넌트 만들기

Svelte 프레임워크는 웹 컴포넌트 만들기에 최적화되어 있습니다. 빌드 시에 의존성이 함께 설치되는 Vue, React 등의 프레임워크와 달리 Svelte는 빌드 시에 Svelte에 대한 의존성이 사라지고 바닐라 자바스크립트 코드로 변환됩니다. 이로 인해 더 작은 번들 사이즈를 가지게 되고, 브라우저가 처리해야 할 작업을 줄여줌으로써 성능을 최적화할 수 있습니다.

Vue나 React에 대한 지식이 있다면 학습할 것도 크게 없습니다. 저도 주로 사용하는 프론트엔드 프레임워크는 Vue이지만 따로 Svelte를 학습하지 않고 Adsense-Popover 프로젝트를 시작했습니다. (ChatGPT의 도움이 크긴 했습니다.)

그럼 Svelte로 웹컴포넌트를 만드는 과정을 차근차근 살펴보겠습니다.

설치 및 프로젝트 구성

우선 vite로 svelte 프로젝트를 생성합니다.

npx create-vite <프로젝트명> --template svelte

typescript를 쓰고 싶으시다면 아래와 같이 입력해 주시면 됩니다.

npx create-vite <프로젝트명> --template svelte-ts

<프로젝트명>에 작성한 이름으로 폴더가 생성됩니다.

웹 컴포넌트 생성(개발)

웹 컴포넌트라고 개발 과정이 크게 다를 게 있는 것은 아닙니다. components 폴더에 웹 컴포넌트로 사용할 컴포넌트를 생성하고 개발하시면 됩니다. 여기서는 MyComponent.svelte라는 이름을 사용하겠습니다.

컴포넌트 개발이 완료되면 해당 컴포넌트를 커스텀 엘리먼트로 사용할 것을 명시해줘야 합니다. 컴포넌트 파일 제일 상단에 아래 코드를 입력해 주세요.

<!--components/MyComponent.svelte-->

<svelte:options
  customElement={{
    tag: "my-component",
  }}
/>

tag 부분에 지정한 이름은 실제 배포했을 때 사용되는 태그의 이름입니다. 이 외에도 Svelte 문서 (component-options)에서 다양한 옵션을 확인할 수 있습니다. 특별한 경우가 아니라면 tag 옵션으로 충분합니다.

빌드

컴포넌트를 작업이 마무리되었다면, 해당 컴포넌트를 배포할 수 있는 형태로 빌드해야 합니다.

우선 components 폴더에 index.js 파일을 생성하여 해당 컴포넌트를 export 해줍니다.

// components/index.js

export { default as MyComponent } from "./MyComponent.svelte";

이후, vite.config.js를 통해 빌드 설정을 아래와 같이 변경해 줍니다. 아래 설정에 대한 자세한 설명은 생략하겠습니다.

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { transform } from "esbuild";
import pkg from "./package.json";

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
      },
    }),
    minifyEs(),
  ],
  build: {
    outDir: "dist",
    emptyOutDir: true,
    lib: {
      entry: "src/components/index.js",
      formats: ["es", "esm", "umd"],
      name: pkg.name.replace(/-./g, (char) => char[1].toUpperCase()),
      fileName: (format) =>
        ({
          es: `${pkg.name}.js`,
          esm: `${pkg.name}.min.js`,
          umd: `${pkg.name}.umd.js`,
        }[format]),
    },
  },
});

function minifyEs() {
  return {
    name: "minifyEs",
    renderChunk: {
      order: "post" as const,
      async handler(code, chunk, outputOptions) {
        if (
          outputOptions.format === "es" &&
          chunk.fileName.endsWith(".min.js")
        ) {
          return await transform(code, { minify: true });
        }
        return code;
      },
    },
  };
}

마지막으로 아래의 명령어를 입력해 컴포넌트를 빌드합니다.

yarn build

dist 폴더에 배포 파일이 생긴 것을 확인해 주세요. 이제 배포를 위한 준비가 마무리되었습니다.

jsDelivr로 배포하기

Svelte로 웹 컴포넌트도 만들었고, 빌드도 했습니다. 이제 실제 해당 컴포넌트를 사용할 수 있도록 배포를 해봅시다. 직접 CDN 서버를 구성하거나 다른 서비스를 이용해도 되지만, 여기서는 가장 유명한 CDN 서비스 중 하나인 jsDelivr를 이용하겠습니다.

jsDelivr 배포에는 별다른 과정이 있지 않습니다. 해당 코드를 github 레파지토리에 업로드하고 릴리즈만 하면 됩니다. (물론 해당 레파지토리는 public으로 열려있어야 합니다. 만약 위에서 생성한 빌드파일이 github에 올라가지 않았다면, gitignore 파일에서 dist 부분을 제거해 주세요.) 그럼 아래와 같은 jsDelivr CDN 주소를 이용할 수 있습니다.

https://cdn.jsdelivr.net/gh/<깃헙유저네임>/<레파지토리명>@<태그>/dist/my-component.min.js

이제 위에서 생성한 jsDelivr 주소를 활용하여 아래의 코드를 head 태그에 넣어주면 커스텀 태그를 이용할 수 있습니다.

<script
    type="module"
    src="https://cdn.jsdelivr.net/gh/<깃헙유저네임>/<레파지토리명>@<태그>/dist/my-component.min.js"
  ></script>

Adsense-Popover는 아래와 같이 사용법을 안내하고 있습니다.

자, 이제 모든 과정이 마무리되었습니다!

마무리

이번에 Adsense-Popover 프로젝트를 진행하면서 웹 컴포넌트에 대한 큰 매력을 느꼈습니다. 최근에는 티스토리나 Oopy 등과 같이 외부 서비스를 활용하는 사업체나 개인들이 많아지고 있기 때문에, 해당 기술이 이러한 사람들의 니즈를 많이 채워줄 수 있다고 생각합니다. 여러분들도 해당 기술을 활용하여 다양한 프로젝트를 시도해 보시면 좋겠습니다.

긴 글 읽어주셔서 감사합니다.