Feed Step 10 - amorfati0310/javascript-vm GitHub Wiki

์ง€๊ธˆ ๊ตฌ์กฐ์—์„œ๋Š”
controller ์˜ ์ด๋Ÿฐ ๋ฉ”์„œ๋“œ๋“ค์ด ์–ด๋””์„œ ์–ด๋–ป๊ฒŒ ๋ถˆ๋ฆฌ๋Š”์ง€ ์•Œ์ˆ˜๊ฐ€ ์—†์–ด์„œ ์•ฝ๊ฐ„ ๋‹ต๋‹ตํ•˜๋„ค์š”.

๊ทธ๋ฆฌ๊ณ  ๋ฉ”์„œ๋“œ ์ด๋ฆ„์ด '๋ฉ”์‹œ์ง€'์™€ ์ผ์น˜์‹œํ‚จ ๊ฑด ๋‚˜๋ฆ„๋Œ€๋กœ์˜ ์•„์ด๋””์–ด๋กœ ๋ณด์—ฌ์š”.
๋‹ค๋งŒ ์ด๋ฆ„๊ณผ ๋ฉ”์‹œ์ง€๋ช…์„ ์ผ์น˜์‹œ์ผœ์•ผ ํ•ด์„œ ์ด๋ฆ„์ด ๋ณ€๊ฒฝ๋˜๋ฉด ์–‘์ชฝ์„ ๋ชจ๋‘ ์ˆ˜์ •ํ•ด์•ผ ํ•˜๋Š” ์ด์Šˆ๊ฐ€ ์žˆ์„ ๊ฑฐ ๊ฐ™๋„ค์š”.
๋ฌผ๋ก  ์ด๋ ‡๊ฒŒ ๊ตฌํ˜„ํ•ด๋„ ํฐ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฑด ์•„๋‹ˆ๊ณ ์š”.

ํ”ผ๋“œ ๋‚ด ์ƒ๊ฐ

  1. ใ…‡ใ…‡ bind๋˜๊ฑฐ๋‚˜ observable๋กœ ํ•œ ๋ถ€๋ถ„์€ ์–ด๋–ป๊ฒŒ ์–ฝํ˜€์žˆ๋Š”์ง€๊ฐ€ ๋ณด์ธ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ง€๊ธˆ ์ฝ”๋“œ์—์„œ๋Š” emit์„ ํ•˜๋Š” ๋ถ€๋ถ„์ด ๋‹ค model์ด๋ž‘ view์—์„œ๋งŒ ๋‚˜ํƒ€๋‚˜์ ธ ์žˆ๋‹ค. ์ปจํŠธ๋กค๋Ÿฌ์—์„œ ํŒŒ์•…ํ•˜๊ธฐ ์–ด๋ ค์šด ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค

๋ฌธ์ œ๋Š” ์ธ์‹ํ–ˆ๋Š”๋ฐ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์„๊นŒ?.? ...

observable notify์™€ ๋น„์Šท emit์—์„œ eventName๊ณผ data์„ ๋ณด๋‚ด์ฃผ๋Š” ๊ฒƒ๊ณผ ์งœ๋ณธ observable ํŒจํ„ด์—์„œ๋„ data, type type์œผ๋กœ method๋ฅผ ๊ตฌ๋ถ„์‹œํ‚ค๋Š” ๊ฒƒ ๋งŽ์ด ํก์‚ฌ ํ•จ

  initRender(){
    this.vendingMachineViewInitRender()
    this.walletViewInitRender()
  }
  vendingMachineViewInitRender(){
    const snackList = this.vendingMachine.getSnackList()
    this.vendingMachineView.initRender(snackList)    
  }
  walletViewInitRender(){
    const myMoney  = this.wallet.getMyMoney();
    const toatlMoney = this.wallet.getTotalMoney()
    this.walletView.initRender(myMoney, toatlMoney);
  }

๋Šฅ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง์„ ํ•œ๋‹ค. data๋ฅผ ์ง์ ‘ ๋„ฃ์–ด์ค€๋‹ค. ์ด๊ฒŒ ๋งž๋Š” ๊ฑด์ง€ ?

document.addEventListener("DOMContentLoaded", (e)=> {
  console.log("DOM fully loaded and parsed");
  // rendering 
  walletView.initRender(myMoney,wallet.getTotalMoney());
  vendingMachineView.initRender(snackList);
});