Skip to content

Commit 63afffc

Browse files
authored
docs: svelteKit page translated into Korean (#772)
* docs: svelteKit page translated into Korean * docs: svelte kit page feedback
1 parent b36a2ca commit 63afffc

File tree

1 file changed

+95
-0
lines changed

1 file changed

+95
-0
lines changed
Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# SvelteKit와 함께 사용하기
2+
3+
SvelteKit에서 FSD(Feature-Sliced Design) 아키텍처를 구현할 수 있지만, 몇 가지 구조적 차이점이 있습니다:
4+
5+
- SvelteKit은 routing 파일을 `src/routes`에 배치하지만, FSD에서는 app Layer에 포함됩니다
6+
- SvelteKit은 routing 외 파일을 src/lib에 배치하도록 권장합니다
7+
8+
## 구성 설정
9+
10+
```ts title="svelte.config.ts"
11+
import adapter from '@sveltejs/adapter-auto';
12+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
13+
14+
/** @type {import('@sveltejs/kit').Config}*/
15+
const config = {
16+
preprocess: [vitePreprocess()],
17+
kit: {
18+
adapter: adapter(),
19+
files: {
20+
routes: 'src/app/routes', // routing을 app Layer로 이동
21+
lib: 'src',
22+
appTemplate: 'src/app/index.html', // application entry point를 app Layer로 이동
23+
assets: 'public'
24+
},
25+
alias: {
26+
'@/*': 'src/*' // src directory alias 설정
27+
}
28+
}
29+
};
30+
31+
export default config;
32+
```
33+
34+
## File Routing을 `src/app`으로 이동
35+
36+
Configuration 변경 후 구조:
37+
38+
```sh
39+
├── src
40+
│ ├── app
41+
│ │ ├── index.html
42+
│ │ ├── routes
43+
│ ├── pages # FSD pages Layer
44+
```
45+
46+
이제 route 파일을 `app` Layer의 routes 폴더에 배치하고, `pages` Layer와 연결할 수 있습니다.
47+
48+
예시) Home Page 추가 과정:
49+
50+
1. `pages` Layer에 새 Page Slice 추가
51+
2. `app` Layer의 `routes`에 route 생성
52+
3. Slice의 Page를 route와 연결
53+
54+
[CLI tool](https://github.com/feature-sliced/cli)을 사용한 Page Slice 생성:
55+
56+
```shell
57+
fsd pages home
58+
```
59+
60+
`home-page.vue` 파일을 UI Segment에 생성하고 public API로 노출:
61+
62+
63+
```ts title="src/pages/home/index.ts"
64+
export { default as HomePage } from './ui/home-page';
65+
```
66+
67+
`app` Layer의 routes에 route 추가:
68+
69+
```sh
70+
├── src
71+
│ ├── app
72+
│ │ ├── routes
73+
│ │ │ ├── +page.svelte
74+
│ │ ├── index.html
75+
│ ├── pages
76+
│ │ ├── home
77+
│ │ │ ├── ui
78+
│ │ │ │ ├── home-page.svelte
79+
│ │ │ ├── index.ts
80+
```
81+
82+
Page Component 연결:
83+
84+
```html title="src/app/routes/+page.svelte"
85+
<script>
86+
import { HomePage } from '@/pages/home';
87+
</script>
88+
89+
<HomePage/>
90+
```
91+
92+
## 참고 자료
93+
94+
- [SvelteKit Directory Structure 문서](https://kit.svelte.dev/docs/configuration#files)
95+

0 commit comments

Comments
 (0)