TIL 52: [๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค] MVC

MVC๋ผ๋Š” ๋‹จ์–ด๋ฅผ ๋ณด์ž๋งˆ์ž Section 2์—์„œ ๋ฐฐ์› ๋˜ Flux๊ฐ€ ์ƒ๊ฐ๋‚ฌ์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์Šค๋ถ์—์„œ MVC์˜ ๋‹จ์ ์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœํ•œ ์•„ํ‚คํ…์ฒ˜๊ฐ€ Flux์ž„์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ MVC๊ฐ€ Flux๋ณด๋‹ค ์•ˆ์ข‹์€ ๊ฒƒ, ์–‘๋ฐฉํ–ฅ์ด ๋‹จ๋ฐฉํ–ฅ๋ณด๋‹ค ์•ˆ ์ข‹์€ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์ƒํ™ฉ์— ๋”ฐ๋ผ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

Flux ๋ฐฐ์› ๋˜ ๋‚  TIL ์ž…๋‹ˆ๋‹น

https://high-developer.tistory.com/53

 

TIL 42: [React] ์ƒํƒœ ๊ด€๋ฆฌ

 ์˜ค๋Š˜์€ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜์ธ Redux๋ฅผ ์‚ฌ์šฉํ•ด์„œ Sprint๋ฅผ ๊ณต๋ถ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•ž์„œ ๋งํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ „์—ญ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•ด์ฃผ์–ด props drilling์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด

high-developer.tistory.com

 

 

MVC

MVC๊ฐ€ ์ƒ๊ฒจ๋‚˜๊ฒŒ ๋œ ์ด์œ ๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐœ๋ฐœํ•˜๋‹ค๊ฐ€ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ค์šด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ž…๋‹ˆ๋‹ค.

MVC๋Š” ๋””์ž์ธ ํŒจํ„ด ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ๋””์ž์ธ ํŒจํ„ด์ด๋ž€ ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐœ๋ฐœํ•˜๋Š” ์ค‘์— ๋ฐœ์ƒํ–ˆ๋˜ ๋ฌธ์ œ์ ๋“ค์„ ์ •๋ฆฌํ•ด์„œ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋„๋ก ํŠน์ •ํ•œ ํŒจํ„ด, ๊ทœ์•ฝ, ํ˜น์€ ํ˜•์‹์„ ๋งŒ๋“ค์–ด ๋†“์€ ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค.

์•„๋ž˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๋ฉด User๊ฐ€ Controller๋ฅผ ์กฐ์ž‘ํ•˜๋ฉด Controller๋Š” Model๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ์˜ค๊ณ , ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ View์—๊ฒŒ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค. View๋Š” ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œํ˜„ํ•ด์ค๋‹ˆ๋‹ค.

 

Model

Model์€ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ–๊ณ ์˜ค๊ฑฐ๋‚˜ ๋ฐ์ดํ„ฐ ์ž์ฒด๋ฅผ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Controller์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›์Šต๋‹ˆ๋‹ค.

 

View

์œ ์ €๊ฐ€ ๋ณด๋Š” ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

Model์ด๋‚˜ DB์™€ ์ง์ ‘์ ์ธ ๊ต๋ฅ˜๋Š” ์—†๊ณ  ๋‹จ์ˆœํžˆ Controller์™€ ๊ต๋ฅ˜ํ•ฉ๋‹ˆ๋‹ค.

 

Controller

Model๊ณผ View๋ฅผ ์ด์–ด์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

Controller๋Š” View์—์„œ ์ผ์–ด๋‚˜๋Š” ์•ก์…˜๊ณผ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ์ธํ’‹์„ ๋ฐ›๊ณ , ์ผ๋ จ์˜ ๊ฐ€๊ณต๊ณผ์ • ํ›„์— Model์—๊ฒŒ ๋„˜๊ฒจ์ค๋‹ˆ๋‹ค.

Model์€ ๊ทธ๊ฑธ ๋ฐ›๊ณ  ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ Controller์—๊ฒŒ ๋„˜๊ฒจ์ฃผ๊ณ , ๋‹ค์‹œ Controller๋Š” View๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์—ฌ๋Ÿฌ ๊ฐ€๊ณต์„ ๊ฑฐ์ณ์„œ View์—๊ฒŒ ๋„˜๊ฒจ์ค๋‹ˆ๋‹ค.

 

 

 

MVC ํŒจํ„ด์ด ์ž๋™์œผ๋กœ ์ง€์ผœ์ง€๋Š” 5๊ฐ€์ง€ ๊ทœ์น™

์œ„์—์„œ ์„ค๋ช…ํ•œ Model, View, Controller์˜ ํŠน์ง•์„ ๊ณ ๋ คํ•˜๋ฉด ์ถฉ๋ถ„ํžˆ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ทœ์น™์ž…๋‹ˆ๋‹ค.

  • Model์€ Controller์™€ View์— ์˜์กดํ•˜์ง€ ์•Š์•„์•ผ ํ•œ๋‹ค.
    Model ๋‚ด๋ถ€์— Controller์™€ View์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ๊ฐ€ ์žˆ์œผ๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค.

  • View๋Š” Model์—๋งŒ ์˜์กดํ•ด์•ผ ํ•˜๊ณ , Controller์—๋Š” ์˜์กดํ•˜๋ฉด ์•ˆ๋œ๋‹ค.
    View ๋‚ด๋ถ€์— Model์˜ ์ฝ”๋“œ๋งŒ ์žˆ์„ ์ˆ˜์žˆ๊ณ , Controller์˜ ์ฝ”๋“œ๊ฐ€ ์žˆ์œผ๋ฉด ์•ˆ๋œ๋‹ค.

  • View๊ฐ€ Model๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์„ ๋•Œ๋Š”, ์‚ฌ์šฉ์ž๋งˆ๋‹ค ๋‹ค๋ฅด๊ฒŒ ๋ณด์–ด์ฃผ์–ด์•ผ ํ•˜๋Š” ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•ด์„œ๋งŒ ๋ฐ›์•„์•ผ ํ•œ๋‹ค.
    ์˜ˆ๋ฅผ ๋“ค์–ด, ์•„๋ž˜์™€ ์ด๋ฏธ์ง€์—์„œ ๋นจ๊ฐ„์ƒ‰ ๋„ค๋ชจ๋ฅผ ์ œ์™ธํ•œ ๋ถ€๋ถ„๋งŒ Model๋กœ ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ํ•œ๋‹ค๋Š” ๋œป์ž…๋‹ˆ๋‹ค.


  • Controller๋Š” Model๊ณผ View์— ์˜์กดํ•ด๋„ ๋œ๋‹ค.

  • View๊ฐ€ Model๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์„ ๋•Œ, ๋ฐ˜๋“œ์‹œ Controller์—์„œ ๋ฐ›์•„์•ผ ํ•œ๋‹ค.