-
Notifications
You must be signed in to change notification settings - Fork 375
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[14기 김동영] step2 - 상태 관리로 메뉴 관리하기 #288
base: pers0n4
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
안녕하세요 동영님!
웹 컴포넌트로 깔끔하게 잘 만드셨네요. 많이 배웠어요! 👍
너무 잘 작성하셔서 남길게 별로 없네요... ㅠ
고생하셨습니다!
try { | ||
const value = storage.getItem(key); | ||
if (typeof value !== "string") { | ||
throw new TypeError(`${key} is not a string`); | ||
} | ||
return JSON.parse(value); | ||
} catch { | ||
return defaultValue; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
string
이 아닌 키가 들어오면 defaultValue
로 인한 오동작은 처리할 방법이 없을 것 같아요..! throw new TypeError만 던지고 try catch는 사용하는 부분에서 처리하거나 string
이 아닌 키가 들어올땐 콘솔로 경고를 찍고 기본값을 리턴하는 구조는 어떨까요~?
this.isSoldOut = isSoldOut; | ||
} | ||
|
||
attributeChangedCallback(name, _oldValue, newValue) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
attributeChangedCallback
으로 처리하니 로직이 굉장히 심플해 지는 것 같네요. 저도 다음에 사용해봐야겠어요!👍
...this.#state.menuList.slice(0, index), | ||
{ | ||
name: menuItem.name, | ||
isSoldOut: menuItem.isSoldOut, | ||
}, | ||
...this.#state.menuList.slice(index + 1), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분은 중복으로 사용되고 있는거 같은데 함수화 해서 사용하는건 어떨까요~?
Checklist
sold-out
class를 추가하여 상태를 변경한다.Description
function
형태로 선언되었던App
을class
로 변환MenuItem
을App
의 상태에 따라 렌더하도록 변경MenuItem
품절 속성 추가Additional
App
에서render
method를 호출할 때menuList
의 모든children
을replaceChildren
으로 교체하는데, 일부분만 수정이 필요한 경우 어떻게 최적화를 진행할 수 있을까App.js
에 집중되는 중menuForm
,menuList
,menuCount
,categoryTitle
element 등을 별도의 컴포넌트로 선언함으로써 책임을 분리하는 방향으로 진행하는게 좋을 듯Demo
https://pers0n4.github.io/moonbucks-menu/