svelte 설정

kit npm 설치

• npm create svelte@latest

.prettierrc

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 100,
	"plugins": ["prettier-plugin-svelte"],
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
	"svelteSortOrder" : "options-scripts-markup-styles",
	"svelteStrictMode": true,
	"svelteBracketNewLine": true ,
	"svelteAllowShorthand": false,
	"svelteIndentScriptAndStyle": false
}

추가 필요 한 사항

scss, postcss, alias 기본 설정
tailwindcss 선택 사항
기타 라이브러리 적용여부

page, router, layout, components, assets,

페이지 폴더 아래 +page.svelte 가 해당 페이지 파일
router 부분은 /page 링크 연결 필요
lyaout은 src 최상단 부분 +layout.svelte 에서 으로 연결
components는 다른 페이지 영역에서 공통 제어
assets은 scss,css,images 등 추가 파일 연결

문법 요소

import {
		onMount,
		onDestroy,
		beforeUpdate,
		afterUpdate,
		tick,
		setContext,
		getContext,
		hasContext,
		getAllContexts,
		createEventDispatcher
	} from 'svelte';
	import { writable, readable, derived, get, set, readonly } from 'svelte/store';
	import { tweened, spring } from 'svelte/motion';
	import {
		fade,
		blur,
		fadeIn,
		fadeOut,
		fadeInOut,
		fly,
		slide,
		scale,
		draw,
		crossfade,
		flip
	} from 'svelte/animate';
	import {
		ease,
		back,
		bounce,
		circ,
		cubic,
		elastic,
		expo,
		quad,
		quart,
		quint,
		sine
	} from 'svelte/easing';
	require('svelte/register');