[Svelte] Getting Started with SvelteKit

※ 2022.12.01

오랫만에 Svelte를 다시 접해보니 많은 것들이 변해 있더라고요.

그래서 현 시점을 기준으로 다시 정리를 해봅니다.

Create Project

SvelteKit을 사용하여 프로젝트를 생성해보겠습니다.

원래는 yarn을 사용했었지만, yarn도 modern yarn으로 버전업이 되면서 많은 것이 달라졌습니다.

가장 큰 변화는 node_modules를 사용하지 않는 것입니다.

이로 인하여 당연시 해당 폴더를 참조하던 것들이 동작을 제대로 못하게 되버렸습니다.

변경해서 사용할 수는 있지만 추가적인 노력이 들어가야 하고, VSCode 역시 추가 조작을 해야만 되는 상황이라 현재로서는 npm을 쓰시는 것이 조금 더 편하게 사용하실 수 있을 거에요.

$ npm create svelte@latest [app_name]

app_name을 입력하면 해당 이름의 폴더를 생성한 후 프로젝트를 생성하고, 입력하지 않으면 현재 폴더에 프로젝트를 생성합니다.

옵션을 설정하면 프로젝트가 생성이 됩니다.

옵션은 굳이 저를 따라하지 않으셔도 되고, 프로젝트에 따라 알맞게 설정하시면 되요.

Install Dependent Modules

다음은 기본 모듈 설치입니다.

$ npm install

저는 현재 node.js v18.12.1을 사용하고 있고, 별다른 문제 없이 설치가 됩니다.

Install and Configure TailwindCSS

CSS용으로 개인적으로 좋아하는 TailwindCSS를 사용해보겠습니다.

먼저, 관련 모듈 설치를 합니다.

$ npm install -D tailwindcss postcss autoprefixer svelte-preprocess

이제 초기화를 해줍니다.

$ npx tailwindcss init tailwind.config.cjs -p

다음으로 설정을 해줍니다.

명시한 부분을 찾아서 수정하시면 됩니다.

// svelte.config.js

preprocess: preprocess({ postcss: true }),

// tailwind.config.cjs

content: ['./src/**/*.{html,js,svelte,ts}'],

다음 파일은 생성 후, 입력해주세요.

/* src/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure VSCode

제가 사용하고 있는 VSCode 에디터를 기준으로 유용한 extension을 공유드립니다.

설치하시면 유용하실 거에요.

• svelte.svelte-vscode
• esbenp.prettier-vscode
• dbaeumer.vscode-eslint

마지막으로 다음 설정을 넣어두시면, 저장을 할 때마다 알아서 formatter가 실행되니까 편하게 사용하실 수 있습니다.

// .vscode/settings.json

{
  "editor.formatOnSave": true
}

Run Application

이제 예제를 실행시켜봅시다.

$ npm run dev -- --open

깔끔하게 잘 실행이 되네요.

이제, TailwindCSS를 사용해 보겠습니다.

다음의 파일을 생성 후, 내용을 채워주세요.

// src/routes/+layout.svelte

<script>
  import '../app.css';
</script>

<slot />

이제, 페이지를 꾸며줍니다.

<h1>Welcome to SvelteKit</h1>
<span class="font-bold italic text-green-700">Test String</span>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

적용이 잘 되네요.

Wrap Up

Svelte가 많이 바뀌었는데, 관련해서 자료들이 있지는 않아 새로이 독학을 해보고 있습니다.

실무에선 어떤 식으로 프로젝트 개발을 하는지, 어떤 식으로 컴포넌트 관리를 하는지, 어떤 식으로 테스트를 작성하는지 등 궁금한 게 많긴 한데 알 방법이 없어 이런 부분에 대해 목마름은 있네요.

알게된 것들을 쉽고 간단한 예제로 계속 포스팅하겠습니다.