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