Svelte 입문기 with SvelteKit (Next.js)

FrontFramework 를 아직도 사용하지 않고 있었다.
그동안의 저장창고에서 빼서 쓰는게 훨씬 다양하고 빠르기도 했었기 때문이다.
항상 마음속으로만 생각하고 있었던 Front...

예전에 Angular 부터 React 들을 접해 왔지만..
그 어느 회사나 집단에서도 사용하지않고 받아들여지지 않았다.
혼자 꾸준히 하면 되지 않냐라고 하겠지만...
현실에 우선순위가 밀려나고 있었다.

하지만 이젠...
협업위주로 진행하면서 그냥 내가 강제로 도입해보기로 했다.

시스템 구성

Backend : Node.js
Front : Svelte.js

Svelte 로 결정한 이유는 단순했다.
짧은 코드와 양방향 바인딩, 그리고 DOM 에 대한 속도 이다.

Svelte Official Site

Svelte
SvelteKit

SvelteKit

Svelte Framework 는 SPA 방식이다.
모든것을 만족시켜주지 못한다는걸 명심해야 한다.
우리가 사이트를 만들기 위해서는 SPA 로만??? 난 절대 불가능하다고 생각한다.
클라이언트와 결정권자들은 필요로하는 요구사항들이 많기때문에!!
우린 네이버가 아니지만 네이버를 원한다.

이 요구를 SvelteKit 이 해결해줄 수 있다😊

1. Build Optimizations
2. Offline support
3. Prefetch
4. Configurable Rendering
5. SSR
6. CSR
7. SSG

SSR까지 지원하고 React 에 Next.js, Vue에 Nuxt.js 의 역할을 해준다.
또한 Vite 를 내장하고 있어서 코드를 수정하는 순간 바로 결과를 보여준다.
컴파일 속도? Vue 와 비교해도 감탄이 나온다.

Routing - 라우팅

사이트를 구성하기 위하여 Routing 은 필수 이다.
Svelte 는 filesystem-base-route 를 사용하기에 routes 폴더에 파일을 생성하는것으로 Route를 자동으로 처리한다.
또한 2Depth 라우팅, 즉 /product/1234 의 형태가 필요하다면 route/product 폴더를 만들어서 사용하면 된다.
물론 동적 라우팅도 가능하다. 아래 예시를 보면 금방 이해가 될것이다.

Route 예시
/					: routes/index.svelte
/aboute				: routes/about.svelte
/product			: routes/product.svelte
/product			: routes/product/index.svelte
/product/app		: routes/product/app.svelte
/product/[동적 UID]	: routes/product/[id].svelte

Layout - 레이아웃

전체적인 GNB, Footer 와 Sub GNB 가 필요할때가 종종 있다.
Kit 을 사용하지 않는다면 일일히 복붙?? 어휴 생각만해도 귀찮다.
우리는 여지껏 그렇게 작업하지 않았다. 최소한 import, include 같은 행위드를 했으니 말이다.

이렇게 레이아웃 파일을 만들어주면 전체 적용을 할 수 있다.

routes/__layout.svelte

단 각 페이지별 내용을 불러와서 적용을 하려면 한가지 코드를 꼭 빼먹지말고 추가해줘야 한다.

<slot />

레이아웃 코드와 함께 작성한다면 이러한 코드 형태가 되어야 한다.

<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/product">Product</a>
</nav>

<slot></slot>

Nested Layout

전체 레이아웃이 아닌 특정 라우트에만 적용하는 코드들이 있다면 이 기능을 사용하면 된다.
routes/product/__layout.svelte 를 만들면 /product 하위 페이지들에만 적용되는 Layout 이 된다.

__layout.reset.svelte 를 만들면 영향을 받지 않고 기본이 적용된다.

Error page

Deploy 시 잘못된 링크나 에러가 발생한다면 원 코드를 보여줄 수는 없다.
이쁘장하게 꾸민 에러페이지나 오류가 났다고 사과하며 친절하게 보여주고 싶다.

__error.svelte

에러파일을 만들어서 꾸며 놓으면, 에러 발생시 설정된 내용이 출력된다.
또한 error 구문과 status code 를 캐치하여 처리하려면 module 을 사용하여 load 페이지 함수에서 값들을 처리할 수 있다.
참고만 하고 나중에 한번 더 다루어 봐야겠다.

<script context="module">
	/** @type {import('@sveltejs/kit').ErrorLoad} */
	export function load({ error, status }) {
		return {
			props: {
				title: `${status}: ${error.message}`
			}
		};
	}
</script>

<script>
	export let title;
</script>

<h1>{title}</h1>