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
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)