SvelteKit와 함께 사용하기

SvelteKit 프로젝트에 FSD(Feature-Sliced Design)를 적용할 때는 다음 차이를 유의하세요:

• SvelteKit은 routing 파일을 src/routes에 두지만, FSD는 routing을 app 레이어에 포함합니다.
• SvelteKit은 라우트 외 파일을 src/lib에 두도록 권장합니다.

구성 설정

svelte.config.ts에서 기본 경로를 변경해 app layer로 라우팅과 템플릿을 이동하고, src/lib를 설정합니다.

svelte.config.ts

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

/** @type {import('@sveltejs/kit').Config}*/ 
const config = {
   preprocess: [vitePreprocess()],
   kit: {
     adapter: adapter(),
     files: {
       routes: 'src/app/routes',             // routing을 app layer로 이동
       lib: 'src',
       appTemplate: 'src/app/index.html',    // application entry point를 app layer로 이동
       assets: 'public'
     },
     alias: {
       '@/*': 'src/*'                        // src directory alias 설정
     }
   }
};

export default config;

File Routing을 src/app으로 이동

설정 변경 후 폴더 구조는 다음과 같습니다:

├── src
│   ├── app
│   │   ├── index.html
│   │   ├── routes
│   ├── pages                               # FSD pages Layer

이제 app/routes 폴더에 라우트 파일을 두고, pages layer의 컴포넌트를 연결할 수 있습니다.

예시) Home 페이지 추가 예시

1. pages layer에 새 page slice 생성
2. app/routes에 route 파일 추가
3. page component를 route와 연결

CLI 도구로 page slice를 생성합니다:

fsd pages home

pages/home/ui/home-page.svelte를 생성하고 public API로 노출하세요:

src/pages/home/index.ts

export { default as HomePage } from './ui/home-page';

app/routes에 route 파일을 추가합니다:

├── src
│   ├── app
│   │   ├── routes
│   │   │   ├── +page.svelte
│   │   ├── index.html
│   ├── pages
│   │   ├── home
│   │   │   ├── ui
│   │   │   │   ├── home-page.svelte
│   │   │   ├── index.ts

+page.svelte에서 page component를 import 후 렌더링합니다:

src/app/routes/+page.svelte

<script>
  import { HomePage } from '@/pages/home';
</script>

<HomePage/>

참고 자료

• SvelteKit Directory Structure 문서