[강희] 자판기 미션 #21
[강희] 자판기 미션 #21
Conversation
| <input id="charge-input" type="number" /> | ||
| <button id="charge-button">투입하기</button> | ||
| <p id="charge-amount">투입한 금액: ${this.$state.totalInput}</p> | ||
| `; |
There was a problem hiding this comment.
여기서 this.$state.totalInput 이거 콘솔로 찍어보면 투입 금액 업데이트 잘 되거든요..?
근데 화면상에 리렌더링이 안돼요 미쳐버려 ㅠㅠ
skojphy
left a comment
skojphy
left a comment
There was a problem hiding this comment.
수고하셨어요 강희님!
리뷰어는 아니지만 리뷰할 사람이 없어서 강희님것도 살짝 봤습니당
| </tr> | ||
| `, | ||
| ) | ||
| .join(' '); |
| const list = BUTTON_LIST.map( | ||
| ({ id, name, dataset }) => | ||
| ` <li style="${this.$style.li}"> | ||
| <button id="${id}" data-menu="${dataset}">${name}</button> | ||
| </li>`, | ||
| ).join(' '); |
There was a problem hiding this comment.
list 네이밍이 조금 불친절한것같아요.
buttonList(?) 등이 좀더 적절한 것 같고 BUTTON_LIST는 BUTTON_ATTR_LIST(..?) 처럼 쓰면 어떨까요?
| const biggestCoin = coinList[0]; | ||
|
|
||
| if (!biggestCoin) break; | ||
| if (curMoney - biggestCoin < 0) { |
There was a problem hiding this comment.
조건문을 curMoney < biggestCoin으로 쓰면 더 직관적일 것 같아요.
| while (curMoney > 0) { | ||
| const biggestCoin = coinList[0]; | ||
|
|
||
| if (!biggestCoin) break; | ||
| if (curMoney - biggestCoin < 0) { | ||
| coinList.shift(); | ||
| continue; | ||
| } | ||
|
|
||
| newCoins[biggestCoin] += 1; | ||
| coins[biggestCoin] -= 1; | ||
| if (coins[biggestCoin] === 0) coinList.shift(); | ||
| curMoney -= biggestCoin; | ||
| } |
There was a problem hiding this comment.
while문을 사용해서 1씩 차감하니까 반복 횟수가 엄청 많아질 수도 있을 것 같아요.
money를 500원부터 나눠 보면서 한 번에 최대 개수만큼씩 줄어들면 [500, 100, 50, 10] 한 번 순회만으로 해결할 수 있지 않을까요?
| <td class="product-purchase-price" data-product-price="${cost}">${cost}</td> | ||
| <td class="product-purchase-quantity" data-product-quantity="${count}">${count}</td> | ||
| <td><button class="purchase-button">구매하기</button></td> | ||
| </tr> |
There was a problem hiding this comment.
원래 리액트라면 이 html은 맵을 돌렸을 거 같은데
맵을 돌릴 수 있게 코드명이나 클래스명 등 다른것들이 설계되었으면 전체코드가 훨씬 줄운 것 같아요 👍
| 500: 0, | ||
| 100: 0, | ||
| 50: 0, | ||
| 10: 0, |
There was a problem hiding this comment.
다른코드에는 동전값이 null일때가 있던데 둘 간의 차이가 있나요?
| @@ -0,0 +1,56 @@ | |||
| import Component from './Component.js'; | |||
There was a problem hiding this comment.
예전에 인프런에서 이런 형태로 사전과제 진행했었는데, Component 같은 경우 컴포넌트를 구현하기 위해 필요한 기능들을 추상화한 것이므로 core와 같은 폴더에 있으면 좀 더 좋았을 것 같다고 피드백 받았었습니다.
아무래도 다른 컴포넌트와 목적이 조금 다르다보니 분리하는 것이 관리하기 용이하다고 생각한거 같아요!
| <input id="charge-input" type="number" /> | ||
| <button id="charge-button">투입하기</button> | ||
| <p id="charge-amount">투입한 금액: ${this.$state.totalInput}</p> | ||
| `; |
| @@ -0,0 +1,7 @@ | |||
| export const MENUS = { | |||
There was a problem hiding this comment.
자바스크립트 환경이니, 상수화할 때 Object.freeze 메서드로 불변 객체를 만드는 것이 좀 더 안전할 거 같습니다.
5 participants
자판기 모드에서 투입한 금액이 업데이트 되지 않는 심각한 버그가 있습니당...
같이 찾아주시면..감사하겠습니다..
콘솔로 찍으면 금액 업데이트 되었는데 리렌더링이 안되더라구요 ㅠㅠ