프레임워크 없이 만든 프론트엔드에 작은 부분부터 Svelte 도입하기

정한 Rycont2024-04-12 12:55

들어가며

프론트엔드 개발을 프레임워크 없이 구현하다 보면, 복잡한 UI와 데이터 흐름을 관리하기 어려워지는 경우가 많습니다. 이럴 때 프레임워크를 도입하는 것이 좋지만, 기존 프로젝트 전체를 재작성하기에는 큰 부담이 될 수 있습니다.

이번 글에서는 프레임워크 없이 작성된 프론트엔드에 Svelte를 점진적으로 도입하는 방법에 대해 다루어 보겠습니다. Svelte는 WebComponent 호환을 지원하므로, 기존 프로젝트 구조에 큰 변화 없이 컴포넌트를 점진적으로 적용할 수 있습니다.

사전 준비

다음과 같은 파일의 버튼을 Svelte 컴포넌트로 분리해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      button {
        padding: 0.5rem;
        background: #fefefe;
        border: 1px solid #d0d0d0;
        border-radius: 0.25rem;
      }
    </style>
  </head>
  <body>
    <button class="say-name" data-name="재우">이름 말하기</button>
    <button class="say-name" data-name="수열">이름 말하기</button>
    <script>
      const sayNames = document.getElementsByClassName('say-name');
      for (const button of sayNames) {
        button.addEventListener('click', () => {
          alert(button.getAttribute('data-name'));
        });
      }
    </script>
  </body>
</html>

Vite 설치하기

Vite는 프론트엔드 개발 및 빌드 도구로, Svelte 컴포넌트를 쉽게 통합할 수 있습니다. Vite는 빠른 빌드 속도와 다양한 플러그인을 제공합니다.

필요한 라이브러리를 설치합니다:

pnpm add -D vite @sveltejs/vite-plugin-svelte svelte glob

설정

그 다음 package.json에 다음과 같은 스크립트를 추가합니다

"dev": "vite",
"build": "tsc && vite build",

package.json의 type 속성을 module로 설정합니다

"type": "module"

vite.config.ts 파일을 만들고 다음과 같이 설정합니다

import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite'
import { resolve } from 'path'
import { glob } from 'glob'

const pages = await glob('**/*.html', {
    ignore: ['node_modules/**', 'dist/**'],
})

const entryPoint = Object.fromEntries(
    pages.map((path) => [path, resolve(__dirname, path)])
)

export default defineConfig({
    appType: 'mpa',
    build: {
        target: 'ESNext',
        rollupOptions: {
            input: entryPoint,
        },
    },
    plugins: [
        svelte({
            preprocess: vitePreprocess(),
            compilerOptions: {
                customElement: true,
            },
        }),
    ],
})

이제 Vite와 Svelte 설정이 완료되었습니다!

Svelte 컴포넌트 만들기

기존 프로젝트에서 버튼 관련 코드를 Svelte 컴포넌트로 만들어 보겠습니다.

<svelte:options customElement="say-name-button" />

<script>
  export let name
</script>

<button on:click={() => alert(name)}>
  이름 말하기
</button>

<style>
  button {
    padding: 0.5rem;
    background: #fefefe;
    border: 1px solid #d0d0d0;
    border-radius: 0.25rem;
  }
</style>

이 Svelte 컴포넌트는 <svelte:options> 태그를 통해 `say-name-button`이라는 이름의 Custom Element로 정의되며, name props를 받아 버튼 클릭 시 해당 이름을 alert로 출력합니다.

HTML에서 불러오기

이제 Svelte 컴포넌트를 기존 HTML 파일에서 사용할 수 있습니다!

<script type="module" src="./say-name-button.svelte"></script>
<say-name-button name="소희">

이렇게 Svelte 컴포넌트를 점진적으로 도입하면, 기존 프로젝트 구조를 크게 변경하지 않으면서도 프레임워크의 장점을 활용할 수 있습니다.