Skip to content

Commit c390a4f

Browse files
authored
docs: slices-segments page translated into Korean (#790)
* docs: slices-segments page translated into Korean * docs: slices-segments page feedback
1 parent 63afffc commit c390a4f

File tree

1 file changed

+75
-0
lines changed

1 file changed

+75
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Slice์™€ Segment
3+
sidebar_position: 2
4+
pagination_next: reference/public-api
5+
---
6+
7+
# Slice์™€ Segment
8+
9+
## Slice
10+
11+
Slice๋Š” Feature-Sliced Design์˜ ๋‘ ๋ฒˆ์งธ ๊ตฌ์„ฑ ๋‹จ์œ„์ž…๋‹ˆ๋‹ค. Slice์˜ ์ฃผ ๋ชฉ์ ์€ ์ œํ’ˆ, ๋น„์ฆˆ๋‹ˆ์Šค, Application ๊ด€์ ์—์„œ ์ฝ”๋“œ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ๊ทธ๋ฃนํ™”ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
12+
13+
Slice ์ด๋ฆ„์€ ํ‘œ์ค€ํ™”๋˜์–ด ์žˆ์ง€ ์•Š๊ณ  Application์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋„๋ฉ”์ธ์— ๋”ฐ๋ผ ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค. ์˜ˆ์‹œ:
14+
- ์‚ฌ์ง„ ๊ฐค๋Ÿฌ๋ฆฌ: `photo`, `effects`, `gallery-page`
15+
- ์†Œ์…œ ๋„คํŠธ์›Œํฌ: `post`, `comments`, `news-feed`
16+
17+
Shared์™€ App Layer๋Š” Slice๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Shared๋Š” Business Logic์„ ํฌํ•จํ•˜์ง€ ์•Š๊ณ , App์€ Application ์ „์ฒด ๊ด€๋ จ ์ฝ”๋“œ๋งŒ ๋‹ค๋ฃจ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
18+
19+
### Zero ๊ฒฐํ•ฉ๋„๊ณผ High ์‘์ง‘๋„ {#zero-coupling-high-cohesion}
20+
21+
Slice๋Š” ๋…๋ฆฝ์ ์ด๊ณ  ์‘์ง‘๋„ ๋†’์€ ์ฝ”๋“œ ๊ทธ๋ฃน์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ๊ทธ๋ž˜ํ”ฝ์€ _์‘์ง‘๋„_๊ณผ _๊ฒฐํ•ฉ๋„_ ๊ฐœ๋…์„ ์‹œ๊ฐํ™”ํ•ฉ๋‹ˆ๋‹ค:
22+
23+
<figure>
24+
<img src="/img/coupling-cohesion-light.svg#light-mode-only" alt="" />
25+
<img src="/img/coupling-cohesion-dark.svg#dark-mode-only" alt="" />
26+
<figcaption>
27+
Image inspired by https://enterprisecraftsmanship.com/posts/cohesion-coupling-difference/
28+
</figcaption>
29+
</figure>
30+
31+
์ด์ƒ์ ์ธ Slice ํŠน์ง•:
32+
1. ๋…๋ฆฝ์  โ€” ๊ฐ™์€ Layer์˜ ๋‹ค๋ฅธ Slice์™€ Zero ๊ฒฐํ•ฉ๋„
33+
2. ๋†’์€ ์‘์ง‘๋„ โ€” ํ•ต์‹ฌ ๋ชฉ์  ๊ด€๋ จ ์ฝ”๋“œ๋ฅผ ํฌํ•จ
34+
35+
Slice์˜ ๋…๋ฆฝ์„ฑ์€ [Layer Import Rule][layers--import-rule]๋กœ ๊ฐ•์ œ๋ฉ๋‹ˆ๋‹ค:
36+
37+
> _Slice์˜ ๋ชจ๋“ˆ์€ ํ•˜์œ„ Layer์˜ ๋‹ค๋ฅธ Slice๋งŒ Import ๊ฐ€๋Šฅ_
38+
39+
### Slice์˜ Public API Rule
40+
41+
Slice ๋‚ด๋ถ€ ๊ตฌ์กฐ๋Š” ์ž์œ ๋กญ์ง€๋งŒ, ๋‹ค๋ฅธ Slice๊ฐ€ ์‚ฌ์šฉํ•  ์ข‹์€ Public API๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” **Slice Public API Rule**๋กœ ๊ฐ•์ œ๋ฉ๋‹ˆ๋‹ค:
42+
43+
> _๋ชจ๋“  Slice(์™€ Slice๊ฐ€ ์—†๋Š” Layer์˜ Segment)๋Š” Public API๋ฅผ ์ •์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค._
44+
>
45+
> _์™ธ๋ถ€ ๋ชจ๋“ˆ์€ Slice/Segment์˜ ๋‚ด๋ถ€ ๊ตฌ์กฐ๊ฐ€ ์•„๋‹Œ Public API๋งŒ ์ฐธ์กฐ ๊ฐ€๋Šฅ_
46+
47+
์ž์„ธํ•œ ๋‚ด์šฉ์€ [Public API Reference][ref-public-api]๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.
48+
49+
### Slice Group
50+
51+
์—ฐ๊ด€๋œ Slice๋“ค์€ ํด๋”๋กœ ๊ทธ๋ฃนํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹จ, ๋‹ค๋ฅธ Slice์™€ ๋™์ผํ•œ ๊ฒฉ๋ฆฌ ๊ทœ์น™์„ ๋”ฐ๋ผ์•ผ ํ•˜๋ฉฐ, ๊ทธ๋ฃน ๋‚ด **์ฝ”๋“œ ๊ณต์œ ๋Š” ๋ถˆ๊ฐ€๋Šฅ**ํ•ฉ๋‹ˆ๋‹ค.
52+
53+
![Features "compose", "like" ๊ทธ๋ฆฌ๊ณ  "delete"๊ฐ€ "post" ํด๋”์— ๊ทธ๋ฃนํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ํด๋”์—๋Š” ํ—ˆ์šฉ๋˜์ง€ ์•Š์Œ์„ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด ์ทจ์†Œ์„ ์ด ๊ทธ์–ด์ง„ "some-shared-code.ts" ํŒŒ์ผ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.](/img/graphic-nested-slices.svg)
54+
55+
## Segment
56+
57+
Segment๋Š” ๋งˆ์ง€๋ง‰ ๊ตฌ์„ฑ ๋‹จ์œ„๋กœ, ๊ธฐ์ˆ ์  ํŠน์„ฑ์— ๋”ฐ๋ผ ์ฝ”๋“œ๋ฅผ ๊ทธ๋ฃนํ™”ํ•ฉ๋‹ˆ๋‹ค.
58+
59+
ํ‘œ์ค€ Segment:
60+
61+
- `ui` โ€” UI ๊ด€๋ จ: Component, Date Formatter, Style ๋“ฑ
62+
- `api` โ€” Backend ํ†ต์‹ : Request Function, Data Type, Mapper ๋“ฑ
63+
- `model` โ€” Data Model: Schema, Interface, Store, Business Logic
64+
- `lib` โ€” Slice ๋‚ด๋ถ€ Library ์ฝ”๋“œ
65+
- `config` โ€” Configuration๊ณผ Feature Flag
66+
67+
๊ฐ Layer์˜ Segment ์‚ฌ์šฉ๋ฒ•์€ [Layer Page][layers--layer-definitions]๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.
68+
69+
Custom Segment๋„ ์ƒ์„ฑ ๊ฐ€๋Šฅํ•˜๋ฉฐ, App๊ณผ Shared Layer์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
70+
71+
Segment ์ด๋ฆ„์€ ์ฝ”๋“œ ๋ชฉ์ ์„ ๋ช…ํ™•ํžˆ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. `components`, `hooks`, `types`๊ฐ™์€ ๋ชจํ˜ธํ•œ ์ด๋ฆ„์€ ํ”ผํ•˜์„ธ์š”.
72+
73+
[layers--layer-definitions]: /docs/reference/layers#layer-definitions
74+
[layers--import-rule]: /docs/reference/layers#import-rule-on-layers
75+
[ref-public-api]: /docs/reference/public-api

0 commit comments

Comments
ย (0)