my-project/
├ src/ -> 핵심폴더가 기재되어 있음
│ ├ lib/ -> 라이브러리를 별칭으로 가져올 수 있고, 배포용 패키징 가능한 라이브러리 코드를 포함한다.
│ │ ├ server/ -> 서버 전용 라이브러리 코드를 포함한다. $lib/server 라는 별칭을 사용해 가져올 수 있다.
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/ -> 앱에 필요한 동적 경로 관련 처리를 한다.
│ │ └ [your param matchers]
│ ├ routes/ -> 애플리케이션 경로 라우팅을 관리하는 파일이다.
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ └ hooks.server.js
├ static/ -> 이미지 같은 외부 파일을 관리한다.
│ └ [your static assets]
├ tests/ -> 테스트 코드를 관리한다.
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js
내가 제일 궁금했던 것은 데모 프로젝트를 보면 + prefix가 붙은 파일이 있는데 +가 붙은 이유는 라우팅 파일을 의미한다고 한다.
이 라우팅 파일은 정적 라우팅으로 처리가 되는데, 폴더명에 있는 이름대로 라우팅을 처리해 준다.
Routes
레퍼런스에 따르면 +page.svelte, +page.js, +page.server.js, +error.svelte, +layout.svelte, +layout.js, +layout.server.js, +server.js, $types 파일이 있다.
프로젝트에서 라우팅 파일을 구현하고자 한다면 +를 붙여서 적용해야 할듯하다.
+page
+page.svelte 파일에서는 초기 요청 페이지를 정의한다고 함.
초기 페이지 요청 시에는 SSR+CSR, 이후 요청은 CSR로 동작한다.
1. +page.velte
<h1>Hello and welcome to my site!</h1>
<a href="/about">About my site</a>
2. +page.svelte
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
<h1>{data.title}</h1>
<div>{@html data.content}</div>
+page.js 파일에서는 렌더링 전에 데이터를 로드해야 될 때 처리하는 곳이라고 함
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
if (params.slug === 'hello-world') {
return {
title: 'Hello world!',
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
};
}
throw error(404, 'Not found');
}
+page.server.js 파일에서는 서버에서만 처리할 수 있는 내용을 담당한다고 함
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
const post = await getPostFromDatabase(params.slug);
if (post) {
return post;
}
throw error(404, 'Not found');
}
+error
스벨트에서는 기본 오류 페이지를 제공한다고한다. 그래서 +error.svlete 에는 기본 오류 페이지를 구성하고 있음
실제로 로컬에서 페이지 잘못 수정할 때 500 페이지가 확인되었는데 그 부분이지 싶다. 사용자 지정 오류 페이지로도 구성할 수 있을테니 확인봐야겠다.
<script>
import { page } from '$app/stores';
</script>
<h1>{$page.status}: {$page.error.message}</h1>
+layout
+layout.svelte는 모든 페이지의 레이아웃이 되는 컴포넌트이다. 레이아웃 영역 외 페이지 컴포넌트가 들어갈 위치는 <slot />으로 지정한다.
+layout.js 에서는 +page.js처럼 +page.svelte에 있는 데이터를 가져와서 처리할 수 있는 것과 동일한 구조이다.
+layout.svelte에서 처리하고자 하는 데이터를 +layout.js에서 호출 후 처리한다.
+layout.server.js 에서는 아래와 같이 설명하는데 무슨말인지 잘 모르겠어서 다시 확인하려고함
대강 이해한바로는 +page.server.js 와 유사한 구조인것으로 보임
To run your layout's load function on the server, move it to +layout.server.js, and change the LayoutLoad type to LayoutServerLoad.
Like +layout.js, +layout.server.js can export page options — prerender, ssr and csr.
+server
서버 단에서 preload할 페이지 props이다. +page.server.js와 마찬가지로 load 함수 호출 및 prerender, ssr, csr export 가능하다.
+server.js 에서는 API 경로를 정의할 수 있다.
$types
$types파일은 타입스크립트나 자바스크립트에서 타입체크하는 경우 스벨트 키트에서 자동으로 생성해주는 파일이며, 타입체크를 해주는 용도로 사용한다고 한다.
svelte가 svelte인 이유
svelte 뜻이 궁금해서 찾아보게 되었는데 svelte는 날씬한 이라는 뜻이다.
왜 이 뜻을 가진 단어를 기술 이름으로 사용하게 되었는지 찾아보니까 다른 SPA와 다르게 가벼운 기술이다라는 것을 강조하기 위해 채택한 것으로 보인다.
기존에 웹프론트엔드 프레임워크는 플러그인 설치해서 무겁게 갔다면, 스벨트는 그런 것 다 빼고 순수 자바스크립트를 이용해서 가볍게 가겠다는 것을 이름에 담은 것이다.
