|
| 1 | +--- |
| 2 | +sidebar_position: 4 |
| 3 | +--- |
| 4 | + |
| 5 | +# v1์์ v2๋ก์ ๋ง์ด๊ทธ๋ ์ด์
|
| 6 | + |
| 7 | +## v2๋ก์ ์ ํ ์ด์ |
| 8 | + |
| 9 | +**feature-slices**์ ์๋ ๊ฐ๋
์ [2018๋
์ ๋ฐํ๋์์ต๋๋ค][ext-tg-spb]. |
| 10 | + |
| 11 | +๊ทธ ์ดํ๋ก ์ฌ๋ฌ ๋ฐฉ๋ฒ๋ก ์ด ๋ฐ์ ํ๋ฉด์ ๊ฐ๋
์ด ํ์ฅ๋์์ง๋ง, ๊ธฐ๋ณธ ์์น์ ์ ์ง๋์์ต๋๋ค **[๊ธฐ๋ณธ ์์น ์ฐธ๊ณ ][ext-v1]**: |
| 12 | + |
| 13 | +- ํ์คํ๋ ํ๋ก ํธ์๋ ํ๋ก์ ํธ ๊ตฌ์กฐ ์ฌ์ฉ |
| 14 | +- *๋น์ฆ๋์ค ๋ก์ง*์ ๋ฐ๋ผ ์ ํ๋ฆฌ์ผ์ด์
์ ์ฐ์ ์ ์ผ๋ก ๋ถ๋ฆฌ |
| 15 | +- ์๋ํ์ง ์์ ๋ถ์์ฉ๊ณผ ์ํ ์์กด์ฑ ๋ฐฉ์งํ๊ธฐ ์ํด *๋
๋ฆฝ์ ์ธ ๊ธฐ๋ฅ* ๋จ์ ์ฌ์ฉ |
| 16 | +- ๋ชจ๋ ๋ด๋ถ๋ก ์ง์ ์ ๊ทผํ์ง ์๋๋ก *๊ณต์ฉ API*๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ์กฐ๋ฅผ ์์ ํ |
| 17 | + |
| 18 | +๊ทธ๋ฌ๋ ์ด์ ๋ฒ์ ์ ๋ฐฉ๋ฒ๋ก ์๋ ์ฌ์ ํ ๋ช ๊ฐ์ง **๊ฐ์ ์ **์ด ํ์ํ์ต๋๋ค. |
| 19 | + |
| 20 | +- ๋ฐ๋ณต์ ์ธ ์ฝ๋(๋ณด์ผ๋ฌํ๋ ์ดํธ)๋ฅผ ์ ๋ฐํ๋ ๊ฒฝ์ฐ๊ฐ ์์ |
| 21 | +- ์ฝ๋๋ฒ ์ด์ค๊ฐ ๋ณต์กํด์ง๊ณ , ์ถ์ํ ๊ฐ์ ๊ท์น์ด ๋ชจํธํด์ง๋ ๊ฒฝ์ฐ๊ฐ ์์ |
| 22 | +- ์๋ฌต์ ์ธ ์ํคํ
์ฒ ์ค๊ณ ๋ฐฉ์์ด ํ๋ก์ ํธ ํ์ฅ๊ณผ ์ ๊ท ์
์ฌ์์ ์จ๋ณด๋ฉ์ ์ด๋ ต๊ฒ ํจ |
| 23 | + |
| 24 | +์๋ก์ด ๋ฒ์ ([v2][ext-v2])์ ๊ธฐ์กด ์ฅ์ ์ ์ ์งํ๋ฉด์๋ **์ด๋ฌํ ๋จ์ ์ ํด๊ฒฐ**ํ๋๋ก ์ค๊ณ๋์์ต๋๋ค. |
| 25 | + |
| 26 | +๋ํ 2018๋
์ดํ, [๋ ๋ค๋ฅธ ์ ์ฌํ ๋ฐฉ๋ฒ๋ก ][ext-fdd-issues]์ธ [**feature-driven**][ext-fdd]์ด ๊ฐ๋ฐ๋์์ผ๋ฉฐ, ์ด๋ [Oleg Isonen][ext-kof]์ ์ํด ์ฒ์ ๋ฐํ๋์์ต๋๋ค. |
| 27 | + |
| 28 | +๋ ๊ฐ์ง ์ ๊ทผ ๋ฐฉ์์ ํตํฉํ ํ, **๊ธฐ์กด์ ์ค๋ฌด๋ฅผ ๊ฐ์ **ํ๊ณ ๋ฐ์ ์์ผ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ ์ ์ฐํ๊ณ ๋ช
ํํ๋ฉฐ ํจ์จ์ ์ผ๋ก ๋ง๋ค์์ต๋๋ค. |
| 29 | + |
| 30 | +> ์ด๋ฌํ ๋ณ๊ฒฝ ์ฌํญ์ ๋ฐฉ๋ฒ๋ก ์ ์ด๋ฆ์๋ ์ํฅ์ ์ฃผ์ด, ์ด์ ๋ "feature-sliced"๋ผ๊ณ ๋ถ๋ฆฌ๊ฒ ๋์์ต๋๋ค. |
| 31 | +
|
| 32 | +## ํ๋ก์ ํธ๋ฅผ v2๋ก ๋ง์ด๊ทธ๋ ์ด์
ํ๋ ์ด์ |
| 33 | + |
| 34 | +> `WIP:` ํ์ฌ ๋ฐฉ๋ฒ๋ก ๋ฒ์ ์ ๊ฐ๋ฐ ์ค์ด๋ฉฐ ์ผ๋ถ ์ธ๋ถ ์ฌํญ์ด ๋ณ๊ฒฝ๋ ์ ์์ต๋๋ค. |
| 35 | +
|
| 36 | +#### ๐ ๋ ์ง๊ด์ ์ด๊ณ ๊ฐ๋จํ ์ํคํ
์ฒ |
| 37 | + |
| 38 | +v2 ๋ฐฉ๋ฒ๋ก ์ **๋ ์ง๊ด์ ์ด๊ณ ์ผ๋ฐ์ ์ธ ์ถ์ํ๋ฅผ ์ ๊ณตํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋ก์ง ๋ถ๋ฆฌ๋ฅผ ์ฝ๊ฒ ํ ์ ์๊ฒ ํฉ๋๋ค.** |
| 39 | + |
| 40 | +์ด๋ฅผ ํตํด ์ ๊ท ์ธ๋ ฅ์ ์จ๋ณด๋ฉ์ด ์์ํด์ง๋ฉฐ, ํ๋ก์ ํธ ์ํ๋ฅผ ๋น ๋ฅด๊ฒ ์ดํดํ๊ณ ์ ํ๋ฆฌ์ผ์ด์
์ ๋น์ฆ๋์ค ๋ก์ง์ ํจ๊ณผ์ ์ผ๋ก ๋ถ๋ฐฐํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. |
| 41 | + |
| 42 | +#### ๐ฆ ๋ ์ ์ฐํ๊ณ ์ค์ฉ์ ์ธ ๋ชจ๋ํ |
| 43 | + |
| 44 | +v2 ๋ฐฉ๋ฒ๋ก ์ **๋ก์ง์ ๋ ์ ์ฐํ๊ฒ ๋ฐฐ์นํ ์ ์์ต๋๋ค:** |
| 45 | + |
| 46 | +- ๋
๋ฆฝ์ ์ธ ๋ถ๋ถ์ ์ฒ์๋ถํฐ ์๋ก ๋ฆฌํฉํฐ๋งํ ์ ์๋ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค. |
| 47 | +- ๋ถํ์ํ๊ฒ ์์กด์ฑ์ด ์ฝํ์ง ์๋๋ก ๋์ผํ ์ถ์ํ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. |
| 48 | +- ์๋ก์ด ๋ชจ๋์ ์ถ๊ฐํ ๋ *(layer => slice => segment)* ๊ตฌ์กฐ๊ฐ ๋ ๊ฐ๋จํด์ง๋๋ค. |
| 49 | + |
| 50 | +#### ๐ ๋ ํ๋ถํ ๋ช
์ธ, ๊ณํ, ์ปค๋ฎค๋ํฐ ์ง์ |
| 51 | + |
| 52 | +ํ์ฌ `์ฝ์ด ํ`์ ์ต์ (v2) ๋ฒ์ ์ ๋ฐฉ๋ฒ๋ก ๊ฐ๋ฐ์ ํ๋ฐํ ์ฐธ์ฌํ๊ณ ์์ต๋๋ค. |
| 53 | + |
| 54 | +๋ฐ๋ผ์ v2์๋ ๋ค์๊ณผ ๊ฐ์ ์์๋ค์ด ์ถ๊ฐ๋ก ์ ๊ณต๋ฉ๋๋ค: |
| 55 | + |
| 56 | +- ๋ ๋ค์ํ ์ฌ๋ก์ ๋ฌธ์ ์ค๋ช
|
| 57 | +- ์ ์ฉ์ ๊ดํ ๊ฐ์ด๋ |
| 58 | +- ์ค์ ์์ ์ถ๊ฐ |
| 59 | +- ์ ๊ท ์ธ๋ ฅ์ ์จ๋ณด๋ฉ๊ณผ ๋ฐฉ๋ฒ๋ก ๊ฐ๋
ํ์ต์ ์ํ ํ๋ถํ ๋ฌธ์ ์ ๊ณต |
| 60 | +- ์ํคํ
์ฒ ๊ฐ๋
๊ณผ ๊ท์น์ ์ค์ํ ์ ์๋๋ก ์ง์ํ๋ ํดํท |
| 61 | + |
| 62 | +> ๋ฌผ๋ก , ์ฒซ ๋ฒ์งธ ๋ฒ์ ์ ๋ํ ์ฌ์ฉ์ ์ง์๋ ์ ๊ณต๋ ๊ฒ์
๋๋ค. ํ์ง๋ง ์ต์ ๋ฒ์ ์ด ์ต์ฐ์ ๊ณผ์ ์
๋๋ค. |
| 63 | +> |
| 64 | +> ํฅํ ์ฃผ์ ์
๋ฐ์ดํธ๊ฐ ์์ ๋, **ํ๊ณผ ํ๋ก์ ํธ์ ๋ํ ๋ถ๋ด ์์ด** ์ต์ ๋ฒ์ (v2) ๋ฐฉ๋ฒ๋ก ์ ์ ๊ทผํ ์ ์์ต๋๋ค. |
| 65 | +
|
| 66 | +## ๋ณ๊ฒฝ ์ฌํญ |
| 67 | + |
| 68 | +### `์ฃผ์ ๋ณ๊ฒฝ` Layers |
| 69 | + |
| 70 | +์ด์ ๋ฐฉ๋ฒ๋ก ์ ์์ ๋ ๋ฒจ์์ layers๋ฅผ ๋ช
ํํ ๊ตฌ๋ถํฉ๋๋ค. |
| 71 | + |
| 72 | +- `/app` > `/processes` > **`/pages`** > **`/features`** > `/entities` > `/shared` |
| 73 | +- *์ด์ ๋ชจ๋ ๊ฒ์ด ๊ธฐ๋ฅ/ํ์ด์ง๋ก ์ทจ๊ธ๋์ง๋ ์์ต๋๋ค.* |
| 74 | +- ์ด ์ ๊ทผ ๋ฐฉ์์ [layers์ ๋ํ ๋ช
์์ ์ธ ๊ท์น ์ค์ ][ext-tg-v2-draft]์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. |
| 75 | +- ๋ชจ๋์ ์์นํ **layer๊ฐ ๋์์๋ก** ๋ ๋ง์ **์ปจํ
์คํธ**๋ฅผ ๊ฐ์ง๋๋ค. |
| 76 | + |
| 77 | + *(์ฆ, ๊ฐ layer์ ๋ชจ๋์ ํ์ layer์ ๋ชจ๋๋ง ๊ฐ์ ธ์ฌ ์ ์์ผ๋ฉฐ ์์ layer๋ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.)* |
| 78 | + |
| 79 | +- ๋ชจ๋์ ์์นํ **layer๊ฐ ๋ฎ์์๋ก** ๋ณ๊ฒฝ์ ๋ฐ๋ฅธ **์ํ๊ณผ ์ฑ
์์ด** ์ปค์ง๋๋ค. |
| 80 | + |
| 81 | + *(๋ณดํต ํ์ layer๊ฐ ๋ ์์ฃผ ์ฌ์ฉ๋๊ธฐ ๋๋ฌธ์
๋๋ค)* |
| 82 | + |
| 83 | +### `์ฃผ์ ๋ณ๊ฒฝ` Shared |
| 84 | + |
| 85 | +ํ๋ก์ ํธ์ src ๋ฃจํธ์ ์๋ `/ui`, `/lib`, `/api`์ ๊ฐ์ ์ธํ๋ผ ์ถ์ํ๋ ์ด์ `/src/shared`๋ผ๋ ๋ณ๋ ๋๋ ํ ๋ฆฌ์ ๋ถ๋ฆฌ๋ฉ๋๋ค. |
| 86 | + |
| 87 | +- `shared/ui` - ์ฌ์ ํ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ณตํต UI ์ปดํฌ๋ํธ ๋ชจ์(์ ํ ์ฌํญ) |
| 88 | + - *๊ธฐ์กด์ `Atomic Design` ์ฌ์ฉ๋ ๊ฐ๋ฅํฉ๋๋ค.* |
| 89 | +- `shared/lib` - ๋ก์ง ๊ตฌํ์ ์ํ ๋ณด์กฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ์ |
| 90 | + - *ํฌํผ ์ฝ๋๊ฐ ๋ชจ์ฌ์๋ ๋คํ๋ ์ง์* |
| 91 | +- `shared/api` - API์ ์ ๊ทผํ๋ ๊ณต์ฉ ์ง์
์ |
| 92 | + - *๊ฐ ๊ธฐ๋ฅ/ํ์ด์ง๋ณ๋ก ๋ก์ปฌ์ ๋ฑ๋กํ ์ ์์ง๋ง, ๊ถ์ฅํ์ง ์์* |
| 93 | +- ์ด์ ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก `shared`์ ๋น์ฆ๋์ค ๋ก์ง์ ๋ํ ๋ช
์์ ๊ฒฐํฉ์ด ์์ด์ผ ํฉ๋๋ค. |
| 94 | + - *ํ์ํ๋ค๋ฉด ํด๋น ๊ด๊ณ๋ฅผ `entities` ๋ ๋ฒจ์ด๋ ์์ ๋ ๋ฒจ๋ก ์ฌ๋ ค์ผ ํฉ๋๋ค.* |
| 95 | + |
| 96 | +### `์๋ก ์ถ๊ฐ๋` Entities, Processes |
| 97 | + |
| 98 | +v2์์๋ ๋ก์ง ๋ณต์ก์ฑ๊ณผ ๋์ ๊ฒฐํฉ์ ์ค์ด๊ธฐ ์ํ **์๋ก์ด ์ถ์ํ**๊ฐ ์ถ๊ฐ๋์์ต๋๋ค. |
| 99 | + |
| 100 | +- `/entities` - **business entities** layer, ํ๋ก ํธ์๋์์ ํ์ํ ๋น์ฆ๋์ค ๋ชจ๋ธ์ด๋ ์ธ์์ ์ธ entities๋ฅผ ํฌํจํ๋ slices |
| 101 | + - *์์: `user`, `i18n`, `order`, `blog`* |
| 102 | +- `/processes` - ์ ํ๋ฆฌ์ผ์ด์
์ ๋ฐ์ ๊ฑธ์น **๋น์ฆ๋์ค ํ๋ก์ธ์ค** layer |
| 103 | + - **์ ํ์ layer**, ๋ณดํต *๋ก์ง์ด ํ์ฅ๋์ด ์ฌ๋ฌ ํ์ด์ง์ ๊ฑธ์ณ ๋ถ์ฐ๋๊ธฐ ์์ํ ๋* ์ฌ์ฉ์ ๊ถ์ฅ |
| 104 | + - *์์: `payment`, `auth`, `quick-tour`* |
| 105 | + |
| 106 | +### `์ฃผ์ ๋ณ๊ฒฝ` ์ถ์ํ ๋ฐ ๋ค์ด๋ฐ |
| 107 | + |
| 108 | +์ด์ ํน์ ์ถ์ํ ๋ฐ [๋ช
ํํ ๋ค์ด๋ฐ ๊ถ์ฅ์ฌํญ][refs-adaptability]์ด ์ ์๋์์ต๋๋ค. |
| 109 | + |
| 110 | +[disc-process]: https://github.com/feature-sliced/documentation/discussions/20 |
| 111 | +[disc-features]: https://github.com/feature-sliced/documentation/discussions/23 |
| 112 | +[disc-entities]: https://github.com/feature-sliced/documentation/discussions/18#discussioncomment-422649 |
| 113 | +[disc-shared]: https://github.com/feature-sliced/documentation/discussions/31#discussioncomment-453020 |
| 114 | + |
| 115 | +[disc-ui]: https://github.com/feature-sliced/documentation/discussions/31#discussioncomment-453132 |
| 116 | +[disc-model]: https://github.com/feature-sliced/documentation/discussions/31#discussioncomment-472645 |
| 117 | +[disc-api]: https://github.com/feature-sliced/documentation/discussions/66 |
| 118 | + |
| 119 | +#### ๋ ์ด์ด |
| 120 | + |
| 121 | +- `/app` โ **์ ํ๋ฆฌ์ผ์ด์
์ด๊ธฐํ layer** |
| 122 | + - *์ด์ ๋ช
์นญ: `app`, `core`,`init`, `src/index` (๊ฐ๋ ์ฌ์ฉ๋จ)* |
| 123 | +- `/processes` โ [**๋น์ฆ๋์ค process layer**][disc-process] |
| 124 | + - *์ด์ ๋ช
์นญ: `processes`, `flows`, `workflows`* |
| 125 | +- `/pages` โ **์ ํ๋ฆฌ์ผ์ด์
ํ์ด์ง layer** |
| 126 | + - *์ด์ ๋ช
์นญ: `pages`, `screens`, `views`, `layouts`, `components`, `containers`* |
| 127 | +- `/features` โ [**๊ธฐ๋ฅ ๋ชจ๋ layer**][disc-features] |
| 128 | + - *์ด์ ๋ช
์นญ: `features`, `components`, `containers`* |
| 129 | +- `/entities` โ [**๋น์ฆ๋์ค entity layer**][disc-entities] |
| 130 | + - *์ด์ ๋ช
์นญ: `entities`, `models`, `shared`* |
| 131 | +- `/shared` โ [**์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ธํ๋ผ ์ฝ๋ layer**][disc-shared] ๐ฅ |
| 132 | + - *์ด์ ๋ช
์นญ: `shared`, `common`, `lib`* |
| 133 | + |
| 134 | +#### ์ธ๊ทธ๋จผํธ |
| 135 | + |
| 136 | +- `/ui` โ [**UI segment**][disc-ui] ๐ฅ |
| 137 | + - *์ด์ ๋ช
์นญ: `ui`, `components`, `view`* |
| 138 | +- `/model` โ [**๋น์ฆ๋์ค ๋ก์ง segment**][disc-model] ๐ฅ |
| 139 | + - *์ด์ ๋ช
์นญ: `model`, `store`, `state`, `services`, `controller`* |
| 140 | +- `/lib` โ **๋ณด์กฐ ์ฝ๋ segment** |
| 141 | + - *์ด์ ๋ช
์นญ: `lib`, `libs`, `utils`, `helpers`* |
| 142 | +- `/api` โ [**API segment**][disc-api] |
| 143 | + - *์ด์ ๋ช
์นญ: `api`, `service`, `requests`, `queries`* |
| 144 | +- `/config` โ **์ ํ๋ฆฌ์ผ์ด์
์ค์ segment** |
| 145 | + - *์ด์ ๋ช
์นญ: `config`, `env`, `get-env`* |
| 146 | + |
| 147 | +### `๊ฐ์ ๋` ๋ฎ์ ๊ฒฐํฉ |
| 148 | + |
| 149 | +์ด์ ์๋ก์ด layers ๋๋ถ์ ๋ชจ๋ ๊ฐ [๋ฎ์ ๊ฒฐํฉ ์์น์ ์ค์][refs-low-coupling]ํ๊ธฐ๊ฐ ํจ์ฌ ์ฌ์์ก์ต๋๋ค. |
| 150 | + |
| 151 | +*๋์์, ๋ชจ๋ ๊ฐ "๊ฒฐํฉ์ ํด์ "ํ๊ธฐ ์ด๋ ค์ด ์ํฉ์ ๊ฐ๋ฅํ ํ ํผํ๋ ๊ฒ์ด ์ฌ์ ํ ๊ถ์ฅ๋ฉ๋๋ค.* |
| 152 | + |
| 153 | +## ์ฐธ๊ณ ์๋ฃ |
| 154 | + |
| 155 | +- [React SPB Meetup #1 ๋ฐํ ๋
ธํธ"][ext-tg-spb] |
| 156 | +- [React Berlin Talk - Oleg Isonen "Feature Driven Architecture"][ext-kof-fdd] |
| 157 | +- [v1๊ณผ์ ๋น๊ต (์ปค๋ฎค๋ํฐ ์ฑํ
)](https://t.me/feature_sliced/493) |
| 158 | +- [v2์ ๋ํ ์๋ก์ด ์์ด๋์ด์ ์ค๋ช
(atomicdesign ์ฑํ
)][ext-tg-v2-draft] |
| 159 | +- [์๋ก์ด ๋ฒ์ ๋ฐฉ๋ฒ๋ก (v2)์ ๋ํ ์ถ์ํ ๋ฐ ๋ค์ด๋ฐ ๋
ผ์](https://github.com/feature-sliced/documentation/discussions/31) |
| 160 | + |
| 161 | +[refs-low-coupling]: /docs/reference/slices-segments#zero-coupling-high-cohesion |
| 162 | +[refs-adaptability]: /docs/about/understanding/naming |
| 163 | + |
| 164 | +[ext-v1]: https://feature-sliced.github.io/featureslices.dev/v1.0.html |
| 165 | +[ext-tg-spb]: https://t.me/feature_slices |
| 166 | +[ext-fdd]: https://github.com/feature-sliced/documentation/tree/rc/feature-driven |
| 167 | +[ext-fdd-issues]: https://github.com/kof/feature-driven-architecture/issues |
| 168 | +[ext-v2]: https://github.com/feature-sliced/documentation |
| 169 | +[ext-kof]: https://github.com/kof |
| 170 | +[ext-kof-fdd]: https://www.youtube.com/watch?v=BWAeYuWFHhs |
| 171 | +[ext-tg-v2-draft]: https://t.me/atomicdesign/18708 |
0 commit comments