svelte kit 폴더 구조 및 설정

프로젝트 구조

static - 정적인 요소들

• image
• video
• audio
• fonts
• favicon

src - 핵심 폴더

• lib
  1. componets

  2. css/scss
  3. utils
  4. imges
  5. server
  6. store

• api

• params

• routes => 라우팅을 담당하는 폴더 *중요
  1. 라우팅 역할

  2. +layout.svelte.
  3. +layout.server.ts,js
  4. +page.svelte
  5. +page.ts,js
  6. /api/ -> 페이지에서 처리하는 api 관련 역할 분리 처리

• app.js

• app.html

• .env -> key 값 저장

  API_KEY = secret key;
  PUBLIC_KEY = public key;

• app.d.ts -> 지정 타입 관련 분리 처리 가능

  	```

  // See https://kit.svelte.dev/docs/types#app
  // for information about these interfaces
  declare global {
  namespace App {
  interface Error {
  message?: string;
  code?: string;
  }
  interface Locals {
  user?: {
  id: number;
  name: string;
  };
  }
  // interface PageData {
  // products?: { id: number }[];
  // }
  // interface Platform {}
  }
  }

  export {};

vscode

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),
    preprocess: preprocess(
		{
			scss: {
				prependData: '@use "./src/lib/scss/functions";  @use "@unsass/breakpoint";'
			}
		}
	),


	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter(),
		// files: {
		// 	routes: './src/pages'
		// }
		alias: {$components: 'src/lib/components'},
		prerender: {
			crawl: true,
			entries: ['*']
		}
	},
};

export default config;

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

vscode 익스 텐션 스벨트 관련

https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode
https://marketplace.visualstudio.com/items?itemName=ardenivanov.svelte-intellisense
https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets
https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets
https://marketplace.visualstudio.com/items?itemName=RafaelMartinez.svelte-preview