Skip to content

Latest commit

ย 

History

History
126 lines (76 loc) ยท 5.56 KB

DesignPattern.md

File metadata and controls

126 lines (76 loc) ยท 5.56 KB

Model View Controller (๋ชจ๋ธ ๋ทฐ ์ปจํŠธ๋กค๋Ÿฌ)

์ž‘์„ฑ์ž : ๊น€์šฐ์˜

๋””์ž์ธ ํŒจํ„ด์ด๋ž€?

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

ํ˜ผ์ž ๊ฐœ๋ฐœํ• ๋•Œ์— ๋น„ํ•ด ์—ฌ๋Ÿฌ ์‚ฌ๋žŒ์ด ํ˜‘์—…ํ•˜์—ฌ ์ž‘์—…ํ•  ๋•Œ ๋ฒ„๊ทธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ธฐ ์‰ฝ๊ณ  ์ตœ์ ํ™” ์‹œํ‚ค๊ธฐ๋„ ์–ด๋ ค์šฐ๋ฏ€๋กœ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋””์ž์ธ ํŒจํ„ด์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋””์ž์ธ ํŒจํ„ด์€ ์˜์‚ฌ์†Œํ†ต ์ˆ˜๋‹จ์˜ ์ผ์ข…์œผ๋กœ์„œ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด์ค๋‹ˆ๋‹ค.

MVC

Model + View + Controller

๊ตฌ์กฐ

MVC

  • Model : ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ์™€ ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
  • View : ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” UI ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
  • Controller : ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ(Action)์„ ๋ฐ›๊ณ  ์ฒ˜๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.

๋™์ž‘

MVC ํŒจํ„ด์˜ ๋™์ž‘ ์ˆœ์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ์‚ฌ์šฉ์ž์˜ Action๋“ค์€ Controller์— ๋“ค์–ด์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  2. Controller๋Š” ์‚ฌ์šฉ์ž์˜ Action์„ ํ™•์ธํ•˜๊ณ , Model์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
  3. Controller๋Š” Model์„ ๋‚˜ํƒ€๋‚ด์ค„ View๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
  4. View๋Š” Model์„ ์ด์šฉํ•˜์—ฌ ํ™”๋ฉด์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

* MVC์—์„œ View๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๋Š” ๋ฐฉ๋ฒ•

  • View๊ฐ€ Model์„ ์ด์šฉํ•˜์—ฌ ์ง์ ‘ ์—…๋ฐ์ดํŠธ
  • Model์—์„œ View์—๊ฒŒ Notify ํ•˜์—ฌ ์—…๋ฐ์ดํŠธ
  • View๊ฐ€ Polling์œผ๋กœ ์ฃผ๊ธฐ์ ์œผ๋กœ Model์˜ ๋ณ€๊ฒฝ์„ ๊ฐ์ง€ํ•˜์—ฌ ์—…๋ฐ์ดํŠธ

ํŠน์ง•

Controller๋Š” ์—ฌ๋Ÿฌ๊ฐœ์˜ View๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” 1:n ๊ตฌ์กฐ์ž…๋‹ˆ๋‹ค.
Controller๋Š” View๋ฅผ ์„ ํƒํ•  ๋ฟ ์ง์ ‘ ์—…๋ฐ์ดํŠธ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. (View๋Š” Controller๋ฅผ ์•Œ์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.)

์žฅ์ 

MVC ํŒจํ„ด์˜ ์žฅ์ ์€ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” ๋””์ž์ธ ํŒจํ„ด์ด๋ผ๋Š” ์ ์— ๊ฑธ๋งž๊ฒŒ ๊ฐ€์žฅ ๋‹จ์ˆœํ•ฉ๋‹ˆ๋‹ค.
๋‹จ์ˆœํ•˜๋‹ค ๋ณด๋‹ˆ ๋ณดํŽธ์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋””์ž์ธ ํŒจํ„ด์ž…๋‹ˆ๋‹ค.

๋‹จ์ 

MVC ํŒจํ„ด์˜ ๋‹จ์ ์€ View์™€ Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ๋†’๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. View์™€ Model์˜ ๋†’์€ ์˜์กด์„ฑ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ปค์งˆ์ˆ˜๋ก ๋ณต์žกํ•ด์ง€๊ณ  ์œ ์ง€๋ณด์ˆ˜์˜ ์–ด๋ ค์›€์„ ์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.

MVP

MVP ํŒจํ„ด์€ Model + View + Presenter๋ฅผ ํ•ฉ์นœ ์šฉ์–ด์ž…๋‹ˆ๋‹ค. Model๊ณผ View๋Š” MVC ํŒจํ„ด๊ณผ ๋™์ผํ•˜๊ณ , Controller ๋Œ€์‹  Presenter๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

๊ตฌ์กฐ

MVP

  • Model : ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ์™€ ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
  • View : ์‚ฌ์šฉ์ž์—์„œ ๋ณด์—ฌ์ง€๋Š” UI ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
  • Presenter : View์—์„œ ์š”์ฒญํ•œ ์ •๋ณด๋กœ Model์„ ๊ฐ€๊ณตํ•˜์—ฌ View์— ์ „๋‹ฌํ•ด ์ฃผ๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. View์™€ Model์„ ๋ถ™์—ฌ์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

๋™์ž‘

MVP ํŒจํ„ด์˜ ๋™์ž‘ ์ˆœ์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ์‚ฌ์šฉ์ž์˜ Action๋“ค์€ View๋ฅผ ํ†ตํ•ด ๋“ค์–ด์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  2. View๋Š” ๋ฐ์ดํ„ฐ๋ฅผ Presenter์— ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค.
  3. Presenter๋Š” Model์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค.
  4. Model์€ Presenter์—์„œ ์š”์ฒญ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค.
  5. Presenter๋Š” View์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค.
  6. View๋Š” Presenter๊ฐ€ ์‘๋‹ตํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•˜์—ฌ ํ™”๋ฉด์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

ํŠน์ง•

Presenter๋Š” View์™€ Model์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ๋‘˜์„ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.
Presenter์™€ View๋Š” 1:1 ๊ด€๊ณ„์ž…๋‹ˆ๋‹ค.

์žฅ์ 

MVP ํŒจํ„ด์˜ ์žฅ์ ์€ View์™€ Model๊ฐ„์˜ ์˜์กด์„ฑ์ด ์—†๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. MVP ํŒจํ„ด์€ MVC ํŒจํ„ด์˜ ๋‹จ์ ์ด์—ˆ๋˜ View์™€ Model์˜ ์˜์กด์„ฑ์„ ํ•ด๊ฒฐํ•˜์˜€์Šต๋‹ˆ๋‹ค.(Presenter๋ฅผ ํ†ตํ•ด์„œ๋งŒ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ๋ฐ›๊ธฐ ๋•Œ๋ฌธ)

๋‹จ์ 

MVC ํŒจํ„ด์˜ ๋‹จ์ ์ธ View์™€ Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ์€ ํ•ด๊ฒฐ๋˜์—ˆ์ง€๋งŒ, View์™€ Presenter ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ๋†’์€ ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋ณต์žกํ•ด์งˆ ์ˆ˜๋ก View์™€ Presenter ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ๊ฐ•ํ•ด์ง€๋Š” ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

MVVM

MVVM

MVVM ํŒจํ„ด์€ Model + View + View Model์„ ํ•ฉ์นœ ์šฉ์–ด์ž…๋‹ˆ๋‹ค. Model๊ณผ View๋Š” ๋‹ค๋ฅธ ํŒจํ„ด๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.

  • Model : ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ์™€ ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
  • View : ์‚ฌ์šฉ์ž์—์„œ ๋ณด์—ฌ์ง€๋Š” UI ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
  • View Model : View๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  View๋ฅผ ์œ„ํ•œ Model์ž…๋‹ˆ๋‹ค. View๋ฅผ ๋‚˜ํƒ€๋‚ด ์ฃผ๊ธฐ ์œ„ํ•œ Model์ด์ž View๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.

๋™์ž‘

MVVM ํŒจํ„ด์˜ ๋™์ž‘ ์ˆœ์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ์‚ฌ์šฉ์ž์˜ Action๋“ค์€ View๋ฅผ ํ†ตํ•ด ๋“ค์–ด์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  2. View์— Action์ด ๋“ค์–ด์˜ค๋ฉด, Command ํŒจํ„ด์œผ๋กœ View Model์— Action์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
  3. View Model์€ Model์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค.
  4. Model์€ View Model์—๊ฒŒ ์š”์ฒญ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค.
  5. View Model์€ ์‘๋‹ต ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๊ณตํ•˜์—ฌ ์ €์žฅํ•ฉ๋‹ˆ๋‹ค.
  6. View๋Š” View Model๊ณผ Data Bindingํ•˜์—ฌ ํ™”๋ฉด์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

ํŠน์ง•

MVVM ํŒจํ„ด์€Command ํŒจํ„ด๊ณผData Binding๋‘ ๊ฐ€์ง€ ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Command ํŒจํ„ด๊ณผ Data Binding์„ ์ด์šฉํ•˜์—ฌ View์™€ View Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ์„ ์—†์•ด์Šต๋‹ˆ๋‹ค.

View Model๊ณผ View๋Š” 1:n ๊ด€๊ณ„์ž…๋‹ˆ๋‹ค.

์žฅ์ 

MVVM ํŒจํ„ด์€ View์™€ Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ์—†์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ Command ํŒจํ„ด๊ณผ Data Binding์„ ์‚ฌ์šฉํ•˜์—ฌ View์™€ View Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ ๋˜ํ•œ ์—†๋Š” ๋””์ž์ธ ํŒจํ„ด์ž…๋‹ˆ๋‹ค. ๊ฐ๊ฐ์˜ ๋ถ€๋ถ„์€ ๋…๋ฆฝ์ ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“ˆํ™” ํ•˜์—ฌ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹จ์ 

MVVM ํŒจํ„ด์˜ ๋‹จ์ ์€ View Model์˜ ์„ค๊ณ„๊ฐ€ ์–ด๋ ต๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.