:) ์ง๋ ์คํฐ๋์์ ๋ด๊ฐ ์ ๋ฆฌํ ์ํฐํด์ ๊ณต์ ํ๊ณ , ์ X๋์ด '์ถ์ํ๋ ๋ฌด์์ธ๊ฐ?' ์ ๋ํ ์ง๋ฌธ์ ๋ช ํํ๊ฒ ๋ต๋ณ์ ๋งํ์ง ๋ชปํ์๋ค..
~์ด์ง ์์๊น์? ์ ๋๋ก ๋ง๋ฌด๋ฆฌ๋ฅผ ํ์๋๋ฐ ์ฐพ๋ค๋ณด๋ ์ด ๋ถ๋ถ๋ ์คํฌํฐํ์ด ๋ธ๋ก๊ทธ์ ์ด๋ฏธ ๊ด๋ จํ ๊ธ์ด ์์ด์ ์ด๋ฒ์ฃผ๋ ์ถ์ํ ๊ด๋ จํด์
์ ๋ฆฌํ๊ณ ์ ํ๋ค! ๐
Abstraction
- ๋ ๋ณต์กํ ๊ฐ๋ ์ ๊ฐ๋จํ๊ฒ ๋ง๋ ๋ฒ์ ์ ์๋ฏธ
- ๋ณต์กํ ์ธ๋ถ์ฌํญ์ ์จ๊ธฐ๊ณ , ์ฌ์ฉ์๊ฐ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉํ ์ ์๋๋ก ์์คํ ์ ๋จ์ํํ๋ ๊ณผ์
- FE ๊ฐ๋ฐ์์์ ์ถ์ํ ๊ฐ๋
1. ๋ฎ์ ์์ค์ ์ถ์ํ :
๊ฐ๋ฐ์๊ฐ HTML, CSS ์ฝ๋์ ์ง์ ์ ๊ทผํ๊ณ ์กฐ์.
์๋ฅผ ๋ค์ด, ์น ํ์ด์ง์ ํน์ ๋ฒํผ์ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ ํ ๋, ๊ฐ๋ฐ์๋ ์ง์ ํด๋น HTML ์์๋ฅผ ์ฐพ๊ณ , CSS๋ฅผ ์ฌ์ฉํ์ฌ
์คํ์ผ(์์, ํฌ๊ธฐ, ํฐํธ ๋ฑ)์ ์ ์
2. ๋์ ์์ค์ ์ถ์ํ:
์ง์ ์ ์ธ HTML์ด๋ CSS ์ฝ๋ ๋์ , ์ฌ์ฉ์ ์ ์ ์์ฑ์ด๋ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉ.
์๋ฅผ ๋ค์ด, React์ ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ๊ฐ๋ฐ์๋ '์ปดํฌ๋ํธ'๋ผ๋ ์ถ์ํ๋ ๊ฐ๋ ์ ์ฌ์ฉํ์ฌ UI๋ฅผ ๊ตฌ์ฑ.
๊ฐ๋ฐ์๋ ๋ณต์กํ ๋ด๋ถ ๊ตฌํ ๋์ ์, ์ปดํฌ๋ํธ์ ๋ ๋์ ์์ค์ ํ๋๊ณผ ์ธํฐํ์ด์ค์ ์ง์คํ ์ ์์.
:) FE ๊ฐ๋ฐ์์์ ์ถ์ํ ๊ฐ๋
์ ์ดํด๋ณด๊ณ ๋์ ์ดํด๊ฐ ๋ ๋๋์ด์๋ค..
์ํํธ์จ์ด ๊ด์ ์์ ์ค๋ช
๋ ์ถ์ํ ๊ด๋ จํ ์ํฐํด๋ ๊ฐ์ด ์ฒจ๋ถ๋์ด ์์๋๋ฐ, ์๊ฒ๋ ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณด์๋ค.
Levels of Abstraction, A Key Concept in Systems Design
๋ณต์กํ ์์คํ ์ผ๋ก ์์ ํ๋ค๋ ๊ฒ์ ํ์ค์ ๋ํ ๋ค์ํ ํด์์ ๋ง๋ค์ด๋ธ๋ค๋ ๊ฒ์ ์๋ฏธ
์ค์ํ์์์ ์ถ์ํ: ์๋ฅผ ๋ค์ด, "๋น์ ์ ์ด๋์ ์ด๊ณ ์์ต๋๊น?"๋ผ๋ ์ง๋ฌธ์ ๋ํ ๋๋ต์ ์ํฉ์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์๋ค.
์ ๋ถ ๊ธฐ๊ด์๋ ์ ํํ ์ฃผ์๋ฅผ, ์ง์ญ ํ์ฌ์์๋ ๊ฑฐ๋ฆฌ ์ด๋ฆ์, ๋ค๋ฅธ ๋๋ผ์์๋ "๋ฏธ๊ตญ"์ด๋ผ๊ณ ๋งํ ์ ์์.
์ด๋ฐ ๋ค์ํ ๋๋ต์ ๋ชจ๋ ์ถ์ํ์ ๋ค๋ฅธ ์์ค์ ๋ํ๋.
์ฆ ์ถ์ํ๋ ํน์ ๋ชฉ์ ์ ์ํด ๋ง๋ค์ด์ง ๋ฌธ์ ํด๊ฒฐ ๋๊ตฌ.
( -> ๋ชจ๋ ์ถ์ํ๋ ๋จ์ํ ๊ณผ์ ์ ๊ฑฐ์น๋ฉฐ, ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐ ๋์์ด ๋๊ฑฐ๋ ๊ทธ๋ ์ง ์์ ์ ์๋ค!!)
https://engineering.atspotify.com/2021/04/customization-vs-configuration-in-evolving-design-systems/
https://medium.com/@danieljyoo/levels-of-abstraction-a-key-concept-in-systems-design-7fdb33d288af
'๐ WIL > ๐ React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํด๋ก์ ์ useState (0) | 2022.10.02 |
---|---|
React Query (์ด์ TanStack Query ๋ผ๊ณ ๋ถ๋ฆฌ๋ ..) ์ ์ฉ (2) (0) | 2022.09.21 |
Private Routes ์ ์ฉํด๋ณด์. (0) | 2022.09.11 |
Axios Interceptors ? (0) | 2022.09.05 |
TDD ๋์ ํด๋ณด์.(2) - TypeScript ์ ์ ์ฉ (0) | 2022.08.27 |