프레임워크 없이 만든 프론트엔드에 작은 부분부터 Svelte 도입하기
들어가며
프론트엔드 개발을 프레임워크 없이 구현하다 보면, 복잡한 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="소희"></say-name-button>
이렇게 Svelte 컴포넌트를 점진적으로 도입하면, 기존 프로젝트 구조를 크게 변경하지 않으면서도 프레임워크의 장점을 활용할 수 있습니다.