์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- useRef
- CSS
- ์๋ฐ์คํฌ๋ฆฝํธ
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- float
- ํ๋ก๊ทธ๋๋จธ์ค
- useEffect
- ๋ฐ๋ธ์ฝ์ค
- fetch API
- Props
- REACT
- Flex
- Gatsby
- ๋ธ๋ก๊ทธ
- position
- ์๊ณ ๋ฆฌ์ฆ
- history api
- ์ฝ๋ฉํ ์คํธ
- ํ๋ก ํธ์๋
- Today
- Total
Daehyunii's Dev-blog
MVC ๋ณธ๋ฌธ
MVC๋? (Model - View - Controller)
MVC๋ ์ํํธ์จ์ด ๋์์ธ ํจํด์ ๋๋ค.
์ฐ์ ์ํํธ์จ์ด ๋์์ธ ํจํด์ด๋ ๊ฐ๋ฐ ๋ฐฉ์์ ๊ณต์ํํ ๋ฐฉ๋ฒ๋ก ์ ๋งํฉ๋๋ค. ๊ณผ๊ฑฐ๋ถํฐ ์ง๊ธ๊น์ง ๊ฐ๋ฐํ๋ ๊ณผ์ ์์ ๋ฐ์ํ ๊ณตํต์ ์ธ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ๋ ๋ฐฉ์์ด๋ผ๊ณ ์ฝ๊ฒ ์๊ฐํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋์์ธ ํจํด์ ์ ํ์ฉํ๋ฉด ๊ฐ๋ ์ฑ, ๊ฐ๊ฒฐ์ฑ ๊ทธ๋ฆฌ๊ณ ํ์ฅ๊ณผ ์ ์ง ๋ณด์๊ฐ ์ฉ์ดํ์ฌ ํจ์จ์ ์ธ ์์ค ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
๋์์ธํจํด์ ์ข ๋ฅ๋ ๋งค์ฐ ๋ค์ํฉ๋๋ค.
๊ทธ๋ ๋ค๋ฉด MVC์์ ์ ํ ๊ฐ๋ฐ ๋ฐฉ์์ ๊ณต์ํํ ๋ฐฉ๋ฒ์ ๋ฌด์์ผ๊น์?
์ฑ ๊ฐ๋ฐ์ ์ธ ๊ฐ์ ์์ญ์ผ๋ก ๋๋๊ณ ๊ฐ ์์์ ๊ณ ์ ํ ์ญํ ์ ๋ถ์ฌํ๋ ๋ฐฉ์์ ์๋ฏธํฉ๋๋ค.
Model : Controller์๊ฒ ๋ฐ์ ์์ฒญ์ ๋ฐ๋ผ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
ํด๋น ๋ฐ์ดํฐ๋ ๋ค์ Controller์๊ฒ ์ ๋ฌํฉ๋๋ค.
Controller : User๋ก๋ถํฐ ์์ฒญ์ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ผ ํ๋ค๋ฉด Model์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํฉ๋๋ค.
Model์๊ฒ ๋ฐ์ ๋ฐ์ดํฐ๋ View์๊ฒ ์ ๋ฌํฉ๋๋ค.
View: Controller๋ก๋ถํฐ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ Client๋ก ์ ์กํด ํ๋ฉด์ ๊ฒฐ๊ณผ๋ฅผ ๋ํ๋ ๋๋ค.
๊ฐ๋จํ ์์๋ฅผ ๋ค์ด๋ณด๊ฒ ์ต๋๋ค. ์ธํฐ๋ท ์ผํ๋ชฐ์ ํตํด ์ฐ๋ฆฌ๋ ์ฅ๋ฐ๊ตฌ๋ ๊ธฐ๋ฅ์ ์ด์ฉํด ๋ณธ ๊ฒฝํ์ด ์์ ๊ฒ์ ๋๋ค.
์ฐ๋ฆฌ๋ ์ฐ๋ฆฌ๊ฐ ์ํ๋ ๋ฌผํ์ ์ฅ๋ฐ๊ตฌ๋์ ๋ด๊ฒ ๋๋๋ฐ ์ฅ๋ฐ๊ตฌ๋์ ๋ค์ด๊ฐ๊ณผ ๋์์ ์์ ๊ฒฐ์ ๊ธ์ก์ด ๊ฐ์ด ๋ณ๋ํ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒ ์ฅ๋ฐ๊ตฌ๋์ ๋ฌผํ์ด ์ถ๊ฐ๋จ์ ๋ฐ๋ผ ์์ ๊ฒฐ์ ๊ธ์ก์ด ์์ ๋๋ ๋ก์ง์ '๋น์ฆ๋์ค ๋ก์ง'์ด๋ผ๊ณ ํ๊ณ , MVC์์๋ C์์ญ์์ ์ฒ๋ฆฌํ๊ฒ ๋ฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋จ์ํ ์์ ๊ฒฐ์ ๊ธ์ก์ ๋ณด์ฌ์ฃผ๋ ์์ญ์ V์์ญ์์ ์ฒ๋ฆฌํ๊ฒ ๋ฉ๋๋ค. ํ๋ก๊ทธ๋จ์ ํต์ฌ์ ๋ด๋นํ๋ ์์ญ์ด C์์ญ์ ๋๋ค.
MVCํจํด์ ํ๊ณ
MVC์ ๊ฐ์ฅ ํฐ ํน์ง์ ๊ตฌ์ฑ์์๋ฅผ ๋ ๋ฆฝ์ํด์ผ๋ก์จ ๊ฐ๋ฐ ํจ์จ์ฑ์ ๋์ธ๋ค๋ ์ ์ ๋๋ค. ํ์ง๋ง MVC์์ ์ปจํธ๋กค๋ฌ๋ ์ํฉ์ ๋ฐ๋ผ ์ฌ๋ฌ ๊ฐ์ ๋ชจ๋ธ, ๋ทฐ์ ์ฐ๊ฒฐ๋ ์ ์๋๋ฐ ๋ค์์ ๋ชจ๋ธ๊ณผ ๋ทฐ๊ฐ ํ๋์ ์ปจํธ๋กค๋ฌ์์ ์ํ๋๊ธฐ ๋๋ฌธ์ ๋ชจ๋ธ๊ณผ ๋ทฐ๋ ์ค์ง์ ์ผ๋ก ์์ ํ ๋ถ๋ฆฌ๋๊ธฐ๊ฐ ์ฝ์ง ์๊ณ , ํนํ ํ๋ก๊ทธ๋จ ๊ตฌ์กฐ๊ฐ ์ปค์ง์๋ก ๋ชจ๋ธ๊ณผ ๋ทฐ๊ฐ ๋ณต์กํ๊ฒ ์ฐ๊ฒฐ๋๋ ์ํฉ์ด ๋ฐ์ํ๊ฒ ๋ฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฌํ ์์กด์ฑ ๋ฌธ์ ๋ฅผ ๋ณด์ํ๊ธฐ ์ํด MVC์์ ํ์๋ ํจํด์ด ์๊ฒผ์ต๋๋ค.
MVP(Model-View-Presenter)
MVP์ ํน์ง์ ๋ทฐ์ ๋ชจ๋ธ์ด ํ๋ ์ ํฐ๋ฅผ ํตํด์๋ง ๋์ํ๋๋ก ์ค๊ณ๋๋ค๋ ๊ฒ์ ๋๋ค. MVC์์๋ ๋ชจ๋ธ์ด ๋ทฐ๋ก ๋ฐ์ดํฐ๋ฅผ ์ง์ ์ ๋ฌํ๊ฑฐ๋ ๋ทฐ๊ฐ ๋ชจ๋ธ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ๋ ๊ฐ๋ฅํฉ๋๋ค. ํ์ง๋ง MVP์์๋ ๋ทฐ์ ๋ชจ๋ธ์ ํ๋ ์ ํฐ๋ฅผ ํตํด์๋ง ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๊ฒ ์ค๊ณํ๋ ๊ฒ์ ๋๋ค.
MVVM(Model-View-View Model)
MVVM๋ชจ๋ธ์ ๋ทฐ๋ชจ๋ธ์ด ๋ชจ๋ธ๊ณผ ๋ทฐ ์ฌ์ด์ ์์นํ๊ฒ ๋ฉ๋๋ค. ๊ตฌ์กฐ์ ์ผ๋ก MVP์ ๋์ผํ๊ฒ ๋ณด์ผ ์ ์์ง๋ง, ๋ทฐ๋ชจ๋ธ์ ๋ทฐ์์ ๋ณด์ผ ๋ฐ์ดํฐ์ ๋น์ฆ๋์ค ๋ก์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค. MVC์์๋ Model์ด ๋ฐ์ดํฐ๋ฅผ ์ ์ฒด์ ์ผ๋ก ๊ด๋ฆฌํ๋ ์์ญ์ด์๋ค๋ฉด MVVM ๋ชจ๋ธ์์๋ View Model์ด View์์ ๋ณด์ผ ๋ฐ์ดํฐ๋ฅผ View Model์ด ๊ฐ์ง๊ณ ์๊ณ , View Model์ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋๋ฉด View์์ ๋ณด์ด๋ ๋ฐ์ดํฐ ๊ฐ๋ ๋ณ๊ฒฝ๋๊ฒ ๋ฉ๋๋ค.
'๐ Language & CS knowledge > IT ์ฉ์ด' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
web 1.0 / web 2.0 / web 3.0 (0) | 2022.12.09 |
---|