TIL

20.09.08_TIL

grasinnong 2020. 9. 12. 16:58

 

 

์˜ค๋Š˜์€ MVC ํŒจํ„ด์„ ๊ณต๋ถ€ํ•˜์˜€๋‹ค. 

 

MVC ํŒจํ„ด์ด๋ž€ ๋ฌด์—‡์ผ๊นŒ?

์ผ๋‹จ MVC ๋Š” Model, View, Controller์˜ ์•ฝ์ž์ด๋‹ค.  ์†Œํ”„ํŠธ์›จ์–ด๊ฐ€ ๋Œ์•„๊ฐ€๋Š” ํ•˜๋‚˜์˜ ์„ค๊ณ„ ํŒจํ„ด์œผ๋กœ ์ดํ•ดํ•˜๋ฉด ๋œ๋‹ค. 

๊ทธ๋Ÿผ ์ด์ œ MVC ๋Š” ์–ด๋–ค ์„ค๊ณ„ ํŒจํ„ด์ผ๊นŒ? 

 

MVC ํŒจํ„ด์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ํ‚ค์›Œ๋“œ๋Š” ๋ถ„์—…ํ™”๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. MVC ํŒจํ„ด์€ ๊ฐ ์ฝ”๋“œ๊ฐ€ ๊ฐ์ž์˜ ์—ญํ• ๋งŒ์„ ํ•˜๋„๋ก ์„ค๊ณ„ํ•œ๋‹ค. Model์€ Model์˜ ์—ญํ• ๋งŒ, View๋Š” View์˜ ์—ญํ• ๋งŒ, Controller๋Š” Controller์˜ ์—ญํ• ๋งŒ ํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. 

 

์ด๋ ‡๊ฒŒ ๋ถ„์—…์„ ํ•˜์˜€์„ ๋•Œ์˜ ์žฅ์ ์€ ๊ฐ ์ฝ”๋“œ๋“ค์ด ์˜๋„๋œ ์—ญํ• ๋งŒ ํ•˜๋ฏ€๋กœ ์˜ˆ์ธก์ด ์‰ฝ๊ณ  ๊ด€๋ฆฌ๊ฐ€ ์‰ฝ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์ผ์ข…์˜ ์ •๋ฆฌ์ •๋ˆ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ์žˆ์–ด์•ผ ํ•  ๊ณณ์— ๊ฐ ๋ฌผ๊ฑด์ด ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. 

 

์ด์ œ ๊ทธ๋Ÿผ Model ์˜ ์—ญํ• ์€ ๋ฌด์—‡์ด๊ณ , View ์˜ ์—ญํ• ์€ ๋ฌด์—‡์ด๊ณ , Controller์˜ ์—ญํ• ์€ ๋ฌด์—‡์ผ๊นŒ?

 

Model์˜ ์—ญํ•  

๋ชจ๋ธ์€ ๋ฐ์ดํ„ฐ์— ๊ด€ํ•œ ์ผ์„ ํ•˜๋Š” ๊ณณ์ด๋‹ค. ์ง์ ‘ ์ž์‹ ์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜๋„ ์žˆ๊ณ , ์•„๋‹ˆ๋ฉด DB์— ์ง์ ‘ ์ ‘์ด‰์„ ํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ฑฐ๋‚˜ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋‹ค. 

 

Controller์˜ ์—ญํ• 

controller๋Š” ์œ ์ €๋กœ๋ถ€ํ„ฐ  ์–ด๋– ํ•œ ์•ก์…˜์ด๋‚˜ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ์ธํ’‹ ๊ฐ’์„ ๋ฐ›์•„์˜จ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐ›์•„์˜จ ๊ฐ’์„ ๊ฐ€๊ณตํ•œ ๋’ค Model์—๊ฒŒ ๊ฐ€๊ณต๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. 

 

 

View ์˜ ์—ญํ•  

view๋Š” ํ™”๋ฉด์— ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๊ทธ๋ฆฌ๋Š” ์ผ์„ ํ•œ๋‹ค.  Controller์™€ ์†Œํ†ต์„ ํ•˜๋ฉฐ ๊ฐ’์„ ๋ฐ›์•„์˜ค๊ณ  ํ™”๋ฉด์— ์ถœ๋ ฅํ•œ๋‹ค. 

 

 

 

๊ทธ๋Ÿผ ์ด์ œ ์˜ˆ์‹œ๋กœ ์–ด๋–ป๊ฒŒ MVCํŒจํ„ด์ด ๋Œ์•„๊ฐ€๋Š”์ง€ ์‚ดํŽด๋ณด์ž. 

 

 

 

 

๋งŒ์•ฝ ์œ ์ €๊ฐ€ ์œ„์™€ ๊ฐ™์€ ์ฃผ์†Œ๋กœ ๋“ค์–ด์˜จ๋‹ค๊ณ  ํ•˜์ž. ๊ทธ๋Ÿผ router์—์„œ๋Š” ๋ถ„๊ธฐ๊ฐ€ ์ผ์–ด๋‚˜์„œ ๊ฐ๊ฐ์— ์•Œ๋งž์€ Controller๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋œ๋‹ค. 

/routes
users/profile/:id = Users.getProfile(id);

 

router์—์„œ๋Š” controller์— ์žˆ๋Š” getProfile์ด๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์žˆ๋‹ค.

 

 

/controllers
  class Users{
    function getProflie(id){
      profile = this.UserModel.getProfile(id);
      //profile์— model์—์„œ ๋ฐ›์•„์˜จ ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๊ณ  ์žˆ๋‹ค. 
      
      renderView('users/profile', profile)
      //๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ์ด์   view์—๊ฒŒ ๋ณด๋‚ด์ฃผ๊ณ  ์žˆ๋‹ค. 
    }
  }

controller์—์„œ getProfile์ด๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋Š” ๋‹ค์‹œ Model์— ์žˆ๋Š” getProfile์ด๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์žˆ๋‹ค.

 

/model
  Class UserModel{
    function getProfile(id){
      data = this.db.get('SELECT * FROM users WHERE id = id')
      return data;
    }
  }

 

model์„ ๋ณด๋ฉด getProfile์€ ๋ฐ›์•„์˜จ id๊ฐ’์„ ๊ฐ€์ง€๊ณ  id๊ฐ’๊ณผ ์ผ์น˜ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์š”์ฒญํ•˜๊ณ  ์žˆ๋‹ค. 

๊ทธ๋ฆฌ๊ณ  ๋ฐ›์•„์˜จ data๋ฅผ ๋ฆฌํ„ดํ•ด์ฃผ๊ณ  ์žˆ๋‹ค. 

 

 

์ง€๊ธˆ๊นŒ์ง€์˜ ๊ณผ์ •์„ ์ •๋ฆฌํ•˜๋ฉด 

1. user๊ฐ€ ์–ด๋– ํ•œ ์ฃผ์†Œ๋กœ ๋“ค์–ด์˜ด

2. router์—์„œ ๋ถ„๊ธฐ๊ฐ€ ์ด๋ฃจ์–ด์ง€๊ณ  ๊ฐ๊ฐ์— ๋งž๋Š” controller๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค. 

3. controller๋Š” model์„ ํ˜ธ์ถœํ•œ๋‹ค. 

4. model์€ controller๋กœ ๋ถ€ํ„ฐ ๋ฐ›์•„์˜จ ์ธ์ž๊ฐ’์„ ๊ฐ€์ง€๊ณ  db์— data๋ฅผ ์š”์ฒญํ•œ๋‹ค. 

5. db๋กœ๋ถ€ํ„ฐ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋Š” ๋‹ค์‹œ controller์˜ profile์— ๋“ค์–ด๊ฐ€๊ณ  

6. ๊ทธ ๋ฐ์ดํ„ฐ๋Š” view์—๊ฒŒ ์ „๋‹ฌ๋œ๋‹ค. 

 

 

/views
 /users
  /profile
  <h1>{{profile.name}}</h1>
  

view์—์„œ๋Š” ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๊ฒŒ ๋œ๋‹ค.