[SvelteKit] 폴더 구조, 파일 역할, 기본 문법

폴더 설명

src/lib/ : 공통으로 사용될 수 있는 라이브러리 파일이나 컴포넌트를 두는 폴더

src/routes : 웹 페이지에 route와 route의 페이지를 정의하는 폴더

---

파일 설명

+page.svelte : 페이지 컴포넌트를 정의하는 파일

+page.ts : 특정 페이지에서 서버 측 로직을 처리할 때 사용하는 파일

+layout.svelte : 여러 페이지에 공통적으로 적용할 레이아웃을 정의하는 파일

+layout.ts : 레이아웃 컴포넌트에 필요한 서버 측 로직을 처리하는 파일

Component.svelte : 페이지에 필요한 컴포넌트의 경우 컴포넌트 명을 파스칼케이스로 작성 (ex. 로그인 버튼 컴포넌트 Login.svelte)

---

기본 문법

SvelteKit은 기본 HTML 문법을 그대로 쓰는 느낌으로 사용할 수 있습니다.

<script>
  let name = 'SvelteKit';
  let count = 0;
  $: double = count * 2;
</script>

<h1>Hello {name}!</h1>
<p>Count: {count}, Double: {double}</p>
<button on:click={() => count++}>Increment</button>

<style>
  h1 {
    color: purple;
  }
</style>

<script> 태그 : 컴포넌트의 로직을 작성

{} : 중괄호를 HTML 태그 안에 사용하여 변수를 템플릿에 넣어서 출력

<style> 태그 : 컴포넌트에 정의할 스타일을 정의

$ : 특정 변수가 변경될 때마다 관련된 로직이 자동으로 실행 (위의 예시의 경우 count가 증가하면 double 값 변경)

 

---

조건부 렌더링

<script>
  let isLoggedIn = false;
</script>

{#if isAdmin}
  <p>Hi Admin!</p>
{/if}

{#if isLoggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please log in.</p>
{/if}

<button on:click={() => isLoggedIn = !isLoggedIn}>
  {isLoggedIn ? 'Logout' : 'Login'}
</button>

 

{# if 조건} {/if} : 조건이 참인 경우 HTML 요소 렌더링

{:else}, {:else if 조건} : else와 else if 사용

---

반복문 렌더링

<script>
  let items = ['Apple', 'Banana', 'Orange'];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

{#each 배열 명 as item명} {/each} : 배열을 같은 태그로 반복하여 출력할 때 사용

 

---

이벤트 리스너 등록

<script>
  function handleClick() {
    alert('Button clicked!');
  }
</script>

<button on:click={handleClick}>Click me</button>

 

on : HTML 태그에 on을 사용하고 발생할 이벤트 명을 작성하여 해당 이벤트가 발생할 때 실행할 함수를 연결

* preventDefault, stopPropagation, once, passive 등 다양한 수식어를 사용할 수 있음