Tauri v2.0 + Svelte v5.0 + Tailwindcss v4.0 초기셋업하기 • Code & Beyond: Eugene’s Dev Journey

배경#

작년 Tauri v2.0 버전이 정식 릴리즈 되었습니다. Electron 을 위협하던 프로젝트가 어느세 Mobile APP 개발까지 가능하게 된 것입니다.

그래서 살펴보고 있던 와중에 최근 Svelte 5.0 이 출시되면서 새로운 Svelte CLI 이 등장하고, 얼마전에는 Tailwind v4.0 버전이 출시되었습니다.

그래서 Tauri v2.0 + Svelte v5.0 + Tailwind v4.0 버전으로 프로젝트 초기 셋업하는 방법을 간단히 살펴볼까합니다.

준비 (Rust 설치)#

Rust 를 미리 설치하면 됩니다.
Rust Version Manager 로는 mise ↗ 를 추천드립니다.
아래 문서를 확인하여 각 OS에 맞는 과정을 살펴보시기 바랍니다.

Prerequisites

The cross-platform app building toolkit (v2.tauri.app)

Tauri 앱 생성 (with. SvelteKit)#

What is Tauri?

The cross-platform app building toolkit (v2.tauri.app)

사이트에도 간단명료하게 잘 소개되어있습니다. 셋업 스택이 최신버전임을 고려하여 패키지 매니저도 Bun 으로 선택하여 진행해보겠습니다.

bun create tauri-app

shell

Create Tauri APP

설치 과정 중에 Svelte 를 선택하게되면, 자동으로 Sveltekit 으로 셋업됩니다.

Tailwindcss 셋팅#

아래 공식홈페이지를 참고해보면, v4.0 버전이 되면서 설정과정이 더 간단해졌습니다. 참고하여 진행하면 더 편하실 겁니다.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. (tailwindcss.com)

with Svelte CLI#

새로 출시된 Svelte CLI ↗의 명령어는 sv 입니다. 참고로 이전버전까지는 svelte-add 라는 명령어로 진행했었습니다.

게다가 Tailwind v4.0 이 되면서 셋팅이 더 간단해졌습니다.

bunx sv add tailwindcss

shell

Tailwindcss 적용 테스트#

간단하게 코드를 수정하여 적용이 됬는지 확인해보겠습니다.

src/routes/+page.svelte

<script>
  // ...
</script>

<main class="container"> <!-- 제거 -->
<main class="min-w-[320] flex flex-col mx-auto items-center justify-center p-8"> <!-- 추가 -->
  <h1>Welcome to Tauri v2 + Svelte v5 + Tailwindcss v4</h1> <!-- 변경 -->
  
  <!-- ... -->
</main>

<style>
  /* ... */
  
  /* 더 이상 필요 없으니 삭제! */ 
  .container { 
    margin: 0;
    padding-top: 10vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  
  /* ... */
</style>

svelte

코드를 간단히 수정한 뒤에 아래 명령어를 이용해서 실행해보면 모든 것이 잘 적용된 것을 확인할 수 있습니다.

bun dev

shell

Biome 설정#

eslint/prettier 는 TS/JS 다루는 분들이라면 모르는 분들이 없을 것 같습니다. 특히 prettier 는 꾀나 지배적인 위치를 차지하고 있는 Code Formatter 입니다.

이 prettier 팀이 얼마전 “Write a pretty printer in Rust” 라는 대회 ↗를 개최했었습니다.

prettier challenges

바로 여기서 우승한 프로젝트가 Biome 입니다.

Biome

Format, lint, and more in a fraction of a second. (biomejs.dev)

더 자세한 이야기는 다음에 하도록하고, 이제 이 biome 를 설정해보겠습니다.

먼저 프로젝트에 biome 패키지를 추가해줍니다.

bun add --dev --exact @biomejs/biome

shell

그리고 biome 를 초기화해줍니다.

bunx biome init --jsonc

shell

주석을 달기 쉽게 하기 위해 jsonc 파일로 생성했습니다.

마지막으로 svelte 를 위해 한 가지만 더 설정해주겠습니다. biome.jsonc 파일의 마지막에 overrides 옵션으로 svelte 파일에 대해 lint 규칙을 따로 추개줍니다.

이 옵션을 추가해주는 이유는 간단합니다.

svelte 의 bind:value 에 사용하려고 변수를 만들 때, 재할당을 위해서 let 으로 선언해야 합니다. 그런데 biome 때문에 const 로 자동 포맷팅됩니다.

이 문제를 방지하기 위해 추가해주는 것 입니다.

biome.jsonc

{
	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
	"vcs": {
		"enabled": false,
		"clientKind": "git",
		"useIgnoreFile": false
	},
	"files": {
		"ignoreUnknown": false,
		"ignore": []
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	},  
  "overrides": [ 
		{
			"include": ["*.svelte"],
			"linter": {
				"rules": {
					"style": {
						"useConst": "off"
					}
				}
			}
		}
	]
}

jsonc

Biome 옵션의 경우에는 초기셋팅이라 useConst 만 추가했지만, 사용하시다가 원하는 옵션을 더 추가하면 됩니다. 그리고 자세히 보면 linter 옵션이 있습니다. 바로 eslint 까지 대체할 수 있는 것입니다.

이젠 복잡하고 느린 eslint/prettier 를 벗어나, 간단하고 빠른 biome 와 함께 즐거운 개발을 하시면 되겠습니다.

마무리#

이제 Tauri v2.0 + Svelte v5.0 + Tailwind v4.0 설정이 완료되었습니다.

최근 Electron 대안으로 많이들 살펴보시는 것 같습니다. 새로시작하는 프로젝트라면 최신버전으로 셋팅하고, 즐거운 개발로 시작하셨으면 좋겠습니다.