slot tag 이용하여 svelte 컴포넌트에 HTML TAG 전달받기

Svelte 컴포넌트에 HTML TAG를 그대로 전달해 주고 싶은 경우 있으시죠? 그럴 때엔 slot tag를 이용해 주시면 됩니다.

slot tag를 사용하여 tag 전달하는 방법

컴포넌트 안에 들어갈 내용을 props를 통해서 전달하지 않고 그대로 tag를 모두 전달하고 싶다면, slot을 사용하면 됩니다.

예를 들어, 버튼을 하나 만든다고 가정해 보겠습니다. main.svelte에서 Button 컴포넌트를 이용하는 경우를 두 가지 살펴보겠습니다.

props 이용하기

우선 아래와 같이 props로 전달하는 방식입니다. props를 통해서 전달하기 좋은 것은 상태 값일 것입니다. 대신에 props를 통해서 특정 태그를 전달하거나 하기는 적절하지 않습니다.

<PushButton name="확인하기"/>

이 경우에는 다음과 같이 전달받은 props를 원하는 곳에 출력하게 하면 되겠죠.

<script>
  export let name;
</script>
<button>{name}</button>

slot 이용하기

아래와 같이 태그 사이에 TAG를 적어주고 싶은 경우에 slot을 이용하시면 됩니다.

<PushButton><div>확인하기</div></PushButton>

PushButton 컴포넌트에서 slot 태그를 사용해서 처리해 주시면 됩니다. 이 경우는 아래와 같이 slot을 이용해서 작성할 수 있습니다.

<button><slot/></button>

요약

경우에 따라 적절한 방법을 사용하면 되겠습니다. 그리고 본인이 더 선호하는 방법이 있다면 양자택일이 가능할 땐 원하는 방식을 선택하셔도 되겠죠. 하지만 그보다도 함께 일하는 조직에 코딩 컨벤션이 있다면 그걸 따르는 게 우선이겠죠? 서로 약속을 지키면 작업이 훨씬 수월해지고 디버깅 하기도 용이해집니다.

여하튼 항상 개발자는 고민하는 자리에 있게 됩니다. 어떤 것이 더 나을지도 고민해야 하고, 우리 팀의 약속도 생각해야하죠. 즐거운 개발 하시길 바랍니다.

Svelte 프로젝트 생성 방법

저도 Svelte를 처음으로 접해 보았습니다. 대체 얼마나 대단하길래 다들 난리인건지 말입니다. Svelte 프로젝트 생성 방법 소개합니다.

Svelte란?

Svelte는 React나 Vue 같은 js 개발 프레임워크입니다. 사실 프레임워크라 하는 게 맞을지 모르겠지만, 무엇보다도 Svelte의 가장 큰 특징은 가상 DOM을 사용하지 않고 VanillaJS로 컴파일해 낸다는 것입니다. 그래서 배포를 위한 빌드를 했을 때 js 용량이 상당히 줄어듭니다. 웹 페이지 로딩 시간을 줄일 수 있죠. 그러므로 사용자에게 조금 더 빠르게 페이지를 보여주고자 한다면 Svelte가 도움이 될 것입니다.

Svelte는 Svelte 제작자인 Rich Harris가 만든 RollUp에서 SnowPack으로, 그리고 현재는 에반 유의 Vite를 공식 번들러로 사용하고 있습니다. 자신이 만든 RollUp에 목숨걸지 않고, 길지 않은 기간에 공식 번들러를 저렇게 변경했다는 건 그만큼 변화에 빠르게 대응한 것이라는 점, 그리고 그의 유연성을 엿볼 수 있습니다.

그럼 본격적으로 Svelte 프로젝트를 만들어 보겠습니다.

Svelte 프로젝트 생성을 위한 명령어

매우 간단한 명령어 한 줄이면 Svelte 프로젝트를 생성할 수 있습니다. yarn이나 npm 모두 사용할 수 있습니다. npm을 사용하는 경우에는 npm create vite project_name이라고 입력해 주시면 됩니다. 저는 yarn 명령어를 사용해서 프로젝트를 만들어 보도록 하겠습니다.

yarn create vite project_name

위의 명령어를 입력하면, framework를 어떻게 할 것인지 물어봅니다. Svelte를 선택합니다.

Svelte 프로젝트 생성: 프레임워크 선택
Svelte 프로젝트 생성: 프레임워크 선택

이제 Variant를 선택할 차례입니다. JavaScript, TypeScript, SvelteKit 중에 선택하면 됩니다. 저는 Typescript를 선택해 보겠습니다.

Variant 선택
Variant 선택

Svelte TypeScript 프로젝트가 생겼습니다.

프로젝트 생성 완료
프로젝트 생성 완료

그럼 만들어진 프로젝트 디렉토리로 이동합니다.

cd project_name

이제 프로젝트의 package.json에 따라 node_modules에 관련 패키지를 설치해 주어야 하므로, yarn이나 npm install을 실행해 주도록 합니다.

패키지 설치
패키지 설치

설치가 다 됐다면, 이제 개발 서버를 띄우면 됩니다. 매우 간단하죠. yarn dev라고 입력하면 간단히 서버가 구동됩니다. npm 이용시에는 npm run dev 하시면 됩니다.

yarn dev

개발서버를 띄우면 아래와 같이 포트는 5173에 띄웠고, 외부 접속을 가능하게 하려면 –host 옵션을 사용하라고 나와있습니다. 도움말을 확인하고 싶으면 h를 누르면 됩니다.

개발서버 띄우기
개발서버 띄우기

h를 누르면 단축키를 알려줍니다. 서버 재시작은 r, 서버 url을 확인하고 싶으면 u, 브라우저에서 확인하고 싶으면 o, 개발서버를 종료하고 싶으면 q를 누르면 됩니다.

개발서버 단축키
개발서버 단축키

제대로 브라우저에서 어플리케이션이 작동하는지 확인해 봐야겠죠. 저는 o를 눌러보았습니다. 웹 브라우저가 열리고 아래와 같은 화면이 나오는 것을 확인했습니다.

웹 브라우저에서 기본 프로젝트 구동
웹 브라우저에서 기본 프로젝트 구동

개발을 다 했으면 배포를 해야겠죠. 따라서 배포를 원한다면 yarn build 명령으로 빌드를 수행합니다. 빌드가 완료되면 dist 디렉토리에 배포할 녀석들이 생깁니다. npm 이용시에는 npm run build 명령어를 사용하시면 됩니다.

배포용 빌드 실행
배포용 빌드 실행

Svelte 프로젝트 생성과 개발서버 구동 그리고 배포 방법까지 간단히 살펴봤습니다. 프로젝트 생성부터 매우 간단하네요. Svelte를 이용한 어플리케이션은 가볍다고 하는데, 얼마나 가벼운지 해봐야 알겠죠?

그나저나 React, Vue, Angular는 종착점이 아니었죠. 또, Svelte도 생태계가 무르익을 즈음이면 새로운 녀석이 나타나지 않을까 조심스레 생각해 봅니다. 아니면 Svelte가 종결자가 될 수 있을지 벌써부터 궁금해집니다.

관련 자료

Svelte 공식 홈페이지에 가면 공식 문서를 통해서 자세한 내용 살펴볼 수 있습니다.

같이 읽으면 좋은 글